FlatList does not scroll down to the end - react-native

Question

I have a flatlist in my react native code. It does not scroll all the way down. I want to scroll it down till the end, but when I tried scrolling it down, it came back up again. Below is my entire code with style sheets:
FlatListItemSeparator = () => {
return (
<View
style={{
height: .9,
width: "100%",
backgroundColor: "#607D8B",
}}
/>
);
}
_renderItem = ({item, index}) => {
var destUrl = 'https://www.google.com/maps/dir/Current+Location/' + item.addr;
var geodist = require('geodist')
var dist = geodist({lat: item.cLat, lon:item.cLong}, {lat: item.LatL, lon: item.Long2}, 'mi')
var imagevar = item.image;
if (isNaN(dist)) {
dist = 0;
}
return(
<View style={{ backgroundColor: index %2 ===0? '#DDBC95':'#EBDCB2'}} >
<View style={{ flexDirection: 'row', alignItems:'center' }}>
<Image source={Icons[imagevar]} style = {styles.imageView}/>
<View style={{ flex: 1, alignItems: "center"}}>
<Text style={styles.Address1}>{item.addr} </Text>
<View style={styles.phoneImg}>
<TouchableOpacity
onPress={() => { this.handleClick(`tel:${item.phone}`)}}>
<Image source={require('../images/Phone.png')} style={styles.actionImage}/>
</TouchableOpacity>
<Text style={styles.Address1}>{item.phone}</Text>
</View>
<View style={styles.AddressRow}>
{
item.Online != ''? <TouchableOpacity onPress={() => Linking.openURL( item.Online )}>
<Image source={require('../images/www-icon.png')} style={styles.actionImage1}/>
</TouchableOpacity>: null
}
<TouchableOpacity onPress={() => Linking.openURL(item.Online)}>
<Text style={styles.underLineText}>Online</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => Linking.openURL(destUrl)}>
<Text style={styles.underLineText}>Directions</Text>
</TouchableOpacity>
<Text style={styles.AddressSpace} >Miles:{dist}</Text>
</View>
</View>
</View>
</View>
);
}
componentDidCatch
render()
{
var x = this.props.navigation.state.params.item.id ;
var newList = ServiceDetails.filter(obj => obj.fk === x)
return(
<View >
<View>
<Text style={styles.title}>{this.props.navigation.state.params.item.ser}</Text>
<Text style={styles.SerContent} >Services are available in the following locations:</Text>
</View>
<View>
<FlatList
data={newList.sort((a, b) => {
var geodist = require('geodist')
const aDist = geodist(
{ lat: a.cLat, lon: a.cLong },
{ lat: a.LatL, lon: a.Long2 },
"mi"
);
const bDist = geodist(
{ lat: b.cLat, lon: b.cLong },
{ lat: b.LatL, lon: b.Long2 },
"mi"
);
return aDist - bDist;
})}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 10
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
container2:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 15
},
underLineText: {
fontSize: 17,
textDecorationLine: 'underline',
color: 'black',
alignSelf: 'center',
marginLeft: 20,
paddingTop:10
},
underLineTextOnline: {
fontSize: 17,
textDecorationLine: 'underline',
color: 'black',
alignSelf: 'center',
marginLeft: 20,
paddingTop:5
},
title:{
justifyContent: 'center',
paddingTop: 10,
alignItems: 'center',
alignSelf: 'center',
fontWeight: 'bold',
fontSize: 22,
color: 'black',
},
Address1:{
alignSelf: 'center',
marginRight: 20,
fontSize: 19,
fontWeight:'bold',
fontWeight: 'bold',
color: 'black'
},
SerContent:{
fontWeight: 'bold',
fontSize: 16,
paddingTop: 10,
alignSelf: 'center',
color: 'black',
paddingBottom: 10
},
Address1:{
alignSelf: 'center',
marginRight: 20,
fontSize: 15,
flexDirection:'column',
color: 'black',
marginLeft:10,
textAlignVertical:'center'
},
AddressRow:{
alignSelf: 'center',
marginRight: 20,
fontSize: 15,
flexDirection: 'row',
color: 'black'
},
phoneImg:{
flexDirection: 'row',
alignSelf: 'center',
textAlignVertical:'center'
},
AddressSpace:{
alignSelf: 'center',
marginLeft: 20,
fontSize: 15,
marginLeft: 20,
paddingTop:5,
color: 'black'
},
actionImage:{
flex:0,
height:30,
width:30,
backgroundColor:'transparent',
justifyContent:'center',
alignItems:'center',
marginTop:10,
alignSelf:'center',
flexDirection:'column',
textAlignVertical:'center'
},
sepBoxes:{
flex: 1,
flexDirection: 'column'
},
box: {
height: 55,
width:400,
},
box1: {
backgroundColor: 'white'
},
actionImage1:{
flex:0,
height:40,
width:40,
backgroundColor:'transparent',
justifyContent:'center',
alignItems:'center',
paddingLeft:5,
alignSelf:'center',
flexDirection:'column'
},
imageView:{
width:'30%',
height:100,
margin:7,
borderRadius: 7
},
textView: {
width:'50%',
textAlignVertical:'center',
padding:10,
color: '#000'
}
});
AppRegistry.registerComponent('ServiceListDetails', () => ServiceListDetails);
Above code has all the stylesheets and complete code.
Any help will be greatly appreciated.