How to use @react-native-mapbox-gl/maps - 10 common examples

export function createPack (options) {
  const { name, bounds } = options

  const progressListener = (offlineRegion, status) => {
    // TODO: call redux actions to update ui as needed
    console.log(offlineRegion, status)
  }

  const errorListener = (offlineRegion, err) => {
    // TODO: call redux actions to update ui as needed
    console.log(offlineRegion, err)
  }

  return MapboxGL.offlineManager.createPack({
    name,
    styleURL,
    bounds,
    // TODO: we'll want to test out different min/max zooms
    minZoom: 10,
    maxZoom: 20
  }, progressListener, errorListener)
}

async takeSnapshot (aoi) {
    const { imageHeight: height, width } = this.state
    // MapboxGL expects these as [[maxX, maxY], [minX, minY]]
    const bounds = [[aoi[2], aoi[3]], [aoi[0], aoi[1]]]
    try {
      const uri = await MapboxGL.snapshotManager.takeSnap({
        bounds,
        width,
        height,
        styleURL: osmStyleURL
      })

      this.setState({
        preview: uri
      })
    } catch (err) {
      console.log('failed to take snapshot:', err)
    }
  }

getCurrentTraceStatus,
  getTracesGeojson,
  getPhotosGeojson
} from '../selectors'
import BasemapModal from '../components/BasemapModal'
import ActionButton from '../components/ActionButton'
import Icon from '../components/Collecticons'
import { colors } from '../style/variables'
import { CameraButton } from '../components/CameraButton'
import { RecordButton } from '../components/RecordButton'

import icons from '../assets/icons'
import { authorize } from '../services/auth'

let osmStyleURL = Config.MAPBOX_STYLE_URL || MapboxGL.StyleURL.Street
let satelliteStyleURL = Config.MAPBOX_SATELLITE_STYLE_URL || MapboxGL.StyleURL.Satellite

// fix asset URLs for Android
if (!osmStyleURL.includes(':/') && Platform.OS === 'android') {
  osmStyleURL = `asset://${osmStyleURL}`
}

if (!satelliteStyleURL.includes(':/') && Platform.OS === 'android') {
  satelliteStyleURL = `asset://${satelliteStyleURL}`
}

const Container = styled.View`
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
`
const MainBody = styled.View`

import EditMapModal from '../../components/EditMapModal'
import PageWrapper from '../../components/PageWrapper'
import {
  deleteOfflineResource,
  refreshOfflineResource,
  renameOfflineResource
} from '../../actions/map'
import { getOfflineResourceStatus } from '../../selectors'

const Text = styled.Text`
`
const Bold = styled.Text`
  font-weight: bold;
`

let osmStyleURL = Config.MAPBOX_STYLE_URL || MapboxGL.StyleURL.Street

// fix asset URLs
if (!osmStyleURL.includes(':/')) {
  osmStyleURL = `asset://${osmStyleURL}`
}

class ViewOfflineAreaDetail extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Area'
    }
  }

  state = {
    deleteModalVisible: false,
    editModalVisible: false,

// import type { MapStyle } from "../types";
import AddButton from "./AddButton";
import { LocationFollowingIcon, LocationNoFollowIcon } from "./icons";
import IconButton from "./IconButton";
import withNavigationFocus from "../lib/withNavigationFocus";
import type {
  LocationContextType,
  PositionType
} from "../context/LocationContext";
import type { ObservationsMap } from "../context/ObservationsContext";
import bugsnag from "../lib/logger";
import config from "../../config.json";
import Loading from "./Loading";

MapboxGL.setAccessToken(config.mapboxAccessToken);
// Forces Mapbox to always be in connected state, rather than reading system
// connectivity state
MapboxGL.setConnected(true);

const mapboxStyles = {
  observation: {
    circleColor: "#F29D4B",
    circleRadius: 5,
    circleStrokeColor: "#fff",
    circleStrokeWidth: 2
  }
};

type ObservationFeature = {
  type: "Feature",
  geometry: {

import { LocationFollowingIcon, LocationNoFollowIcon } from "./icons";
import IconButton from "./IconButton";
import withNavigationFocus from "../lib/withNavigationFocus";
import type {
  LocationContextType,
  PositionType
} from "../context/LocationContext";
import type { ObservationsMap } from "../context/ObservationsContext";
import bugsnag from "../lib/logger";
import config from "../../config.json";
import Loading from "./Loading";

MapboxGL.setAccessToken(config.mapboxAccessToken);
// Forces Mapbox to always be in connected state, rather than reading system
// connectivity state
MapboxGL.setConnected(true);

const mapboxStyles = {
  observation: {
    circleColor: "#F29D4B",
    circleRadius: 5,
    circleStrokeColor: "#fff",
    circleStrokeWidth: 2
  }
};

type ObservationFeature = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [number, number] | [number, number, number]
  },