How do you use FlatList in react-native class component?

The FlatList component has a prop named as horizontal={} which support Boolean value True and False . The default value is False and if we define its value to True then it will make our FlatList horizontal with horizontal scrolling enabled.

For quick and simple solution Try:

The extraData prop is used to re-render the FlatList items dynamically . So what we are doing is that we make 2 Array in our tutorial and render the FlatList using first array object.

React Native FlatList Component

React Native FlatList Example

flatlist-simple By passing extraData={selectedId} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes.19 Oca 2022