react-nativereact-navigationflatlistbottomtabs

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

Solution

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