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