Criar mapa com dados do realmdb

mapas.js

import React, {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

import {
  Container,
  List,
  ContainerPasto,
  MapaContainer,
  Mapa,
  ContainerDadosPasto,
  Nome,
} from './styles';
import {ButtonIcon} from '../../components';

import {PastoService} from '../../services/local';

const {width, height} = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

export default function Lancamentos() {
  const [pastos, setPastos] = useState([]);

  useEffect(() => {
    async function loadingPastos() {
      const fazendaStorage = await AsyncStorage.getItem('@semenca/fazenda');
      const retiroStorage = await AsyncStorage.getItem('@semenca/retiro');
      const fazenda = JSON.parse(fazendaStorage);
      const retiro = JSON.parse(retiroStorage);
      const service = new PastoService();
      const data = await service.getByFazendaRetiro(fazenda, retiro);
      setPastos(data);
    }

    loadingPastos();
  }, []);

  return (
    <Container>
      <List
        data={pastos}
        keyExtractor={item => item.id}
        renderItem={({item}) => (
          <ContainerPasto>
            <MapaContainer>
              <Mapa
                liteMode
                initialRegion={{
                  region: {
                    latitude: item.latitudeCentro,
                    longitude: item.longitudeCentro,
                    latitudeDelta: LATITUDE_DELTA,
                    longitudeDelta: LONGITUDE_DELTA,
                  },
                }}
              />
            </MapaContainer>
            <ContainerDadosPasto>
              <Nome>{item.nome}</Nome>
            </ContainerDadosPasto>
          </ContainerPasto>
        )}
      />
    </Container>
  );
}

Lancamentos.navigationOptions = ({navigation}) => ({
  headerLeft: () => (
    <ButtonIcon
      size={36}
      color="#31632d"
      name="menu"
      onPress={() => navigation.toggleDrawer()}
    />
  ),
});