react-native: Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components

I have a ScrollView with 2 subviews and I want the first of them (lets call it ViewA) to have {flex: 1} so the other one (ViewB) will stick to the bottom of the screen - but only if their total height is smaller that the screen. Of course that if they are higher than the screen I want it to scroll as usual.

So I set the ScrollView’s style AND contentContainerStyle to be flex: 1. I Also set ViewA’s style to flex:1. But when I do it, the ScrollView’s contentContainer view is fixed to the screen height, thus not able to scroll if needed and even worse - ViewB overlaps ViewA.

If it’s a bug - how to fix it? If it’s the expected behaviour - how can I achieve what I’ve described?

here’s a little demonstration: https://rnplay.org/apps/wZgtWA Note that even without ViewB, once you set flex:1 on contentContainerStyle you can’t scroll the page.

Thanks.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 17
Comments: 34 (6 by maintainers)

Most upvoted comments

use flexGrow: 1 instead of flex: 1 – works like minheight, much like what you want.

+188

tushar-singh on Jun 10, 2017

Try deleting flex: 1 in contentContainerStyle?

+45

skyfarliu on Feb 13, 2016

Solution as discussed above: < ScrollView contentContainerStyle={{ flexGrow: 1 }} > < View style={{ flex: 1 }} > … < /View > < /ScrollView >

+13

pallavbakshi on Dec 18, 2017

Closing this since the original issue is the expected behaviour. Please file a feature request on Product Pains if you want minHeight.

+12

satya164 on Jul 5, 2016

@ravirajn22 Also, on browsers, when you set only flex-grow: 1, you actually get flex-grow:1, flex-shrink:1, flex-basis:auto, since default value of flex-shrink is 1 and default value of flex-basis is auto In React Native, when you set only flexGrow: 1, you actually get flexGrow:1, flexShrink:0 and flexBasis:‘auto’, since the default value of flexShrink seems to be 0

luqiuyuan on Oct 7, 2017

I had the similar problem and I solved it using Dimensions and onLayout property as following at least on Android, if there is a better or easier solution please let me know:

   onLayout(e) {
    const {nativeEvent: {layout: {height}}} = e;
    this.height = height;
    this.forceUpdate();
  }

render() {
    const {height: heightOfDeviceScreen} = Dimensions.get('window');
    return (
      <ScrollView contentContainerStyle={{minHeight: this.height || heightOfDeviceScreen}}
                  onLayout={this.onLayout.bind(this)}>
          <View><Text>header</Text></View>
          <View style{{flex: 1}}><Text>body</Text></View>
          <View><Text>footer</Text></View>
      </ScrollView>

Thanks

cubbuk on Mar 19, 2017

UseflexGrow:1its works for me…

ahmedraza11 on Dec 28, 2017

@Chathula I have found solution here

Sorcer23 on Dec 11, 2017

Hello guys, I have a problem with ScrollView. I have used ScrollView which wrapped a TabNavigator (react-navigation). But when I did that, the content of each tab is hidden. I have tried to set “flexGrow: 1”, also “flex: 1” inside contentContainerStyle of ScrollView, the content of tag is showed, but ScrollView is not working. So if those content is long, I cannot see full of content. Does anyone has the same problem like me? I need help!

dungle1811 on Sep 9, 2017

@satya164 as of RN 0.29.0 minHeight is supported. Just wanted to update everyone following this that setting minHeight as a style of the inner container seems to work. You can set the height to the device’s height using Dimensions.

For reference: https://github.com/facebook/react-native/commit/78b892906b00932447e86465bec4613c118f01fc

joelcloralt on Jul 9, 2016

@dungle1811 I am facing the same issue. Please provide any solution for this

sami718 on Feb 6, 2018

@sarahmarciano You are welcome but why ?

tanguyantoine on Jun 12, 2017

@rendomnet this is working for me: <ScrollView horizontal={true} style={{ flex: 1, flexGrow: 1 }} contentContainerStyle={{ flex: 1 }}> without the contentContainerStyle does not work for me

hielfx on Jun 5, 2018

flexGrow: 1 is not working anymore?

rendomnet on May 8, 2018