Search code examples
javascriptreactjsreact-nativereact-proptypes

What prop type should I check for requiring the source?


I'm writing a project based on react native. I'm using prop-types for type checking of components. now I wanna wrap Image component of react-native in my own Image component. In the following code see my own Image component:

import React from 'react';
import { Image as ImageNative } from 'react-native';
import PropTypes from 'prop-types';

const Image = ({ style, source }) => (
  <ImageNative source={source} style={style} />
);

Image.defaultProps = {
  style: {}
};

Image.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  source: PropTypes.any.isRequired
};

export default Image;

Each place I decide to use my own Image component, I will import it and use it like below:

<Image source={require('assets/images/splashSignInAsset.png')} />

Actually, I checked source prop inside my own Image component as any.

source: PropTypes.any.isRequired

But it's not true. I know it. I don't know what should I write there. What is the type of require function return value which I checked it here?


Solution

  • Currently is possible this statement as a type:

    import { ImageProps } from 'react-native';
    
    interface Props {
      imageSource: ImageProps['source'];
    }
    

    Where ImageProps['source'] will return the correct type from the package and also receive further updates.