MainMap.js

import React, { Component } from 'react'
import MapboxGL from '@mapbox/react-native-mapbox-gl'

const CHANGE_REGION_ANIMATION_DURATION = 500

const coordinatesToMapbox = (region = {}) => {
  const { longitude, latitude } = region
  if (!longitude || !latitude) { return }

  return [longitude, latitude]
}

const hasCoordinates = (region = {}) => {
  const { longitude, latitude } = region

  return !!latitude && !!longitude
}
class MainMap extends Component {
  constructor(props) {
    super(props)
    const region = hasCoordinates(props.region) ? props.region : { longitude: 4.6923935, latitude: 40.0573383, zoomLevel: 4 }

    this.state = {
      initialMapboxRegion: {
        centerCoordinates: coordinatesToMapbox(region),
        zoomLevel: region.zoomLevel
      }
    }
  }

  fitToBounds({ ne, sw }) {
    console.log('fit to bounds')
    this.map.fitBounds(
      coordinatesToMapbox(ne), // northEastCoordinates
      coordinatesToMapbox(sw), // southWestCoordinates
      [20, 20], // padding
      CHANGE_REGION_ANIMATION_DURATION // duration
    )
  }

  render() {
    console.log('render')

    const { mapStyle, children } = this.props
    const { initialMapboxRegion } = this.state
    return (
      <MapboxGL.MapView
        ref={ref => { this.map = ref }}
        style={{ flex: 1 }}
        styleURL={'mapbox://styles/jsaguiar/cjb3r8e2m00v22smquazasnjn' || mapStyle} // fix this
        centerCoordinate={initialMapboxRegion.centerCoordinates}
        zoomLevel={initialMapboxRegion.zoomLevel || 4}
      >
        {children}
      </MapboxGL.MapView >
    )
  }
}

export default MainMap