getting equireNativeComponent: "RNSScreen" was not found in the UIManager IOS

Question

I am trying to run the sample code from https://reactnavigation.org/docs/tab-based-navigation

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>
  );
}

But when I run the code in the IOS simulator I get the "RNSScreen" was not found in the UIManager error.

What I tried:

1. install the following packages

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

install the pods

cd ios
pod install

the pods seem to do the linking correctly

Auto-linking React Native modules for target AwesomeProject: RNCMaskedView, RNGestureHandler, RNReanimated, RNScreens, RNVectorIcons, ReactNativeNavigation, and react-native-safe-area-context

Then I restarted the simulator and ran

npm start ios

but I keep getting the same error. I am a bit desperate if you guys have any suggestion I am more than welcome to test them.

Here is my package.json

{
  "name": "awesomeproject",
  "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 ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "pod-install": "^0.1.30",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-navigation": "^7.24.3",
    "react-native-reanimated": "^2.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-vector-icons": "^9.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

Thanks

Answer 1

Found the issue, you need to run your code in xcode once to link the libraries after this is done you can run from npm run as usual.