Passing parameters image to one file is not working on the phone but working on the Pc-CodePudding

**I have 2 files, one is called firstFile and other is secondFile, I want to render the image from firstFile into secondFile on press button. and it is working on the desktop but not working on phone instead it is showing me the development server returned response errror code : 500 && Invalid call at line 18: require(“../assets/img/” image) ** if anybody can help me, it would be great relieve thank you

///. firstFile file



function firstFile() {
   const navigation = useNavigation(); // for navigation on press purpose.

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
          <View style={{ height: 150, marginTop: 10 }}>
            <ScrollView
              horizontal={true}
              showsHorizontalScrollIndicator={false}
            >
              <Pressable onPress={() => navigation.navigate("secondFile", {
                      image:"Tree-character_SVG.png",
                      text:"Get green\nelectricity",
              })}>
                <Category
                  imageUri={require("../assets/img/Tree-character_SVG.png")}
                  text="Get green\nelectricity"
                />
              </Pressable>
              
            </ScrollView>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

export default firstFile;

// secondFile file

export default function secondFile({route}) {
  const navigation = useNavigation(); // for navigation on press purpose.

 const { image, text} = route.params;
  
  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          style={styles.image}
          source={require(`../assets/img/${image}`)}
        />
        <Text style={styles.imageText}>{text}</Text>
      </View>

    </View>
  );
}

CodePudding user response：

could you try this code?

<Image
   style={styles.image}
   source={image ? require(`../assets/img/${image}`) : undefined}
/>

CodePudding user response：

You cant have variables in your require in RN.

Try in the first file const image = require'//full require'

and then pass image through props and then you can just go source={image}