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

flexbox, react-native

Solution

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

Problem

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.

Original source