expo: EAS Render Error: requireNativeComponent: "RNSScreen" was not found in the UIManager

Summary

While regular Expo is able to load the app fine, the EAS custom development build crashes after the app is loaded with the render error “Invariant Violation: requireNativeComponent: ‘RNSScreen’ was not found in the UIManager.” EDIT: I’ve also tested this with Android now, and it works fine there, so it seems like a problem with iOS only.

Managed or bare?

Managed: EAS Build (iOS)

Environment

expo-env-info 1.0.5 environment info: System: OS: macOS 12.5.1 Shell: 3.2.57 - /bin/bash Binaries: Node: 18.13.0 - /usr/local/bin/node npm: 8.19.3 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9477386 Xcode: 14.2/14C18 - /usr/bin/xcodebuild npmPackages: expo: ~47.0.12 => 47.0.13 react: 18.1.0 => 18.1.0 react-native: 0.70.5 => 0.70.5 npmGlobalPackages: eas-cli: 3.5.2 Expo Workflow: managed

Error output

ERROR Invariant Violation: requireNativeComponent: “RNSScreen” was not found in the UIManager.

This error is located at: in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RCTView (created by View) in View (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by Stacky) in Stacky (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent)

Reproducible demo or steps to reproduce from a blank project

Initialize an expo project and create a development build for it; set up the development build on your simulator/device.
Download the dependencies: npm install @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/stack react-native-gesture-handler react-native-safe-area-context @react-native-community/masked-view
Make a paths file, your screens, and import Navigation to your app startup file (App.js in my case). The Snack link to what I have is here. It works in Snack but not in the custom development build. Two simple screens are in the screens folder.

About this issue

Original URL
State: closed
Created a year ago
Comments: 16

Most upvoted comments

A rather important step that I didn’t see mentioned here, was that if you’re an expo developer using a dev-client, you would have to rebuild your dev-client. To that end, these are the steps I followed to resolve this issue:

Stop your metro server.
Run this in the terminal to install the required dependencies:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-masked-view/masked-view

Add the reanimated plugin to the babel.config.js file, ensuring it’s the last one listed. These is what my own babel.config.js file looked like

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

Should be optional: delete node_modules directory and run npm install
Not Optional: Run npx expo install --check to fix all dependencies that are not compatible with the installed expo SDK.
Head to your emulator and uninstall your dev-client.
Rebuild your dev-client using whatever command is best suited for your use case. You can find specific instructions here
Restart your emulator
Reinstall the dev-client
Run expo r -c to clear the cache while running