React-Native, Scroll View Not Scrolling

When I wrap content like this example below, it scrolls Perfectly..

return(
    <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        ...
    </ScrollView>
);

However, whenever I wrap it in another View, It will not scroll.

return(
    <View>
        <ScrollView>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            ...    
        </SCrollView>
    </View>
);

Is there some sort of fix to this. I am trying to put a nav bar header above all of the content, couldn't really figure it out though.

Solution 1:

It's a typo:
Your closing ScrollView tag is: </SCrollView> rather than </ScrollView>. You also need to add a style to the View container, here's an example of what it should look like:

return(
  <View style={{flex: 1}}>
    <ScrollView>
      <Text> TEST </Text>
      <Text> TEST </Text>
      <Text> TEST </Text>
      <Text> TEST </Text>
      ...    
    </ScrollView>
  </View>
);

Solution 2:

Try next code:

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
</ScrollView>

Solution 3:

Try adding style={{flex:1}} to <View> and <ScrollView> components. You also have a typo on your code: </SCrollView> in line 9. An example code will look like this:

<View style={{backgroundColor:'white', flex:1}}>
    <NavigationBar title="Title" />
    <ScrollView style={{flex:1, backgroundColor:'white'}}>
            <View style={{flex:1,justifyContent:'center'}}>
                <RegisterForm />
            </View>
    </ScrollView>
</View>

Solution 4:

Another solution is to add a height property to the parent View container. This sometimes works well when calculating the height against the screen height.

render () {
  const screenHeight = Dimensions.get('window').height

  return(
    <View style={{height: screenHeight}}>
      <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
           ...    
      </ScrollView>
    </View>
  )
}

Solution 5:

If your ScrollView is within something that handles touch (Pressable, TouchableWithoutFeedback etc) then you either need to stop the touch event propagating up to that parent handler or else the ScrollView won't handle the touch event and therefore won't scroll.

This can be done either with onStartShouldSetResponder={() => true} or by wrapping the children in an element which itself handles the touch event (e.g. Pressable):

return (
  <ScrollView>
    <Pressable>
      <Text>This is scrollable</Text>
    <Pressable>
    <Pressable>
      <Text>As is this</Text>
    <Pressable>
  </ScrollView>
);