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}>
    <View style={{marginVertical: 10}}>
            contentContainerStyle={{flexGrow: 1}}
            ListEmptyComponent={<EmptyList />}
            keyExtractor={(track, index) =>}

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) {
    this.state = {
      recent_tracks: recent_tracks

  render() {
    return (
        renderItem={({ item: rowData }) => {
          return (
              image={{ uri: "" }}
              containerStyle={{ padding: 0, width: 160 }}
              <Text style={{ marginBottom: 10 }}>
        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 *