Turn-by-turn navigation w/ Mapbox drop-in UI in React-Native

This page summarizes the projects mentioned and recommended in the original post on /r/mapbox

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • mapbox-poc

    Discontinued React-Native PoC for Mapbox turn-by-turn

  • There is a hosted report with the PoC code here: https://github.com/Aura-app/mapbox-poc

  • react-native

    A framework for building native applications using React

  • /** * Sample React Native App * https://github.com/facebook/react-native * * @format */ import React from 'react'; import type { PropsWithChildren } from 'react'; import { Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native'; import { Colors, DebugInstructions, Header, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; import { NativeModules } from 'react-native'; import { PermissionsAndroid } from 'react-native'; import { MapboxNavigation } from './src/MapboxNavigationView'; type SectionProps = PropsWithChildren<{ title: string; }>; function Section({ children, title }: SectionProps): JSX.Element { const isDarkMode = useColorScheme() === 'dark'; return ( {title} {children} ); } function App(): JSX.Element { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; const { MapboxNavigationModule, TestModule } = NativeModules; const NewModuleButton = () => { const onPress = () => { MapboxNavigationModule.createNavigationEvent('25 Commerce Crescent, Kramerville, Johannesburg, 2090'); }; return ( ); }; const TestModuleButton = () => { const onPress = () => { TestModule.createTestEvent('25 Commerce Crescent, Kramerville, Johannesburg, 2090'); }; return ( ); }; const requestLocationPermission = async () => { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, { title: 'Need to know where you are Permission', message: 'Gief location access ' + 'so that I can navigate you.', buttonNeutral: 'Ask Me Later', buttonNegative: 'Cancel', buttonPositive: 'OK', }, ); console.log(granted) if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('You can use location'); } else { console.log('Location permission denied'); } } catch (err) { console.warn(err); } }; const requestNotificationPermission = async () => { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS, { title: 'Be notifed Dammit Permission', message: 'Gief permissions to notify ' + 'so that I can notify you.', buttonNeutral: 'Ask Me Later', buttonNegative: 'Cancel', buttonPositive: 'OK', }, ); console.log(granted) if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('You can use notfications'); } else { console.log('Notifications permission denied'); } } catch (err) { console.warn(err); } }; return ( Edit App.tsx to change this screen and then come back to see your edits. ); } const styles = StyleSheet.create({ sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', }, highlight: { fontWeight: '700', }, }); export default App;

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts