0

I am using react navigation bottom tabs and I customized them. one problem I have is that, I have a flatlist which is hidden the edge of the list because of the bottom tabs. I tried to add margin bottom but, since I have rounded tabs it blocks rounded tabs.. when I add margin bottom it goes like this

(flat list has flex:1 by the way)

what should I do ?

current situation.. I want my list to show fully

yechu
  • 25
  • 5

1 Answers1

1

Simply add marginBottom in your FlatList's containerStyle prop to manage the margin as per your requirement.

For Ex.

<FlatList
    data={data}
    renderItem={renderItemHandler}
    style={{
      flex: 1
    }}
    contentContainerStyle={{
      marginBottom: 20
    }}
/>
Jignesh Mayani
  • 6,937
  • 1
  • 20
  • 36
  • I don't know why marginBottom really doesn't work with my case but I added paddingBottom and it works thanks!!!! – yechu Feb 04 '22 at 08:17
  • Actually, the marginBottom adds margin outside the flat list at the end when the paddingBottom adds padding inside the flat list at the end of the list. Great!!, As it worked for you. – Jignesh Mayani Feb 04 '22 at 08:19