How to avoid flickering when Avatar re-render again and again.

[Biplovkumar]

Explain what you did

Expected behavior

not show to user that, avatar re-render again and again.

Describe the bug

To Reproduce

               <Avatar
                      rounded
                      size={height/6}
                      defaultSource ={DummyUser}
                      source ={profileimageTutor ? {uri:profileimage} : DummyUser} 
                      defaultSource ={profileimageTutor ? {uri:profileimage} : DummyUser} 
                      icon={{name: 'user', type:'antdesign'}}
                      containerStyle={{borderWidth:3, borderColor:Colors.Grey89, elevation:2}}
                      resizeMethod="scale"
                      resizeMode="cover"
                  />

Screenshots

1. 
2. 

Your Environment (please complete the following information):

| software | version |
yarn install v1.16.0
| --------------------- | ------- |
"react-native-elements": "^1.2.7",
"react": "16.9.0",
"react-native": "0.59.9",

[xavier-villelegier]

Hey @Biplovkumar

The Avatar is basically just a wrapper around the Image component, the flickering is mostly caused by Image, the Avatar doesn't have any state refreshment that may cause this issue.

I found this comment facebook/react-native#981 (comment) about how to fix this flickering on the Image component. The Avatar has an imageProps props that allows you to pass props directly to the Image.

[Biplovkumar]

Hey @xavier-villelegier
Thanks for replying.
I had already tried this code from this issue.
But still it is flickering after set state.
It happening only in Avatar not in image components.

[Biplovkumar]

Any update on Avatar issues.
It is still fluctuating after set state.

[ozerty]

Hi, I got the same issue here. Any update guys ?
For me, the uri prop is set with a base64 string.

[raRaRa]

Same issue here, only happens on iOS for me. I'm going to try to put the component into its own component wrapped with React.memo to see if that helps, since this seems to be related to when the component re-renders due to state changes.

[raRaRa]

I can confirm that wrapping the component with React.memo solved the issue for me, since the component will be cached and not re-rendered unless the image changes.

[Cchumi]

Hi same issue here how do you use React.memo ?

[raRaRa]

If you have a functional component then you can export it like this:

const FunctionalComponent= () => {
    return (<h1>Hello world</h1>)
}

export default React.memo(FunctionalComponent)

This will only cause the component to re-render if any of the props have changed.

If you use class component then you can extend it from PureComponent instead of Component:

