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

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>
);
}

Answer 1

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
)

Answer 2

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}}
/>