GEO/Map UI components for React Native.

[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>
	);
}