React native maps mapPadding not working

Question

I'm using fitToSuppliedMarkers() for my markers and need to add some padding to my map. I have tried to implement this solution with no luck. I can't use fitToCoordinates() because I need to create the markers in componentDidMount which that method doesn't support.

My code:

<MapView onMapReady={() => this.mapRef.map.setNativeProps({ padding: 100 })}></MapView>

This code yields "setNativeProps is not a function". I have also tried using the mapPadding property that exists in the docs with no luck:

<MapView mapPadding={{top: 20, right: 20, bottom: 20, left: 20}}></MapView>

Answer 1

I believe there is an issue with the android implementation of react-native-maps. I am not sure but it seems to be an issue with the px to dp conversion. Try this:

const padding = Platform.OS === 'android' 
                   ? PixelRatio.getPixelSizeForLayoutSize(20) 
                   : 20;

const mapPadding = {top: padding, right: padding, bottom: padding, left: padding};

If it doesn't work try setting padding to 200 and see if there is any difference.

Edit: This is the exact code i am using successfully:

const iosEdgePadding = { top: 100, right: 50, bottom: 300, left: 50 };

const androidEdgePadding = {
    top: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.top),
    right: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.right),
    bottom: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.bottom),
    left: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.left),
}

const edgePadding = (Platform.OS === 'android') ? androidEdgePadding : iosEdgePadding;

this.refs.map.fitToCoordinates([coordinate1, coordinate2], { edgePadding, animated: true })