Search code examples
androidreact-nativescrollview

React native Scrollview doesn't work on android


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

Solution

  • 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.