CODEWITHSUNDEEP
reactjsreact-nativescrollviewreact-native-flatlist
Ajeng
Ajeng

Reputation: 37

React Native remove bottom space in Flatlist

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

Upvotes: 2

Views: 3448

Answers (2)

Pankaj Kotwani
Pankaj Kotwani

Reputation: 109

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>

Upvotes: 9

Khyati Modi
Khyati Modi

Reputation: 708

Either remove flex:1 from parent View or give appropriate flex to all subView.

Upvotes: 2

Related Questions