javascript – FlatList's Horizontal Not work well – React Native?-ThrowExceptions

Exception or error:

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}

How to solve:

try this example anf let it work

  import React, { Component } from "react";
import { FlatList, Text } from "react-native";
import { Card } from "react-native-elements";

const recent_tracks= [

];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recent_tracks: recent_tracks
    };
  }

  render() {
    return (
      <FlatList
        data={this.state.recent_tracks}
        renderItem={({ item: rowData }) => {
          return (
            <Card
              title={null}
              image={{ uri: "http://via.placeholder.com/160x160" }}
              containerStyle={{ padding: 0, width: 160 }}
            >
              <Text style={{ marginBottom: 10 }}>
                hello
              </Text>
            </Card>
          );
        }}
        keyExtractor={(item, index) => index}
      />
    );
  }
}

try this answer

feel free for Doubts , Hope it helps

Leave a Reply

Your email address will not be published. Required fields are marked *