Image does not render on FlatList in some android devices

Question

It does not render in some android like moto g4 and samsung a50 !! It renders perfectly in some Android devices and iOS. When users try to open the app the images is not rendered as supposed to.

React Native version:

System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 943.08 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 16, 23, 24, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3
      System Images: android-16 | Intel x86 Atom, android-16 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
      Android NDK: 16.0.4293906-beta1
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7
    react-native-progress-circle: 2.0.0

Steps To Reproduce (my code)

<View style={{flex:1,width:'100%',height:'100%'}}>     
  <View style={{flex:1, height:'100%',backgroundColor:'#fff', paddingBottom:0}}>
    <ScrollView removeClippedSubviews={true} style={{padding:10,flex:1}} refreshControl={(<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)}/>)}>
      <View style={{marginBottom:30}}>
        <Text style={{fontWeight:'bold',color:'#000',fontSize:24}}>{feed.title}</Text>
        <FlatList
          removeClippedSubviews={true} 
          style={{marginTop:10,flexDirection:'column'}}
          data={feed.content}
          horizontal={true}
          keyExtractor={(item,index) => index}
          renderItem={({item,index}) => {
            return (
              <TouchableOpacity style={{marginBottom:15,flexBasis: '100%',flex:1}} onPress={()=>{this.contentOnPress(item)}}>
                <View style={{alignItems: 'center',width:width,height:this.height*0.6,borderRadius:5}}>
                  <Image resizeMode={'cover'} style={{width:width, height:(this.height*0.6), borderRadius:5,borderWidth:1,borderColor:'#ccc'}} resizeMode={'cover'} source={(item.thumb ? {uri: item.thumb.replace('upload/','upload/q_auto,w_auto/')} : require('./../../assets/img/profile-pic.png'))}/>
                </View>
                <View>
                  <Text style={{fontWeight:'bold',color:'#000'}} numberOfLines={1}>{item.header}</Text>
                  <Text style={{color:'#000'}} numberOfLines={1}>{item.title}</Text>
                </View>
              </TouchableOpacity>
            )
        }} />
      </View>
    </ScrollView>
  </View>
</View>

Answer 1

Try using react-native-fast-image which will cache images and renders very fast.

Answer 2

there can be a lot of reasons.

1- can you try to delete "removeClippedSubviews={true}" prop.

2- maybe it's a performance problem. have you ever tried maxToRenderPerBatch prop of flatlist?

3- have you ever tried extraData prop of flatlist? you can use like this: extraData={this.state}