How can I move the component which is based on below flatList to the bottom of the screen?

Question

Everybody. I am going to make one screen (top: flatList, bottom: some component), but the component should be posited at the bottom of the screen. I tried several times like this, but I could not do that.

I tired: bottom component style:

   position: 'absolute',
   bottom: 0,
   padding: 20,

But not working for me and this component just hidden. I am not sure why this happened.

Please help me... Thanks

Answer 1

You can do something like this. The flatlist would be scrollable, you can place the view above or below based on your requirement.

//data=['aa','bb','cc']

 <View style={{ flex: 1 }}>
      <View style={{ backgroundColor: 'blue', height: 100, width: '100%' }} />
      <FlatList
        style={{ flexGrow: 0 }}
        renderItem={({ item }) => (
          <Text style={{ height: 100 }}>{item}</Text>
        )}
        data={data}
      />
      <View
        style={{
          backgroundColor: 'red',
          height: 100,
          width: '100%',
          marginTop: 'auto',
        }}
      />
    </View>

Explanation flexGrow: 0 will make sure that the flatlist will use only available space otherwise it will grow and take the full screen. marginTop: 'auto' will move the view to the bottom part this works for marginLeft and marginRight as well which can help when moving item to corners. So the view at the bottom would take height:100 and full width and move to the bottom and flatlist would take the rest.

Output will be like below