FlatList can't scroll horizontally-CodePudding

I'm trying to scroll horizontal but Its never move to the second or third item. When I'm dragging left I cant see part of the second elements.

export const Flat: React.FC = () => {

const aaa = [{}, {}, {}]

const renderItem = ({item, index}: any) => {

if(index  === 0){
  return <View style={{width:"100%", backgroundColor: "green"}}>
    <Text> asdasad </Text>
  </View>
}
else if(index  === 1){
  return <View style={{width: "100%", backgroundColor: "red"}}>
      <Text> asdasad </Text>
  </View>
}
return <View style={{width: "100%", backgroundColor: "blue"}}>
  <Text> asdasad </Text>
</View>

}

  return <View style={{flex: 1}}>
     <FlatList style={{flex: 1}}
               contentContainerStyle={{ flex: 1}}
              horizontal={true}
              data={aaa}
              renderItem={renderItem}
              keyExtractor={(item, index) => index.toString()}
              pagingEnabled={true}
             // bounces={false}
    />
  </View>
}

CodePudding user response：

Here is - https://snack.expo.dev/RNeBkS7Rk , I just added <ScrollView horizontal> and change yours styles : width:"100%" to width:300