How to make showsMyLocationButton worked?

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:

1. How to make the custom button call the method to center the view to the coordinates I have
2. 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.