title: React Native Flatlist image component flickers when data for the flatlist is resorted
body: <p>I am actually trying to design a chat application, where i rendered all the chats using a flat lists and i have ordered the chats according to their recent message time in descending order, when the order of chat messages changes, the image in chat component gets flickered. Please suggest me a way to prevent this flickering ,in whatsapp and telegram flickering doesn't happen i want to have the smooth ui experience on my chat app also.</p>
  <p>I used React Native for the front end.</p>
  <p>Here is the Flat list code..</p>
  <pre><code> &lt;FlatList
          data={state.connections}
          refreshing={state.loading}
          onRefresh={fetchLatestData}
          ListHeaderComponent={&lt;Searchbar
              key=&quot;editor&quot;
              placeholder=&quot;Search me...&quot;
              value={state.searchValue}
              style={{ margin: 15, marginTop: 0 }}
              onChangeText={(value) =&gt; { fetchConnections(value) }}
          /&gt;}
          ListHeaderComponentStyle={{ width: width * 1 }}
          renderItem={({ item }) =&gt; {
  
              let doc_id = getDocId(item.uid, state.userData.uid)
  
              return &lt;ChatCardComponent key={item.uid} data={item} navigation={navigation} userData={state.userData} latestMessageData={state.chattedFriends.get(doc_id)} /&gt;
          }}
          keyExtractor={(item, id) =&gt; item.uid}
  
      /&gt;
  </code></pre>
  <p>ChatCardComponentCode is,</p>
  <p>I have used react-native-expo-cached-image for Image component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const uri = data.photoUrl;
  
      return (
          &lt;View style={styles.container}&gt;
  
              &lt;TouchableOpacity key={data.uid} onPress={() =&gt; { props.navigation.navigate('chatWindow', { data: data, userData: userData }) }}&gt;
                  &lt;View style={styles.chatContainer}&gt;
  
                   
                      &lt;CachedImage
                          style={{ width: 80, height: 80, borderRadius: 60 }}
                          source={{ uri: uri }}
                      /&gt;
                      &lt;/View&gt;
                &lt;/TouchableOpacity&gt;
                &lt;/View&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please suggest me fix for this issue.</p>