Why the OnPress components doesn’t work on a flat list with columns? Only works on the first column of components

Question

I've tried with Pressable and with the touchables, with onPress and onPressOut and the OnPress only activates in the elements that are in the first column like in the index 0,2,5,etc..

<FlatList
  scrollEnabled={false}
  data={photos}
  numColumns={3}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item, index}) => {
    return (
            <Pressable
              onPressOut={() => {
                console.log(index);
              }}
              onPress={() => console.log(index)}>
              <Image
                resizeMode="cover"
                source={{uri: item.image}}
                style={{
                  height: imageSize,
                  width: imageSize - 6,
                  margin: 3,
                }}
              />
              <ButtonIconSimple
                icon="video-outline"
                size={25}
                color={globalColors.WHITE}
                subStylesButton={{
                  position: 'absolute',
                  top: 5,
                  right: 5,
                }}
              />
              <ButtonIconSimple
                icon="star-outline"
                size={25}
                color={globalColors.WHITE}
                subStylesButton={{
                  position: 'absolute',
                  top: 5,
                  right: 30,
                }}
              />
            </Pressable>
        );
      }}
/>

Answer 1

try to add style={{flex: 1}} to Pressable container. If still error, try with TouchableOpacity.