D:

Maps.js

// Componente do mapa --------------------------------
import React, { Component } from 'react';
import { connect } from 'react-redux';
import MapView from 'react-native-maps';
import { StyleSheet, View, Text, Dimensions } from 'react-native';

import { Spinner } from './common';
import { setLocation } from '../actions';

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LAT_DELTA = 0.01;
const LNG_DELTA = LAT_DELTA * ASPECT_RATIO;

class Maps extends Component {

    componentDidMount() {
        navigator.geolocation.getCurrentPosition(
            position => {
                return this.props.setLocation(
                    position.coords.latitude,
                    position.coords.longitude
                );
            }, () => {
                return console.log('Erro ao definir localização');
            }
        );
        this.watchID = navigator.geolocation.watchPosition(
            position => {
                const newRegion = {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                };
                this.onRegionChange({ newRegion });
            }
        );
    }

    componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchID);
    }

    onRegionChange(region) {
        console.log('onRegionChange: ', region);
    }

    renderMap() {
        if (!this.props.lat || !this.props.lng) {
            console.log('Aguardando dados geográficos...');
            return <Spinner size="large" />;
        } console.log('Dados recebidos! Inicializando...');
        return (
            <View style={styles.container}>
                <MapView
                    mapType="terrain"
                    style={styles.map}
                    region={{
                        latitude: this.props.lat,
                        longitude: this.props.lng,
                        latitudeDelta: LAT_DELTA,
                        longitudeDelta: LNG_DELTA
                    }}
                    onRegionChange={this.onRegionChange}
                />
                <View style={styles.coordText}>
                    <Text style={{ textAlign: 'center' }}>
                        {`${this.props.lat.toPrecision(7)}, ${this.props.lng.toPrecision(7)}`}
                    </Text>
                </View>
            </View>
        );
    }

    render() {
        return (
            this.renderMap()
        );
    }
}

const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject,
        height: null,
        width: null,
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        ...StyleSheet.absoluteFillObject,
    },
    coordText: {
        backgroundColor: 'rgba(255,255,255,0.7)',
        paddingHorizontal: 18,
        paddingVertical: 12,
        borderRadius: 5,
    },
});

const mapStateToProps = ({ geo }) => {
    const { lat, lng } = geo;
    return { lat, lng };
};

export default connect(mapStateToProps, {
    setLocation
})(Maps);

//Actions --------------------------------

import {
    SET_LOCATION
} from './types';

export const setLocation = (lat, lng) => {
    return {
      type: SET_LOCATION,
      payload: { lat, lng }
    };
};

//Reducer --------------------------------

import {
    SET_LOCATION
} from '../actions/types';

const INITIAL_STATE = {
    lat: null,
    lng: null
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SET_LOCATION:
            return { ...state, lat: action.payload.lat, lng: action.payload.lng };
        default:
            return state;
    }
};