Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Version 3.1.0: Error "Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager." (Windows)

See original GitHub issue

Description

Windows app doesn´t load when creating a basic new react-native app with react-native-windows and Tab Navigation.

Screenshots

Debugging Windows App

Steps To Reproduce

Create react native app with windows using typescript and latest version (Date 09/04/2021)

 npx react-native init MyTSApp --template react-native-template-typescript cd MyTSApp
 cd myTSApp
 npx react-native-windows-init --overwrite --language cs

Install needed navigation package and its dependencies and update App.tsx with code available below.
Try running windows app and see that it errors. Note: It will work with react-native-screens ^2.18.1 instead.

Expected behavior

Windows App should load

Actual behavior

Windows App crashes showing error message (screenshot below)
- Console error: Error “Invariant Violation: requireNativeComponent: “RNSScreen” was not found in the UIManager.” Displaying error: Getting folly::toJson: JSON object value was a NaN or INF

Error in the Developer tools console is:

C:\codeWTS\BrandNewApps\RNW\Unused\TabbedTSApp\node_modules\react-native-windows\Libraries\Core\ExceptionsManager.js:180 Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

This error is located at:
    in RNSScreen (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at src/index.native.tsx:120)
    in Screen (at ResourceSavingScene.tsx:30)
    in ResourceSavingScene (at BottomTabView.tsx:166)
    in RNSScreenContainer (at src/index.native.tsx:145)
    in ScreenContainer (at BottomTabView.tsx:146)
    in RCTView (at View.windows.js:52)
    in View (at CompatNativeSafeAreaProvider.tsx:28)
    in CompatNativeSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at BottomTabView.tsx:145)
    in BottomTabView (at createBottomTabNavigator.tsx:45)
    in BottomTabNavigator (at App.tsx:27)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in BaseNavigationContainer (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in NavigationContainer (at App.tsx:26)
    in App (at renderApplication.js:47)
    in RCTView (at View.windows.js:52)
    in View (at AppContainer.js:107)
    in RCTView (at View.windows.js:52)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

Snack or minimal code example

App.tsx

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

package.json

{
  "name": "mytsapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "windows": "react-native run-windows"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.9",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.4",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.1.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.1.0",
    "react-native-windows": "^0.64.0-0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.20",
    "@types/react-native": "^0.64.0",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}