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

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.

2 Answers

Answers 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

Answers 2

By removing flex: 1, you are seeing only the exact height for the Views.

  <ScrollView contentContainerStyle={{ backgroundColor: '#00ff00',        flexDirection: 'column', justifyContent: 'space-between' }}>     <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />     <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />     <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />   </ScrollView> 

If you set flex: 1 or flexGrow: 1, ScrollView will set the min height to the height of the screen.

  <ScrollView contentContainerStyle={{ flex: 1, backgroundColor: '#00ff00',        flexDirection: 'column', justifyContent: 'space-between' }}>     <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />     <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />     <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />   </ScrollView> 

If the cumulative height of the Views is greater than this, the overall view will extend beyond the height of the screen. In this case, flexGrow: 1 (shown partially scrolled below), will let you scroll to the content, but flex: 1 will cut it off.

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00',        flexDirection: 'column', justifyContent: 'space-between'}}>     <View style={{ width: 100, height: 700, backgroundColor:'#b0e0e6' }} />     <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />     <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />   </ScrollView> 

From there, you can set flex on each of the Views to weight how the blank space will be filled by the Views. For example, if you set flex: 1 on each of the top two Views, and flex: 2 on the bottom View, then after accounting for the content height, the bottom view will be given 1/2 of the overall height to 1/4 for each of the top two Views. Like this:

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00',        flexDirection: 'column', justifyContent: 'space-between'}}>     <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#b0e0e6' }} />     <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#87ceeb'}} />     <View style={{ flex: 2, width: 100, height: 100, backgroundColor:'#4682b4'}} />   </ScrollView> 

ScrollView documentation: https://facebook.github.io/react-native/docs/scrollview.html

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati