userLocationButton padding - move button only

Question

Using react-native-maps, in my mapView, I have enabled my userLocationButton. You can see this rendered in the bottom right hand corner by default. I would like to be able to position this button specifically without it having an impact on the entire mapView.

I have tried mapPadding which you can see in my example but that seems to move the entire view which you can see by watching the 'google' text in the bottom left by default.

How can I position the userLocation button individually? Also, if I wanted to change the look of the button, how could I render a custom button? Worst case scenario I can just make my own.

I have the code below as well as a snack example here. Please run on IOS.

Thank you for any insight at all!

export default class Map extends React.Component {

  render() {
    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
      <MapView
        mapPadding={{bottom: 100}}
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        showsUserLocation={true}
        showsMyLocationButton={true}>
      </MapView>
      </View>
    );
  }
}

const styles = ScaledSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject

    
  },

Answer 1

I have searched before and I couldn't find the answer.

So I custom a button. I create a TouchableOpacity in an absolute view.

<TouchableOpacity
  style={styles.circleView}
  onPress={() => {
     setFollowUser(true);
  }}>
    <Image
      source={Target}
      style={{
        height: 20,
        width: 20,
      }}
      tintColor={MediumBlue}
    />
</TouchableOpacity>

and in <MapView> I use

onUserLocationChange={userLocation => {
  followUser === true &&
    mapRef.current.animateToRegion(
      {
        latitude: userLocation.nativeEvent.coordinate.latitude,
        longitude: userLocation.nativeEvent.coordinate.longitude,
        latitudeDelta: initLatDelta,
        longitudeDelta: initLongDelta,
      },
      1000,
    );
}}

It works for me on Android.

If you dont want to follow user's location everytime, you can call it only once or use react-native-geolocation-service