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"
}
}