0

I have installed all related packages 4 times over, done pod install and reinstalled node modules, but still after running yarn iOS I get this error. Ive installed @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

App.js:

import "react-native-gesture-handler";
import React, { useState, useEffect, content, hiddenTranslate } from "react";
import { View, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons/Ionicons";

import HomeScreen from "./src/screens/HomeScreen";
import MatchesScreen from "./src/screens/MatchesScreen";

const homeName = "Home";
const matchesName = "Matches";

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <View style={styles.pageContainer}>
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName={homeName}
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;
              let rn = route.name;

              if (rn === homeName) {
                iconName = focused ? "home" : "home-outline";
              } else if (rn === matchesName) {
                iconName = focused ? "list" : "list-outline";
              }

              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
          screenOptions={{
            activeTintColor: "tomato",
            inactiveTintColor: "grey",
            labelStyle: { paddingBottom: 10, fontSize: 10 },
            style: { padding: 10, height: 70 },
          }}
        >
          <Tab.Screen name={homeName} component={HomeScreen} />
          <Tab.Screen name={matchesName} component={MatchesScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
};

const styles = StyleSheet.create({
  pageContainer: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
  },
});

export default App;

Terminal:

 ERROR  Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.
This error is located at:
    in RNSScreen (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at src/index.native.tsx:260)
    ...

My package.json looks like this:

{
  "name": "travel",
  "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-async-storage/async-storage": "^1.17.7",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-firebase/app": "^15.1.1",
    "@react-native-firebase/auth": "^15.1.1",
    "@react-native-firebase/firestore": "^15.1.1",
    "@react-native-google-signin/google-signin": "^8.0.0",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/drawer": "^6.4.2",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.2",
    "expo-status-bar": "^1.4.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-calendars": "1.260.0",
    "react-native-gesture-handler": "^2.7.1",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-ico-material-design": "^3.3.1",
    "react-native-image-crop-picker": "^0.38.0",
    "react-native-maps": "^0.31.1",
    "react-native-reanimated": "^2.10.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screen": "^1.0.1",
    "react-native-screens": "^3.18.1",
    "react-native-svg": "^13.4.0",
    "react-native-vector-icons": "^9.2.0",
    "reanimated-bottom-sheet": "^1.0.0-alpha.22"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/runtime": "^7.18.6",
    "@react-native-community/eslint-config": "^3.0.3",
    "babel-jest": "^28.1.2",
    "eslint": "^8.19.0",
    "jest": "^28.1.2",
    "metro-react-native-babel-preset": "^0.71.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}
  • After installing the packages, did you try cleaning the build on Xcode? Sometimes the changes of packages does not reflect in Xcode. Please try that. – Ubaid Oct 13 '22 at 09:07
  • I have just cleaned it but still get ""RNSScreen" was not found." error. – user20142842 Oct 13 '22 at 11:56
  • i got same issue any solution ... – Basi Oct 13 '22 at 12:02
  • https://stackoverflow.com/questions/66921263/invariant-violation-requirenativecomponent-rnsscreen-was-not-found-in-the-ui?rq=1 try some of the answers here, didnt work for me though. – user20142842 Oct 13 '22 at 12:19

0 Answers0