ScrollView will not scroll to the bottom of the contact List - react-native

Question

Im creating a contact list.
To do that I have put the contact data into a scroll view.
When the user typed a letter to the search contact and tried to go to the last contact in the list, it won't be shown( it will show a little and it will bounce back up.)
return (
<SafeAreaView>
<ScrollView style={{flexGrow: 1}} bounces={false} >
<View style={{ flex: 1, flexDirection: 'row', borderTopWidth: 0.5, borderTopColor: 'grey'}}>
<View style={{ flex: 1 }}>
<Text onPress={() => setChecked(true)} style={{ fontSize: 20, marginHorizontal: 10 }}>
{item.name + ' '}
</Text>
<Text style={{ fontSize: 17, marginHorizontal: 10, marginTop: 5, color: 'grey' }}>
{item.phoneNumbers && item.phoneNumbers[0] && phone && item.phoneNumbers[0].digits}
</Text>
</View>
<TouchableOpacity
onPress={() => {
onChangeValue(item);
}}
>
<CheckBox
style={{ width: 15, height: 15, paddingTop: 8 }}
right={true}
checked={!!selectedContacts[phoneNumber]}
onPress={() => {
onChangeValue({ item });
}}
/>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
);
I did some research and they said to use flexGrow 1 on the scrollView or to make a parent view with flex 1 but none of that was a solution.
How can I show the user the bottom contacts when the user scrolls to the bottom?

Answer 1

please use flex:1 in the scrollView like this.
<View style={{flexDirection: 'column', flex: 1, width: wp(100)}}>
<WaterfallList
data={FinalArray}
bounces={false}
onMomentumScrollBegin={onScrollStart}
onMomentumScrollEnd={onScrollEnd}
heightForItem={item => Dimensions.get('screen').width * 0.6}
numColumns={2}
allLoaded={true}
onLoading={() => console.log('dsd')}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
contentStyle={{flexGrow: 1}}
style={{
flex: 1,
paddingHorizontal: Dimensions.get('screen').width * 0.03,
backgroundColor: 'transparent',
}}
renderItem={ContactItemServer}
/>
</View>