How to make showsMyLocationButton worked? - react-native

Question

What I'm trying to do is center the screen view to the user location when I press a custom button and not the default button react-native-map offers. I do get the longitude and latitude but I can't seem to figure out:
How to make the custom button call the method to center the view to the coordinates I have
How to center the View all together
import React,{ useState, useEffect} from 'react';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import { StyleSheet, Image , Text, View} from 'react-native';
import * as Location from 'expo-location';
import {
LocationView ,
LocationBtn,
} from '../components/styles';
import { MaterialIcons } from '#expo/vector-icons';
const Map = (props) =>{
const [mapRegion, setMapRegion] = useState(null);
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
setMapRegion({
longitude: location.coords.longitude,
latitude: location.coords.latitude,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421
});
console.log('location', location)
})();
}, [])
return(
<View style={{ flex: 1}}>
<MapView
region={mapRegion}
provider={PROVIDER_GOOGLE}
style={styles.map}
mapType={props.mapType}
showsUserLocation={true}
showsMyLocationButton={true}
loadingEnabled={true}
initialRegion={mapRegion}
userInterfaceStyle='light'
showsTraffic={true}
>
<Marker
coordinate={mapRegion}
>
<Image source={require('../assets/marker.png')} style={{height: 90, width: 90}} />
</Marker>
</MapView>
<LocationView>
<LocationBtn
>
<MaterialIcons
name="my-location"
size={30}
color="black"
style={{alignSelf: 'center', marginTop: 13}}
/>
</LocationBtn>
</LocationView>
</View>
)
}
const styles = StyleSheet.create({
map: {
height: '100%',
},
})
export default Map;

Answer 1

<View style={{ flex: 1}}>
Please add style justify content and align items.