React Native remove bottom space in Flatlist

Question

I don't understand why my FlatList contain a space in the bottom like this: that's the space

Can anyone help me to remove the space? I have tried so many ways, but none of them are working. I also tried using ScrollView but the same problem occur. Here's my source code:

  <View
    style={{
      flex: 1,
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <FlatList
      data={eventCategories}
      initialNumToRender={5}
      keyExtractor={item => item.id_event_category}
      showsHorizontalScrollIndicator={false}
      horizontal
      renderItem={renderCategories}
    />
    <View>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
    </View>
    <View style={styles.button}>
      <SmallButton
        title="Urutkan"
        icon="sort-active"
        onPress={() => setVisibleSort(true)}
      />
    </View>
  </View>

asa

Answer 1

Didn't know why this issue occurs but temporary solution is wrap your FlatList with one different view with no style and main container should remain as same as it is.

<MainContainer>
    <View>
       <FlaList/>
    </View>
</MainContainer>