Using react native use flatlist to create a grid of videos not working

Question

I'm trying to create a three column grid to display videos using react native Flatlist (using an ios simulator), but the videos are getting spaced out really weird.

Here's the code:

    <View>
      <FlatList
        columnWrapperStyle={{justifyContent:'space-between'}}
        data={videos}
        style={{marginTop: 2, marginStart: 2}}
        renderItem={({item}) =>
          <View style={{flex: 0.5}}>
            <TouchableOpacity
              onPress={() => console.log('Pressed Profile Grid Image')}>
              <Video source={{uri: item}} style={{
                height: 150,
                // flex: 1,
                marginEnd: 2,
                marginBottom: 2,
                // alignItems: 'center',
              }}/>
            </TouchableOpacity>
          </View>
        }
        numColumns={3}
        indicatorStyle={'white'}
        showsVerticalScrollIndicator={true}
      />
    </View>

And this is what I'm getting:

picture of video flatlist on ios device

Any ideas why?

question from:https://stackoverflow.com/questions/65893966/using-react-native-use-flatlist-to-create-a-grid-of-videos-not-working

Answer 1

Waitting for answers