FR(Geo): React Native Map UI components

[allprogrammers]

On which framework/platform would you like to see this feature implemented?

React Native

Which UI component is this feature-request for?

Other

Please describe your feature-request in detail.

There doesn't seem to be a UI component for Maps or Geo for react native.

Please describe a solution you'd like.

Probably extend Amplify Geo UI component for React or create a new component using MapLibre

We love contributors! Is this something you'd be interested in working on?

• [X] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[calebpollman]

@allprogrammers Thanks for opening a feature request! We will definitely consider it once we move forward with React Native support

[allprogrammers]

@calebpollman when you decide to move forward with react native please let me know, I would love to work on this.

I want to do independent research to prepare myself and I will be very glad if you can provide any help.

[allprogrammers]

@calebpollman in the mean time can you also please suggest what to do to use aws maps in a react native app?

[Nikola-Milovic]

Any updates on this or any tips for alternative solutions while waiting for official support?

[sreeramsama]

We do not have React Native support for Geo components yet. You could use utilities from maplibre-gl-js-amplify to work with maps, location search or geofences.

[Nikola-Milovic]

I can share my simple solution, this uses react-native-maps (most popular map library and also supports expo). I should probably refetch the credentials periodically

import React, { useEffect, useState } from 'react';
import RNMap, { UrlTile, MapViewProps as RNMapProps } from 'react-native-maps';
import { Signer } from '@aws-amplify/core';
import { env } from '@env';
import { Auth } from 'aws-amplify';

type MapViewProps = {
    children?: React.ReactNode;
    initialRegion: {}
} & RNMapProps;

export const MapView: React.FC<MapViewProps> = ({ children }) => {
    const [urlTemplate, setUrlTemplate] = useState("");
    Auth.currentUserCredentials

    const [credentials, setCredentials] = useState<any>(null);

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

    async function fetchCreds() {
        try {
            const currentCredentials = await Auth.currentCredentials();
            const creds = {
                accessKeyId: currentCredentials.accessKeyId,
                secretAccessKey: currentCredentials.secretAccessKey,
                sessionToken: currentCredentials.sessionToken,
            };

            setCredentials(creds);
        } catch (error) {
            console.error(error);
        }
    }

    useEffect(() => {
        if (!credentials) { return }
        let url = `https://maps.geo.${env.AWS_REGION}.amazonaws.com/maps/v0/maps/${env.AWS_ADMIN_MAP_NAME}/tiles/{z}/{x}/{y}`;

        url = Signer.signUrl(url, {
            access_key: credentials.accessKeyId,
            secret_key: credentials.secretAccessKey,
            session_token: credentials.sessionToken,
        });

        setUrlTemplate(url);
    }, [credentials]);

    return (
        <RNMap
            style={{ flex: 1 }}
        >
            <UrlTile
                urlTemplate={urlTemplate}
                maximumZ={19}
                flipY={false}
            />
            {children}
        </RNMap>
    );
}