How to solve 'Tried to get frame for out of range index NaN'

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>
     )
   }}
/>

CodePudding user response：

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
  ])