React native Scrollview doesn't work on android-CodePudding

I try to do a scrollview but it doesn't work. I tried flex: 1, flexGrow:1, add flex:1 to outer views, add contentContainerStyle={{ minHeight: '100%', }}> , but i couldn't make it work. I am new in react native and I don't know how to do except for reading docs and online answers. Why is this happening??

here is the code:

<SafeAreaView style={styles.container}>
     
     
      <View style={{flex: 1}}>
        <ScrollView
          showsVerticalScrollIndicator={true}
          contentContainerStyle={{
            minHeight: '100%',
          }}>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: darkBrown, fontSize: 30}}>TEXT</Text>
          <Text style={{color: 'red', fontSize: 30}}>TEXT</Text>
           
        </ScrollView>
      </View>
    </SafeAreaView>

style for container

 container: {
    flex: 1,
    height: '100%',
    width: '100%',
    backgroundColor: lightestBeige,
  },

CodePudding user response：

SafeAreaView might be the problem here. Try to change it with normal View

CodePudding user response：

You didn't need height: '100%' and width: "100%" under container style.

Remove the view tag on the code.

Under contentContainerStyle replace minHeight: '100%' with flexGrow: 1

I hope it resolves.

CodePudding user response：

Change <Text style={{color:"green"}}> and in container style object backgroundColor:"lightestBeige" ... Add some more Text tags when they will go out of screen then scroll starts working as of know there no need to scroll. And for rendering more data use Flatlist do read about it.