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

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

1. 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
   

2. Install needed navigation package and its dependencies and update App.tsx with code available below.
3. 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"
    ]
  }
}

Package versions

• React: “17.0.1”
• React Native: “0.64.0”
• React Native Windows: “^0.64.0-0”
• React Native Screens: “^3.1.0”