13) Visualização de Trajetos da Aplicação

5) Como renderizar no app com React Native

O app deve usar os pontos recebidos em data.trajetos[0].pontos para montar a linha do trajeto no Google Maps.

Instalação sugerida

npx expo install react-native-maps

Exemplo simples

import React, { useEffect, useMemo, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import MapView, { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps';

const API_URL = 'https://agroecologia.grupoekos.com.br/router/action.php';

type AplicacaoTrajeto = {
  id_aplicacao: number;
  label: string;
  total_pontos: number;
};

type PontoMapa = {
  latitude: number;
  longitude: number;
  ordem: number;
};
type DispositivoTrajeto = {
  device_id: number;
  apelido: string;
  account_type: string;
};

type TrajetoAplicacao = {
  id_trajeto: number;
  status: string;
  dispositivo: DispositivoTrajeto;
  pontos: PontoMapa[];
};
export default function TrajetosScreen() {
  const [aplicacoes, setAplicacoes] = useState<AplicacaoTrajeto[]>([]);
  const [pontos, setPontos] = useState<PontoMapa[]>([]);

  const APP_KEY = 'APP_KEY_DO_APP';
  const DEVICE_TOKEN = 'DEVICE_TOKEN_SALVO_NO_APARELHO';
  const ID_G10 = 2;

  async function postApi(params: Record<string, string | number>) {
    const body = new FormData();

    Object.entries(params).forEach(([key, value]) => {
      body.append(key, String(value));
    });

    const response = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'X-APP-KEY': APP_KEY,
        'X-DEVICE-TOKEN': DEVICE_TOKEN,
      },
      body,
    });

    const json = await response.json();

    if (!json.success) {
      throw new Error(json.msg || 'Erro ao consultar API.');
    }

    return json.data;
  }

  async function carregarAplicacoes() {
    const data = await postApi({
      action: 'apiG10',
      f: 'listar_aplicacoes_com_trajeto',
      id_g10_participacao: ID_G10,
    });

    setAplicacoes(data.aplicacoes || []);
  }

  async function carregarTrajeto(idAplicacao: number) {
    const data = await postApi({
      action: 'apiG10',
      f: 'listar_trajeto_aplicacao',
      id_aplicacao: idAplicacao,
    });

    const primeiroTrajeto = data.trajetos?.[0] as TrajetoAplicacao | undefined;

    if (!primeiroTrajeto) {
      setPontos([]);
      return;
    }

    setPontos(primeiroTrajeto.pontos || []);
  }

  useEffect(() => {
    carregarAplicacoes();
  }, []);

  const initialRegion = useMemo(() => {
    const primeiro = pontos[0];

    return {
      latitude: primeiro?.latitude || -21.85888,
      longitude: primeiro?.longitude || -47.4845167,
      latitudeDelta: 0.01,
      longitudeDelta: 0.01,
    };
  }, [pontos]);

  return (
    <View style={styles.container}>
      <View style={styles.lista}>
        {aplicacoes.map((app) => (
          <TouchableOpacity
            key={app.id_aplicacao}
            style={styles.botao}
            onPress={() => carregarTrajeto(app.id_aplicacao)}
          >
            <Text style={styles.botaoTexto}>{app.label}</Text>
            <Text style={styles.botaoSub}>{app.total_pontos} pontos</Text>
          </TouchableOpacity>
        ))}
      </View>

      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.mapa}
        initialRegion={initialRegion}
        mapType="satellite"
      >
        {pontos.length > 0 && (
          <>
            <Polyline
              coordinates={pontos.map((p) => ({
                latitude: p.latitude,
                longitude: p.longitude,
              }))}
              strokeWidth={4}
              strokeColor="#dc2626"
            />

            <Marker
              coordinate={{
                latitude: pontos[0].latitude,
                longitude: pontos[0].longitude,
              }}
              title="Início"
            />

            <Marker
              coordinate={{
                latitude: pontos[pontos.length - 1].latitude,
                longitude: pontos[pontos.length - 1].longitude,
              }}
              title="Fim"
            />
          </>
        )}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  lista: {
    padding: 12,
    backgroundColor: '#ffffff',
  },
  botao: {
    padding: 12,
    borderRadius: 12,
    backgroundColor: '#f1f5f9',
    marginBottom: 8,
  },
  botaoTexto: {
    fontSize: 15,
    fontWeight: '700',
    color: '#0f172a',
  },
  botaoSub: {
    fontSize: 12,
    color: '#64748b',
    marginTop: 2,
  },
  mapa: {
    flex: 1,
  },
});