Mapas

Instalação

Utilizando Expo, o comando a ser executado é o $ expo install react-native-maps

Uso do Mapa

import MapView from 'react-native-maps';

function Main() {
  return <MapView style={{flex: 1}} />;
}

export default Main;

Localização no React Native

Instalação

Utilizando Expo, o comando a ser executado é o $ expo install expo-location

Importações

requestPermissionsAsync: Para solicitar o acesso da localização do usuário getCurrentPositionAsync: Para obter a localização atual do usuário

import { requestPermissionsAsync, getCurrentPositionAsync } from 'expo-location';

Carregando a localização exata do usuário

Utilizando as funções useEffect() e useState() do React:

function Main() {
  const [currentRegion, setCurrentRegion] = useState(null); // Seta a localização do usuário em um estado

  useEffect(() => { // Cria um componente a ser renderizado uma única vez na aplicação
    async function loadInitialPosition() { // Cria a função para carregar a posição inicial do usuário
      const { granted } = await requestPermissionsAsync(); // Garante que o usuário permitiu o acesso da localização

      if (granted) { // Caso haja acesso à localização
        const { coords } = await getCurrentPositionAsync({ // Desestrutura pegando o "coords" dentro da localização atual do usuário
          enableHighAccuracy: true, // Pega a localização com maior precisão, através do GPS. Caso seja false, utilizará 3G ou wifi
        });

        const { latitude, longitude } = coords; // Pega a latitude e longitude das coordenadas

        setCurrentRegion({ // Seta a localização atual com latitude, longitude e o zoom (Delta)
          latitude,
          longitude,
          latitudeDelta: 0.04,
          longitudeDelta: 0.04,
        });
      }
    }

    loadInitialPosition(); // Carrega a localização atual quando o componente for renderizado
  }, []);

  if (!currentRegion) {
    return null; // Caso não haja a localização atual, não renderiza o mapa
  }

  return <MapView initialRegion={currentRegion} style={{ flex: 1 } />; // Carrega o mapa na tela com a localização inicial
}

export default Main;

Marker / Pointer

Para utilizar um marcador, deve-se importar utilizando:

import MapView, { Marker } from 'react-native-maps';

Na tag MapView:

<MapView initialRegion={currentRegion} style={styles.map}>
  <Marker coordinate={{ latitude: -23.6477446, longitude: -46.5644216 }} />
</MapView>

Uso de Imagem no Marker

Utilizando o componente nativo do RN Image:

<Marker coordinate={{ latitude: -23.6477446, longitude: -46.5644216 }}>
  <Image
    style={{ height: 50, width: 50 }
    source={{
      uri: 'https://avatars2.githubusercontent.com/u/42948574?v=4',
    }}
  />
</Marker>

Callout para imagens com conteúdo clicável

Importação do { Callout } do react-native-maps

import MapView, { Marker, Callout } from 'react-native-maps';

Utilizando-o após a tag Image citada anteriormente

<Callout>
  <View style={styles.callout}>
    <Text style={styles.devName}>Léu Almeida</Text>
    <Text style={styles.devBio}>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
      accusamus voluptate harum dolore numquam aspernatur omnis
      inventore, culpa repellat facere consectetur deserunt aut velit ut
      quod molestiae pariatur qui hic!
    </Text>
    <Text style={styles.devTechs}>ReactJS, React Native, Node.js</Text>
  </View>
</Callout>

Reactotron

StatusBar