How can I have a Dynamic Image uri that is not always defined in React Native?

Question

I am trying to get the filename of my image from a fetch to my rest service. But React tries to require the image before the call has the filename so ofcourse it can't find the image and gives me a 500 error back. Is there any way to solve or work around this?

I am trying to get the filename from a json which it gets back from the fetch.

The function in which this is supposed to happen

nextPerson = () => {
      var numberOfPersons = Object.keys(this.state.peopleList).length;

      if (this.state.personIndex < numberOfPersons) {
        person = this.state.peopleList[this.state.personIndex]
        this.setState({currentPerson:person});

        this.setState({image : require('../img/' + Object(this.state.currentPerson.gebruikerFoto).url)});

        this.state.personIndex++;
      }
    }

The render of my component

render() {
    var img = this.state.image;

      return (
        <View style={styles.container}>
          <Image style={styles.image} source={img} />

          <Text style={styles.persoonNaam}>{this.state.currentPerson.gebruikerNaam}</Text>
          <Text style={styles.persoonBio}>{this.state.currentPerson.biografie}</Text>
          <TouchableOpacity onPress={this.likePersoon}>
            <Text>Like</Text>
          </TouchableOpacity>
        </View>
      );
    }

this link will help you. https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names — Aras, Oct 23 '19 at 13:08
I have tried that but the value will be undefined at some point when it tries to load it and then I still get the error @Aras — Giulio, Oct 23 '19 at 13:13

score 0 · Answer 1 · answered Oct 24 '19 at 07:55

You need to keep your component in loading state, by rendering a shimmer component (react-native-shimmer) or just use ActivityIndicator from react native, until your api call finishes. Once the data is available you can render the Image component.

render() {
if (!this.state.imageUri) return <ActivityIndicator />; // keep showing the loader until the api call is done. Update the state once the call is successful.

return (
 <Image /> // your image component
)

score 0 · Answer 2 · answered Oct 24 '19 at 10:12

see this example:

renderItem = ({item})=>{
    return(


            <TouchableOpacity onPress={ () => this._openViewPage(item.id, item.cat_id,this.state.token)} style={styles.boxContainer}>
                <View style={styles.BoxLeft}>
                       <H1>{item.title}</H1>
                       <H2 style={{flexWrap: 'wrap', textAlign: 'right',}}>{item.short_description}</H2>
                </View>
                <View style={styles.boxRight}>
                    <Image source={{uri: item.image}}  style={{width: 100, height: 100 }} />
                </View>
            </TouchableOpacity>


    )
     }

annd in the render of your component you can use it:

             <FlatList
                    data= {this.state.dataSource}
                    renderItem={this.renderItem} 
                    keyExtractor = { (item, index) => index.toString() }
                    style={{marginBottom:100}}

              />

How can I have a Dynamic Image uri that is not always defined in React Native?

2 Answers2