ScrollView not showing everything and is cut off - react-native

Question

I need this screen to show all the contents that is inside the scrollview, I've tried everything setting ScrollView's flexGrow to 1, parent view's flex to 100. The scrollview is scrolling down until iteration of Bark Central Dog Park & Cafe but it is cut off to half and can't scroll any further, also I noticed that the text HELP ME can not be found too. Thank you so much, as this problem has been bothering me and my progress in react native.
Please tell me what I should do and where I have gone wrong. Thank you again!
NotificationScreen.js
export default class NotificationScreen extends Component
{
static navigationOptions = ({ navigation }) => {
const { state } = navigation;
const {} = state;
return {
header: null,
};
}
render() {
return (
<View style={styles.parentContainer}>
<View style={{flexDirection: 'row', marginLeft: '5%', marginTop: '5%'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('JobFeedScreen')}>
<Entypo name="chevron-thin-left" color={Colors.red} size={30} />
</TouchableOpacity>
<View style={{marginLeft: 80,}}>
<Text style={{ fontFamily: 'CoreSansD65Heavy',color: Colors.semiGray, fontSize: 25,}}> Ty, Next</Text>
</View>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('LaunchScreenStack')} style={{marginLeft: 87,marginRight: '5%',}}>
<SimpleLineIcons name='bubbles' color={Colors.red} size={30} />
</TouchableOpacity>
</View>
<View style={{marginLeft: '5%'}}>
<Text style={styles.notificationHeader}> Notifications</Text>
</View>
<ScrollView horizontal={false} overScrollMode={'auto'}>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Anteriore, Inc.</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>The Palace Manila</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Boozy.ph</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Pet warehouse PH</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Pet warehouse PH</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
</TouchableOpacity>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
</ScrollView>
</View>
);
}
NotificationScreenStyles.js
import { StyleSheet } from 'react-native'
import { Metrics, ApplicationStyles, Colors } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen,
container: {
paddingBottom: Metrics.baseMargin
},
logo: {
marginTop: Metrics.doubleSection,
height: Metrics.images.logo,
width: Metrics.images.logo,
resizeMode: 'contain'
},
centered: {
alignItems: 'center'
},
parentContainer: {
flex:1,
backgroundColor: Colors.white
},
notificationHeader: {
justifyContent: 'flex-start',
fontFamily: 'CoreSansD45Medium',
marginTop: 40,
marginBottom: 20,
fontSize: 20,
color: Colors.gray,
textAlign: 'left',
},
notifPlace: {
flexGrow: 0,
flexDirection: 'row',
backgroundColor: Colors.white,
width: '100%',
height: '12%',
borderWidth: 0.5,
borderColor: Colors.buttonGray,
},
notifTextPlace: {
width:60,
height:60,
borderRadius: 60/2,
backgroundColor:Colors.buttonGray ,
alignSelf: 'center',
justifyContent: 'flex-start',
marginLeft: '5%',
marginRight: 10,
marginBottom: 20,
marginTop: 20,
},
text: {
fontFamily: 'CoreSansD45Medium',
fontSize: 15,
alignSelf: 'center',
color: Colors.gray,
marginBottom: 10,
},
text2: {
alignSelf: 'center',
fontFamily: 'CoreSansD35Regular',
fontSize: 15,
marginBottom: 10,
},
})
Screenshot 1:
SC1
Screenshot 2: ( it only scrolls up to here )
SC2

Answer 1

This is a known issue in scroll view of react native, use a paddingBottom : 100 in the styles of the scroll view.
The 100 can be set to any value according the content you have

Answer 2

Please provide your StyleSheet and screenshot of what you are seeing.
Test to add
height = Dimensions.get('window').height
to your parentContainer
Also try paddingBottom to your scrollview StyleSheet

Answer 3

Just ran into this problem and what finally fixed it for me was making sure my scrollview wasn't the last component in my layout. So I added an invisible component (with a set height to offset the amount of scrollview content I couldn't see) right after my scrollview.

Answer 4

In my case, I have added a height to the wrapped component of the ScrollView.It worked for me
eg:-
<View style={{ height: hp(500) }}>
<ScrollView showsVerticalScrollIndicator={false}>
{filteredItems.map((item) => <Text style={styles.listItemText}>{item.title}</Text>)}
</ScrollView>
</View>

Answer 5

What fixed it for me was adding contentContainerStyle={{flexGrow: 1,paddingRight:100}} to my scrollview.
Hope it helps someone too!!

Answer 6

just add like this :
<ScrollView contentContainerStyle={{ width:'100%',height:'500%'}}>