React native states error in return function

Question

export default function CardImageExample (props) {

  const [path,setpath] = React.useState("'../collections/download-0.jpg'")

  function change(){
    console.log(path)

    if(path == "'../collections/download.jpg'"){
      setpath("'../collections/download-0.jpg'")
    }
    else{
      setpath("'../collections/download.jpg'")
    }
  }

    return (
      <View style={{alignItems: 'center'}}>
        <Card style={{height: 240, width: 280, alignItems: 'center'}}>
          <CardItem bordered button onPress={change}>
            **<Image source={require(path)} />**
          </CardItem>
        </Card>
      </View>
    );
}

the path variable does not work but if i use the path directly it works.. Please save

What do you mean with `does not work`? What do you expect to happen? What does actually happen? Is there an error? Can you share logs/stack traces? — dan1st, Feb 27 '20 at 18:11
error: bundling failed: components\card.js: components\card.js:Invalid call at line 23: require(path) this is the error when i use path variable in the require() function. But when i use the actual path i.e '../collections/download-0.jpg' , it works fine. i want to use the path variable — Jatin Agarwal, Feb 27 '20 at 18:19

score 0 · Answer 1 · answered Feb 27 '20 at 18:46

0

try passing require inside the path state and then in Image source pass only path instead of require(path)

you can check this other similar question, I think it will help you:

React Native - Image Require Module using Dynamic Names

answered Feb 27 '20 at 18:46

Marc Victor

96
1
4

glad to help @JatinAgarwal :) – Marc Victor Feb 27 '20 at 19:21

React native states error in return function

1 Answers1