CODEWITHSUNDEEP
react-nativereact-navigationflatlistbottomtabs
yechu
yechu

Reputation: 35

how to add margin or space without disturbing bottom tabs on react native?

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

Upvotes: 0

Views: 3569

Answers (1)

Jignesh Mayani
Jignesh Mayani

Reputation: 7213

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
    }}
/>

Upvotes: 3

Related Questions