React Native image insertion and strings

Question

I am working with React Native and trying to get an image to show up based off title variable that is different for a list. I do not think I am handling the strings right with the JavaScript but not sure how to fix this. Any suggestions? It runs fine when I just hardcode the image source path so I know that is correct.

<View style={{ flex: 8 }}>
     this.setState({
         link: './assets/' + this.props.title + '.jpg',
     });
     <Image source={require(this.state.link)} style={[styles.images]} />
</View>

Try using path.join('./assets/', this.props.title, '.jpg') — Ryan Walker
– Ryan Walker, Commented Dec 2, 2017 at 22:39
Possible duplicate of react native use variable for image file — Rich Churcher
– Rich Churcher, Commented Dec 2, 2017 at 23:19

senthilbalaji · Accepted Answer · 2017-12-03 03:10:48Z

You can't even setState inside a view like that, and for require statement that you can't put a string with concatenating with another set string, always require statement should be completely hard-coded like this require("./assets/image.png"); and the soln can be like this:

import {...} from '...';
    const titleImages = {
      title1: require("./assets/title1.png"),
      title2: require("./assets/title2.png") //here title1/title2 should be the value that you receive in props
    };
    class Anyclass extends Component {
      render() {
        const { title } = this.props;
        return (
          <View style={{ flex: 8 }}>
            <Image source={titleImages[title]} style={[styles.images]} />
          </View>
        );
      }
    }

if you have multiple titles, you can just declare the require statement in titleImages object and can render the image.

Lucero Peñarrieta · Accepted Answer · 2017-12-02 23:04:25Z

0

Maybe, could you try to use:

this.setState({ link: `./assets/${this.props.title}.jpg` });

edited Dec 2, 2017 at 23:04

answered Dec 2, 2017 at 22:57

Lucero Peñarrieta

374 bronze badges

Comments

Rich Churcher · Accepted Answer · 2017-12-02 23:18:26Z

0

Setting aside the call to setState from inside the render, which should probably be avoided, I think the issue here is that you're trying to use a variable inside a call to require. require calls are resolved at build time by the packager, so they need a static resource (one that doesn't depend on the value of a variable). This is a pretty good coverage of static asset management strategies in React Native: https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/

answered Dec 2, 2017 at 23:18

Rich Churcher

7,6923 gold badges40 silver badges61 bronze badges

Collectives™ on Stack Overflow

React Native image insertion and strings

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related