Search code examples
reactjsreact-native

Scroll View inside view not working react native

Here I am trying a simple code but the scroll view is not working if kept inside another view. Code is like this:

  return(
  <View>
    <Toolbar title={this.props.title}>
    </Toolbar>

    <ScrollView>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

      </ScrollView>

  </View>
 );

But if scroll view kept as parent view it works perfectly. Code is as below:

  return(
  <ScrollView>
    <Toolbar title={this.props.title}>
    </Toolbar>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

  </ScrollView>
 );

Now the problem is I don't want my toolbar to scroll up and down, I just want the contents below the toolbar to move. How can I achieve that?

And next question: Is scroll view has to be parent view to be returned to work?

Solution

  • Use the property flexGrow in the style, flex didnt worked for me.

     <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    ...
</ScrollView>