React Native Mapbox - MapboxNavigation was not found in the UIManager

[thomaskbird]

So I've been trying to integrate @homee/react-native-mapbox-navigation I've followed the install instructions found here https://github.com/homeeondemand/react-native-mapbox-navigation to the letter 3 times now. I continue to get the following error, this is from the simulator:

This is from the console:

 Invariant Violation: requireNativeComponent: "MapboxNavigation" was not found in the UIManager.

    This error is located at:
        in MapboxNavigation (at react-native-mapbox-navigation/index.js:6)
        in MapboxNavigation (at ManifestScreen.tsx:37)
        in RCTView (at View.js:34)
        in View (at Themed.tsx:40)
        in View (at ManifestScreen.tsx:36)
        in RCTView (at View.js:34)
        in View (at Themed.tsx:40)
        in View (at ManifestScreen.tsx:25)
        in ManifestScreen (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:245)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:244)
        in RCTView (at View.js:34)
        in View (at CardSheet.tsx:33)
        in ForwardRef(CardSheet) (at Card.tsx:573)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
        in PanGestureHandler (at GestureHandlerNative.tsx:13)
        in PanGestureHandler (at Card.tsx:549)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
        in RCTView (at View.js:34)
        in View (at Card.tsx:538)
        in Card (at CardContainer.tsx:206)
        in CardContainer (at CardStack.tsx:619)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:84)
        in MaybeScreen (at CardStack.tsx:612)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:54)
        in MaybeScreenContainer (at CardStack.tsx:494)
        in CardStack (at StackView.tsx:462)
        in KeyboardManager (at StackView.tsx:458)
        in SafeAreaProviderCompat (at StackView.tsx:455)
        in RCTView (at View.js:34)
        in View (at StackView.tsx:454)
        in StackView (at createStackNavigator.tsx:87)
        in StackNavigator (at ManifestTabNavigator.tsx:60)
        in DirectionsNavigator (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at BottomTabView.tsx:55)
        in SceneContent (at BottomTabView.tsx:172)
        in RCTView (at View.js:34)
        in View (at ResourceSavingScene.tsx:58)
        in RCTView (at View.js:34)
        in View (at ResourceSavingScene.tsx:41)
        in ResourceSavingScene (at BottomTabView.tsx:166)
        in RCTView (at View.js:34)
        in View (at src/index.native.js:123)
        in ScreenContainer (at BottomTabView.tsx:146)
        in RCTView (at View.js:34)
        in View (at BottomTabView.tsx:145)
        in SafeAreaProviderCompat (at BottomTabView.tsx:144)
        in BottomTabView (at createBottomTabNavigator.tsx:45)
        in BottomTabNavigator (at ManifestTabNavigator.tsx:19)
        in ManifestTabNavigator (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:245)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:244)
        in RCTView (at View.js:34)
        in View (at CardSheet.tsx:33)
        in ForwardRef(CardSheet) (at Card.tsx:573)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
        in PanGestureHandler (at GestureHandlerNative.tsx:13)
        in PanGestureHandler (at Card.tsx:549)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
        in RCTView (at View.js:34)
        in View (at Card.tsx:538)
        in Card (at CardContainer.tsx:206)
        in CardContainer (at CardStack.tsx:619)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:84)
        in MaybeScreen (at CardStack.tsx:612)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:54)
        in MaybeScreenContainer (at CardStack.tsx:494)
        in CardStack (at StackView.tsx:462)
        in KeyboardManager (at StackView.tsx:458)
        in SafeAreaProviderCompat (at StackView.tsx:455)
        in RCTView (at View.js:34)
        in View (at StackView.tsx:454)
        in StackView (at createStackNavigator.tsx:87)
        in StackNavigator (at navigation/index.tsx:45)
        in RootNavigator (at navigation/index.tsx:29)
        in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
        in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
        in ThemeProvider (at NavigationContainer.tsx:90)
        in ForwardRef(NavigationContainer) (at navigation/index.tsx:26)
        in Navigation (at App.tsx:18)
        in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
        in SafeAreaProvider (at App.tsx:17)
        in App (created by ExpoRoot)
        in ExpoRoot (at renderApplication.js:45)
        in RCTView (at View.js:34)
        in View (at AppContainer.js:106)
        in DevAppContainer (at AppContainer.js:121)
        in RCTView (at View.js:34)
        in View (at AppContainer.js:132)
        in AppContainer (at renderApplication.js:39)
    - node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
    - node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
    - node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
    - node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
    - node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
    - node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
    - node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
    - node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
    - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
    - node_modules/regenerator-runtime/runtime.js:293:29 in invoke
    - node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
    - node_modules/regenerator-runtime/runtime.js:154:27 in invoke
    - node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
    - node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
    - node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
    - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
    - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
    - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
    * [native code]:null in flushedQueue
    * [native code]:null in invokeCallbackAndReturnFlushedQueue

    Invariant Violation: requireNativeComponent: "MapboxNavigation" was not found in the UIManager.

    This error is located at:
        in MapboxNavigation (at react-native-mapbox-navigation/index.js:6)
        in MapboxNavigation (at ManifestScreen.tsx:37)
        in RCTView (at View.js:34)
        in View (at Themed.tsx:40)
        in View (at ManifestScreen.tsx:36)
        in RCTView (at View.js:34)
        in View (at Themed.tsx:40)
        in View (at ManifestScreen.tsx:25)
        in ManifestScreen (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:245)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:244)
        in RCTView (at View.js:34)
        in View (at CardSheet.tsx:33)
        in ForwardRef(CardSheet) (at Card.tsx:573)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
        in PanGestureHandler (at GestureHandlerNative.tsx:13)
        in PanGestureHandler (at Card.tsx:549)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
        in RCTView (at View.js:34)
        in View (at Card.tsx:538)
        in Card (at CardContainer.tsx:206)
        in CardContainer (at CardStack.tsx:619)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:84)
        in MaybeScreen (at CardStack.tsx:612)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:54)
        in MaybeScreenContainer (at CardStack.tsx:494)
        in CardStack (at StackView.tsx:462)
        in KeyboardManager (at StackView.tsx:458)
        in SafeAreaProviderCompat (at StackView.tsx:455)
        in RCTView (at View.js:34)
        in View (at StackView.tsx:454)
        in StackView (at createStackNavigator.tsx:87)
        in StackNavigator (at ManifestTabNavigator.tsx:60)
        in DirectionsNavigator (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at BottomTabView.tsx:55)
        in SceneContent (at BottomTabView.tsx:172)
        in RCTView (at View.js:34)
        in View (at ResourceSavingScene.tsx:58)
        in RCTView (at View.js:34)
        in View (at ResourceSavingScene.tsx:41)
        in ResourceSavingScene (at BottomTabView.tsx:166)
        in RCTView (at View.js:34)
        in View (at src/index.native.js:123)
        in ScreenContainer (at BottomTabView.tsx:146)
        in RCTView (at View.js:34)
        in View (at BottomTabView.tsx:145)
        in SafeAreaProviderCompat (at BottomTabView.tsx:144)
        in BottomTabView (at createBottomTabNavigator.tsx:45)
        in BottomTabNavigator (at ManifestTabNavigator.tsx:19)
        in ManifestTabNavigator (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:245)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:244)
        in RCTView (at View.js:34)
        in View (at CardSheet.tsx:33)
        in ForwardRef(CardSheet) (at Card.tsx:573)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
        in PanGestureHandler (at GestureHandlerNative.tsx:13)
        in PanGestureHandler (at Card.tsx:549)
        in RCTView (at View.js:34)
        in View (at createAnimatedComponent.js:165)
        in AnimatedComponent (at createAnimatedComponent.js:215)
        in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
        in RCTView (at View.js:34)
        in View (at Card.tsx:538)
        in Card (at CardContainer.tsx:206)
        in CardContainer (at CardStack.tsx:619)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:84)
        in MaybeScreen (at CardStack.tsx:612)
        in RCTView (at View.js:34)
        in View (at Screens.tsx:54)
        in MaybeScreenContainer (at CardStack.tsx:494)
        in CardStack (at StackView.tsx:462)
        in KeyboardManager (at StackView.tsx:458)
        in SafeAreaProviderCompat (at StackView.tsx:455)
        in RCTView (at View.js:34)
        in View (at StackView.tsx:454)
        in StackView (at createStackNavigator.tsx:87)
        in StackNavigator (at navigation/index.tsx:45)
        in RootNavigator (at navigation/index.tsx:29)
        in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
        in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
        in ThemeProvider (at NavigationContainer.tsx:90)
        in ForwardRef(NavigationContainer) (at navigation/index.tsx:26)
        in Navigation (at App.tsx:18)
        in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
        in SafeAreaProvider (at App.tsx:17)
        in App (created by ExpoRoot)
        in ExpoRoot (at renderApplication.js:45)
        in RCTView (at View.js:34)
        in View (at AppContainer.js:106)
        in DevAppContainer (at AppContainer.js:121)
        in RCTView (at View.js:34)
        in View (at AppContainer.js:132)
        in AppContainer (at renderApplication.js:39)
    - node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
    - node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
    - node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
    - node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
    - node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
    - node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
    - node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15257:32 in logCapturedError
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15361:20 in logError
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16597:12 in update.callback
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7106:2 in callCallback
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7127:20 in commitUpdateQueue
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15801:25 in commitLifeCycles
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
    * [native code]:null in commitRootImpl
    - node_modules/scheduler/cjs/scheduler.development.js:653:23 in unstable_runWithPriority
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18317:17 in commitRoot
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot
    * [native code]:null in performSyncWorkOnRoot
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
    - node_modules/scheduler/cjs/scheduler.development.js:653:23 in unstable_runWithPriority
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17718:28 in batchedUpdates$1
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
    - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2767:27 in receiveTouches
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
    - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
    * [native code]:null in callFunctionReturnFlushedQueue

