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

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”,

[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.

[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