Image component not updating when URI is changed. (Cached)

Viewed 320

Image before state URI change:

enter image description here

Image after state URI change:

enter image description here

Every time you change the Image component source {} prop, there is no change in the image displaying. I am also going to note that the changed uri is in fact ‘different’ from the previous. I have boiled this down to a cache problem on the emulator. I'm looking for the image to render again on state change, or use a completely different Image module as the one from react native seems to be useless.

import { Image } from "react-native";

async componentDidMount(){
    await this.getUserInformation();
}

async getUserInformation(){
    let tempObject = {}
    try {
      await AsyncStorage.getItem("@UserValues").then((userObject) => { tempObject = JSON.parse(userObject); })
      this.setState({image: tempObject.image})
    } catch(e) { this.refs.toast.show("We are having issues saving your information..."); }
  }

async createFile(result){
    .......
    fetch(......., requestOptions)
      ....
      .then(async(res) => {
        this.setState({image : imageURI})
        let tempObject = { image: imageURI }
        await AsyncStorage.mergeItem('@UserValues', JSON.stringify(tempObject));
      })
      .catch(error => console.log('error', error));
  }

 
render() {
    return (
      <View>
        <TouchableOpacity
           onPress={this._pickImage}>
           <Image
             source={{ uri:this.state.image }}
             style={styles.editProfilePicImage}>
           </Image>
       </TouchableOpacity>
      </View>
0 Answers
Related