Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29452

Image does not render on FlatList in some android devices

$
0
0

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>

Viewing all articles
Browse latest Browse all 29452

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>