class ClassComponent extends React.PureComponent {

PureComponent will work like React.memo

[raRaRa]

The permanent fix would probably be to do this internally in the Avatar component, to avoid unnecessary re-renders. Or fix whatever is causing it to flicker with each re-render. Very likely some componentDidUpdate or componentWillUpdate issue inside Avatar.

[xavier-villelegier]

@Biplovkumar @raRaRa @Cchumi Could you guys reproduce this issue with a really simple example on https://snack.expo.io/ ? With a simple component update its state and the Avatar flickering ? I couldn't reproduce this locally

[Cchumi]

I am unable to reproduce this behavior on codesandbox.... Other strange thing for me is :
If I use this url : https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg as avatar source I have no flickering but if I use my url: https://firebasestorage.googleapis.com/v0/b/oq70-objectifquebec.appspot.com/o/users%2F0YlNi3Vn2BOqvWOVepxNyYfmjYr1%2Fprofile_pic.jpg?alt=media&token=f9072f83-55c9-4c5d-8392-77744c779171
It flicker as before...

Also I pass my component to PureComponent but it does not solve the issue.

[raRaRa]

@Cchumi Then your component is re-rendering for some reason, e.g. if a prop has changed.

[Cchumi]

just make a simple snack:
This is a simple snack with the behavior.
https://snack.expo.io/@cchumi/avatar-flicker

[Cchumi]

@xavier-villelegier find out what causing this on ios only. React native on ios only has a cache property. In avatar component it's like it is set to reload.

[xavier-villelegier]

@ozerty Oh okay I see ! If you manage to fix this by changing something in the Avatar feel free to let us know / submit a PR !

[ozerty]

@xavier-villelegier I think your message was destinated to @Cchumi
Thanks guys

[ozerty]

Just to let you know, I fixed this issue by doing memoization on my avatar component.

[Cchumi]

@xavier-villelegier I try but cannot get a fix... cache settings is not a good idea.

[rob5408]

@ozerty Mind sharing your memoization approach? I tried that a while ago and it didn't fix the flickering. But I probably did something dumb. (Or is the same as @raRaRa?)

Update: I tried @raRaRa's approach and it worked a charm. No idea what I did wrong earlier.

[ozerty]

@rob5408 Using React functional component :

const myAvatar = useMemo(() => { return ( <Avatar ...props /> ); }, [...]);

And then in my render :

<View>{myAvatar}</View>

Hope it will help some of you.

[Biplovkumar]

It's not the solution.
Plz fix it in next release.
It should never be flicker.
It's a big bug of Avatar.
I love react native elements so I am waiting for fix in next release.

[ozerty]

@Biplovkumar I agree.

[xavier-villelegier]

Hey guys @Biplovkumar @ozerty @Cchumi

Could you please use the branch issue-2233-fix-avatar-flicker and tell me if it's fixed ?

You can test by adding this to your package.json

"react-native-elements": "https://github.com/react-native-elements/react-native-elements#issue-2233-fix-avatar-flicker",

It works for me

[ozerty]

@xavier-villelegier Good job ! It's fixed for me too.
Thanks

[Biplovkumar]

@xavier-villelegier Nice.
it's working.
I hope it should be the same in the next release.

[Cchumi]

Works for me too but it breaks the input component on input field. It just don’t show my inputcomponent. When I reverted back to latest 1.2.7 everything works

[xavier-villelegier]

@Cchumi We changed to InputComponent with a capital in the next release to follow React/React Native guidelines (component props should be capitalized)

[Cchumi]

@xavier-villelegier Thanks for your answer :). I didn't see that

[tkoolreact]

I got far less flickering using (issue-2233-fix-avatar-flicker), mostly gone, but then it seemed to break the width and height property of the Overlay component. These props were then not being honored (or couldn't be set). Reverted back to 1.2.7. Hopefully will be fixed in the next update.

[ugrdursun]

Hey guys @Biplovkumar @ozerty @Cchumi

Could you please use the branch issue-2233-fix-avatar-flicker and tell me if it's fixed ?

You can test by adding this to your package.json

"react-native-elements": "https://github.com/react-native-elements/react-native-elements#issue-2233-fix-avatar-flicker",

It works for me

Hey guys @Biplovkumar @ozerty @Cchumi

Could you please use the branch issue-2233-fix-avatar-flicker and tell me if it's fixed ?

You can test by adding this to your package.json

"react-native-elements": "https://github.com/react-native-elements/react-native-elements#issue-2233-fix-avatar-flicker",

It works for me

this did not work on me still same, should i clear some cache or something ? or install that package to react-native-elements directory ? what did i do wrong ?

[flyingcircle]

Will be released in 2.0.1

[lambdadev007]

I know the answer is late, but posting my answer here in case someone still want to find a solution and because I've found this drives some traffic. A simple workaround is to add a css transition property to the image like the below:

transition: all 2s;

it does not prevent the image re-rendering, but at least it does prevent image flickering.

[olegderecha]

Tried to resolve the issue, but found that react-native-elements version was too old 2.0.0, updated to 3.4.2, and now it works much better!

[amitmehtacode]

<Image source={isAndroid ? require('avatar.png') : null} style={styles.imageStyle} resizeMode='cover' resizeMethod="scale" defaultSource={isAndroid ? null : require('avatar.png')} />

[learncodingforweb]

I am also facing flicker image of base64 data from websocket. Can someone help me

[Suzan-Dev]

using ignoreFallback prop worked for me