CODEWITHSUNDEEP
firebasereact-nativerenderingreact-propsreact-native-elements
Stephen Phillips
Stephen Phillips

Reputation: 681

Updating firebase user picture not rendering new photo until reloading app

I am updating a user profile picture and am able to see the image changing in the database. I am storing the location of the image in profile picture. I am able to see the change happen when reloading the app and am able to see the image in firebase storage change instantly.

Here is the structure:

Here is the function I am using to change the image:

export const changeUserAvatar = (userId, imageUrl) => {
    firebaseService
      .database()
      .ref('users/' + userId)
      .update({
        profilePicture: imageUrl
      });
  };

And here is how I am rendering the image:

<Avatar size="xlarge" rounded source={{ uri: this.props.profilePicture }} onPress={this.openPicker}/> :

I am using redux to manage the state and would think it would automatically re-render with an updating value of profile picture. I have tried everything in here:

https://github.com/facebook/react-native/issues/9195

https://github.com/facebook/react-native/issues/12606

And when I try to add something like this I don't get an image at all and it shows up as a blank screen:

{{uri: profilePicture + '?' + new Date()}}

I am facing the same issue for when I navigate back to my messages list/ the picture only changes when I do a hard reload on the app.

Upvotes: 3

Views: 1482

Answers (1)

Stephen Phillips
Stephen Phillips

Reputation: 681

I finally got solution of this issue:

componentDidUpdate(prevProps) {
    if (this.props.photoUrl && prevProps.photoUrl !== this.props.photoUrl) {
        this.setState({ profilePicture: this.props.photoUrl })
    }
}

Basically, I just decided to store the new picture as a state instead.

Upvotes: 1

Related Questions