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

Re your [just-deleted answer](https://stackoverflow.com/a/75236420/157247): You seemed to think I was the person asking the question. I wasn't. I was just pointing out that the answer, as posted, didn't work. It would be a good answer if you got it working, and probably would be helpful to the person who did post that question. While posting things that don't work isn't useful, posting things that do absolutely would be! :-) — T.J. Crowder, Jan 25 '23 at 16:17

Guruparan Giritharan · Accepted Answer · 2020-08-05T09:59:25.507

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

Great!!! Thank you very much. But I am not sure that if we can use the `contentContainerStyle` in View component. I replaced it with `style` and it works well. — goldvenus, Aug 05 '20 at 09:49
Thank you :) If possible, Could you please describe what was wrong and how does it works well? — goldvenus, Aug 05 '20 at 09:53

score 0 · Answer 2 · answered Aug 05 '20 at 09:26

0

Do you mean something like that?

<View style={{ flex: 1 }}>
   <FlatList 
      style={{ flex: 1, .... }}
      ...
   />
   <SomeComponent style={{height:80, width:'100%'}}>
      ...
   </SomeComponent>
</View>

answered Aug 05 '20 at 09:26

D10S

1,468
2
7
13

SomeComponent moved to the bottom of the screen but FlatList is cut because of bottom component. – goldvenus Aug 05 '20 at 09:35
Exactly, I want to match with the bottom of flatList and top of someComponent. What do you think about that? Thanks @D10S – goldvenus Aug 05 '20 at 09:37
What do you mean "cut"? it is scrollable – D10S Aug 05 '20 at 09:38
Some items of FlatList component hidden by the bottom component. – goldvenus Aug 05 '20 at 09:40

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

2 Answers2