newMapper.js

import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import Mapbox from '@mapbox/react-native-mapbox-gl';

Mapbox.setAccessToken('My Token');


export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      location: {},
    }
  }

  onUserLocationUpdate (location) {
    this.setState({location});
  }
  
  renderAnnotations() {
    const location = this.state.location;
    return(
      <Mapbox.PointAnnotation
        key="pointAnnotation"
        id="pointAnnotation"
        coordinate={[location.coords.longitude, location.coords.latitude]}
        onUserLocationUpdate={this.onUserLocationUpdate}
      >
        <View style={styles.annotationContainer}>
          <View style={styles.annotationFill}>

          </View>
        </View>  
        <Mapbox.Callout title="You are here!"/>
      </Mapbox.PointAnnotation>
    )
  }

  render() {
    const location = this.state.lo;
    return (
      <View style={styles.container}>
        <Mapbox.MapView
            styleURL={Mapbox.StyleURL.Street}
            zoomLevel={15}
            //centerCoordinate={[122.4, 11.25]}
            ref={(c) => this._map = c}
            style={styles.container}
            onUserLocationUpdate={this.onUserLocationUpdate}
            showUserLocation={true}>
            {this.renderAnnotations()}
            
        </Mapbox.MapView>
        <Button
              onPress={() => {
                this.map.setCamera({
                  centerCoordinate: [location.coords.longitude, location.coords.latitude],
                  zoom: 12
                });
              }}
              title="Locate"
              color="#841584"
              accessibilityLabel="Learn more about this purple button"
            />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  annotationContainer: {
    width: 30,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    borderRadius: 15,
  },
  annotationFill: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: 'blue',
    transform: [{ scale: 0.6 }]
  }
});