How to make component stick to bottom in ScrollView but still alow other content to push it down

Question

I have three views: one at the top, middle and bottom. The scroll view takes the whole screen. The problem is that now scroll view is not scrollable.

<ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}>   <View><SomeContent /></View>   <View><SomeContent /></View>   <View><SomeContent /></View> </ScrollView> 

If I remove flex: 1 scroll view takes about 50% of the screen. How do I make a scroll view with top, middle and bottom elements like on the image bellow.

The bottom element should be at the bottom all the time but when the top two components' height is large they should push the bottom component down so I can use scroll view to move up/down.

Answer 1

Use flexGrow instead of flex. Example code is given bellow.

<ScrollView    contentContainerStyle={{    flexGrow: 1,    flexDirection: 'column',    justifyContent: 'space-between' }}>   <View style={{ width: 50, height: 1000, backgroundColor:'orange' }} />   <View style={{ width: 50, height: 50, backgroundColor:'black'}} />   <View style={{ width: 50, height: 50, backgroundColor:'blue'}} /> </ScrollView> 

Here is the screenshot