This is code for the file where I am trying to use the mapbox package:

    import * as React from 'react';

    import { Text, View } from '../components/Themed';
    import styles from '../components/styles';
    import {Ionicons} from '@expo/vector-icons';
    import {Image} from 'react-native';

    import MapboxNavigation from '@homee/react-native-mapbox-navigation';

    export default function ManifestScreen() {
      return (
        <View style={styles.padlessContainer}>
            <MapboxNavigation
              origin={[-97.760288, 30.273566]}
              destination={[-97.918842, 30.494466]}
              shouldSimulateRoute={true}
              onLocationChange={(event: any) => {
                const { latitude, longitude } = event.nativeEvent;
              }}
              onRouteProgressChange={(event: any) => {
                const {
                  distanceTraveled,
                  durationRemaining,
                  fractionTraveled,
                  distanceRemaining,
                } = event.nativeEvent;
              }}
              onError={(event: any) => {
                const { message } = event.nativeEvent;
              }}
              onCancelNavigation={() => {
                // User tapped the "X" cancel button in the nav UI
                // or canceled via the OS system tray on android.
                // Do whatever you need to here.
              }}
              onArrive={() => {
                // Called when you arrive at the destination.
              }}
            />
        </View>
      );
    }

I checked and made sure I had the correct native extensions installed in my /ios/pods directory:

