How to solve 'Tried to get frame for out of range index NaN' - React native flatlist?

Question

here below is the code which was used, on open this page then it appears that 'Tried to get frame for out of range index NaN'.

I don't understand where I got the issues. Please help.

import {FlatList} from 'react-native-gesture-handler';
import {SIZES, constants} from '../../constants';
const [row1Images, setRow1Images] = React.useState({
    ...constants.walkthrough_01_01_images,
    ...constants.walkthrough_01_01_images
  })

const row1FlatListRef = React.useRef()

<FlatList
   ref={row1FlatListRef}
   decelerationRate="fast"
   horizontal
   showsHorizontalScrollIndicator={false}
   listKey="Slider1"
   keyExtractor={(_, index) => `Slider1_${index}`}
   data={row1Images}
   renderItem={({item, index}) => {
     return (
       <View style={{width: ITEM_WIDTH,alignItems: "center",justifyContent: "center"}}>
         <Image source={item} style={{width: 110,height: 110}} />
       </View>
     )
   }}
/>

Answer 1

You were set row1Images as an object instead of array. data props passed to FlatList should be an array.

Set row1Images like this

const [row1Images, setRow1Images] = React.useState([
    ...constants.walkthrough_01_01_images,
    ...constants.walkthrough_01_01_images
  ])