React-Native, Scroll View Not Scrolling

Question

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

return(
    
         TEST 
        

        

Answer 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>
);

Answer 2

As @Evan Siroky has answered above it's working well I'm just adding on thing for a auto height in case you don't want to reserve the space

render () {
  const screenHeight = Dimensions.get('window').height
  return(
    <View style={{ Height: "auto", maxHeight: screenHeight}}>
      <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
           ...    
      </ScrollView>
    </View>
  )
}

Answer 3

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>
  )
}

Answer 4

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>

Answer 5

Try next code:

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

Answer 6

I think the best way of doing this is to put all requires inside an array and map this array.

const images = [
  require('../your/path/here'),
  require('../other/image/here'),
  ...
];

return ( {images.map((image) => <Image ... source={image} />)

note that if you want it as a background image with other elements above the image, you may use BackgroundImage and either render elements for each image or position absolute the image map and zIndex it behind all things