I also made sure I had all the needed packages installed in the node_modules:

I also seen this issue, which seemed similar so I tried to autolink the missing package that was listed in the simulator errors:

https://stackoverflow.com/questions/60034686/react-native-rncsafeareaview-was-not-found-in-the-uimanager#answer-61329389

That didn't help either, I've been trouble shooting for 3-4 days trying to get this resolved, any help would be greatly appreciated!!!

[rossmartin]

Can you please try the latest version that was just published (1.0.2)? Also please review the new notes in the ios specific instructions - https://github.com/homeeondemand/react-native-mapbox-navigation#ios-specific-instructions

[thomaskbird]

@rossmartin Working on retrying with a completely clean install and only barebones code. Do you know are there any specific caveats to using your package with expo?

[rossmartin]

I've never used expo but I'm pretty sure most native modules will not work with it (including this one). It appears that "ejecting" might provide a way - https://docs.expo.io/expokit/eject/

[thomaskbird]

@rossmartin I started the project with expo, but I saw the docs on ejecting and then auto-linking and tried that. I'm sure its a configuration issue. Is there a way to pay for a few hours of direct support like phone call support or webex?

[rossmartin]

Hey sorry I have been very busy after moving into a new house and with my day job. How far along are you in this expo project? I recommend creating a vanilla react native project and porting over any existing work. I apologize that I don't have time to help directly with this right now. This is my recommendation until I can see what it will take to get an expo project running with this (I have my doubts that it will though).

[thomaskbird]

@rossmartin hey no worries I appreciate that, I’m kind of in the same boat just moved to. That’s what I did, I started from scratch a vanilla react native project left out everything except trying to get this package plugged in and working by itself and then I intended to add the other screens from my other app back into this vanilla project. I’m not getting this same error but now I’m getting other errors still relating to the same type of thing, mostly using native functionality.

[AKACC]

Here is my solution to fix the same error. Hope it helps

Link the package manually ​ npx react-native link @homee/react-native-mapbox-navigation or react-native link @homee/react-native-mapbox-navigation

Check if this line appear on your Podfile: pod 'react-native-mapbox-navigation', :path => '../node_modules/@homee/react-native-mapbox-navigation'

Run pod install in ios folder

Try to build again.

--

if you see the following error:

[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod `react-native-mapbox-navigation` depends upon `React-Core`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.

change pod 'React-Core', :path => '../node_modules/react-native/React' to pod 'React-Core', :path => '../node_modules/react-native/React', :modular_headers => true

[thomaskbird]

Thanks @AKACC I will try that here shortly!

[mpeglerg]

Thanks for opening this issue @thomasbird1984. I’m running into the same issue and was wondering if you were able to get past it? I’ve tried linking, ejecting, and modifying the Podfile as suggested but am still facing the error. Working within this repo and importing into the NavRoute component https://github.com/mpeglerg/NiteLite/blob/StartRoute/src/components/NavRoute.js

[thomaskbird]

@mpeglerg I'm sorry I never figured it out we ended up hiring another developer who is handling and got past it. I would strongly suggest not using expo if you are, my guy said he never experienced this so I'm not sure what happened. Plus he started from scratch