React Native - How to pass Image source from outside

Question

To send entire require('./images/logo.png') as a prop i have to create boolean to check if the image is from web or is being passed from a local folder. How to create this kind of boolean?

type ImageProps = {
    imageName: string;
    fromWeb: boolean;
};

export function CustomImage({ imageName, fromWeb }: ImageProps) {
    return (
        <View>
            <Image style={styles.image} source={imageName} />
        </View>
    );
}

File from outside the component

function PassedImages() {
        return (
            <View>
             <CustomImage fromWeb={false} imageName={require('./images/logo.png')}/>
            </View>
        );
    }

also you can't dynamically chance local image name you will need to create an array of local image array — Abd, Oct 24 '22 at 14:24
@user18309290 fromWeb is not implemented yet , but it should have the logic to check if the image is from web or is being passed from a local folder. Dont know how to implement it — CodingProfile, Oct 24 '22 at 14:43

score 0 · Answer 1 · answered Oct 24 '22 at 14:57

No need to check the origin of the image. Image handles that and works all options below.

const assetImage = require('@expo/snack-static/react-native-logo.png');
const networkImage = 'https://reactnative.dev/img/tiny_logo.png';

<Image
  style={styles.logo}
  source={{uri: assetImage}}
/>
<Image
  style={styles.logo}
  source={assetImage}
/>
<Image
  style={styles.logo}
  source={{
    uri: networkImage,
  }}
/>
<Image
  style={styles.logo}
  source={networkImage}
/>

React Native - How to pass Image source from outside

1 Answers1