Scroll View inside view not working react native

Question

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?

Answer 1

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

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

Answer 2

you should wrap toolbar in view like this:

<View><Toolbar/></View>

Wrap those component which you want to scroll inside scrollview as:

<ScrollView>your expected components...</ScrollView>

And provide flex to root view as:

<View style={{flex:1}}>

Finally your code will run as you expected.

Answer 3

Top <View> must has style flex:1, and also <ScrollView> has too