The image source (either a remote URL or a local file resource)

user_11525170 0
Viewed 1105

hello I am new to react native I am facing an issue while I am passing imageURL as a prop I have an onboarding component in which I have an image tag I want to pass the image here as a prop but I am facing an issue I am using typescript in my project here is my onboarding component

const OnBoarding: React.FC<{imageUrl: string}> = (imageUrl) => {
  return (
    <View style={styles.container}>
      <View style={styles.subContainer}>
        <View style={styles.skipContainer}>
          <Image style={{width:150, height:150}} source={{ uri: imageUrl }} />
        </View>
        <View style={styles.nextContainer}>
          <View>
            <Tittle />
            <View style={styles.paragraphSec}>
              <SubTittle />
            </View>
            <View
              style={{
                flexDirection: 'row',
                width: '15%',
                justifyContent: 'space-between',
                marginTop: 12,
              }}>
              <View style={styles.swipe}></View>
              <View style={styles.swipe}></View>
              <View style={styles.swipe}></View>
            </View>
          </View>
          <View style={styles.nextButton}>
            <View style={styles.circle}>
              <Text style={styles.next}>Next</Text>
            </View>
          </View>
        </View>
      </View>
    </View>

and this is my app.tsx file where i import onBoarding component i am new to typescript

const App: React.FC<{}> = () => {
  return (
      // <WelcomeScreen />
      <OnBoarding imageUrl={require("../assets/blur.png")}/>
  );
};

enter image description here

enter image description here

enter image description here

react-native typescript
3 Answers

For this, you need to pass the image source from App itself by specifically checking the condition of having a remote URI or not.

const App: React.FC<{}> = () => {
const imageSource = isHavingRemoreURI ? {uri: https://remoteURI} : require("../assets/blur.png");
  return (
      // <WelcomeScreen />
      <OnBoarding imageUrl={imageSource}/>
  );
};

Usage like:

...
<View style={styles.skipContainer}>
   <Image style={{width:150, height:150}} source={imageUrl} />
</View>
...
user_85233690

try wrapping it with JSON.parse like so:

<Image source={JSON.parse(imageUrl)} style={{width: 39, height: 39}} />
user_94278960

For remote source:

source={{uri: 'your_image_path'}}
user_165253220
Related