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

FlatList's Horizontal Not work well - React Native?

$
0
0

I have in the home screen 4 FlatList and it's work very well,

I render items as cards "Image, Name", I render items horizontally, it's work fine, but when I swipe to right/left I see some wired things like they get me back to the first item or render item previous another item "Some lag",

I don't know why! But when I delete horizontal it works very well without any issues!

Does any Body have an explanation for this issue?

By The Way, I got Data from API, And it's large :)

Sample Code

class Home extends PureComponent {
.....
  render() {
  <View style={styles.container}>
    <ScrollView>
    <View style={{marginVertical: 10}}>
     <FlatList
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            data={data.recent_tracks}
            contentContainerStyle={{flexGrow: 1}}
            ListEmptyComponent={<EmptyList />}
            keyExtractor={(track, index) => track.id.toString()}
            initialNumToRender={10}
            renderItem={this._renderItem}
    />
   </View>
  </ScrollView>
 </View>
....
  }
}

I Got this in Log, Although I use PureComponent and react-native-fast-image For Images

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {dt: 1393, prevDt: 2471, contentLength: 3669.818115234375}


Viewing all articles
Browse latest Browse all 29594

Trending Articles



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