I get this error when i click ‘AppSettings’ button
Node version: v18.20.3
Yarn version: 1.22.22
I tried so much things like, install pods after cleaning all cache and removing currents Pods and lock files.
And also upgrade and downgrade versions of same packages like @react-navigation/native, react-native-safe-area-context
**Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.
This error is located at:
in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at NativeStackView.native.tsx:343)
in NativeStackView (at createNativeStackNavigator.tsx:69)
in Unknown (at createNativeStackNavigator.tsx:68)
in NativeStackNavigator (at AppSettings.navigator.tsx:15)
in AppSettingsNavigator (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:217)
in RCTView (at View.js:32)
in View (created by TabBarElement)
in RNSScreen (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (at src/index.native.tsx:314)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:313)
in InnerScreen (at src/index.native.tsx:566)
in Screen (created by ResourceSavingScene)
in ResourceSavingScene (created by TabBarElement)
in RNSScreenContainer (at src/index.native.tsx:400)
in ScreenContainer (created by TabBarElement)
in RCTView (at View.js:32)
in View (created by TabBarElement)
in TabBarElement (created by BottomTabNavigator)
in BottomTabNavigator (at App.tsx:78)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at App.tsx:77)
in Observer (at App.tsx:75)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in WaCon(RootComponent) (at renderApplication.js:60)
LOG BleManagerDiscoverPeripheral listener removed!
LOG BleManagerStopScan listener removed!
LOG BleManagerDisconnectPeripheral listener removed!
LOG BleManagerDidUpdateValueForCharacteristic listener removed!
LOG BleManagerDidUpdateState listener removed!
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from /Users/menduhcaylak/Desktop/furkan/wacon/node_modules/react-native/index.js:
None of these files exist:
* node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
* node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
16 | import typeof Button from './Libraries/Components/Button';
> 17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
| ^
18 | import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
19 | import typeof FlatList from './Libraries/Lists/FlatList';
20 | import typeof Image from './Libraries/Image/Image';
My package.json
{
"name": "wacon",
"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",
"build": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"postinstall": "npx jetify"
},
"dependencies": {
"@miblanchard/react-native-slider": "^2.1.0",
"@react-native-async-storage/async-storage": "^1.24.0",
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.5.2",
"@types/sync-storage": "^0.4.3",
"axios": "^1.7.2",
"convert-string": "^0.1.0",
"css-to-react-native": "^3.0.0",
"mobx": "^6.5.0",
"mobx-react": "^7.3.0",
"react": "^17.0.2",
"react-native": "0.67.4",
"react-native-animated-nav-tab-bar": "^3.1.8",
"react-native-ble-manager": "^8.0.2",
"react-native-country-flag": "^2.0.2",
"react-native-device-info": "^11.1.0",
"react-native-dropdownalert": "^4.5.1",
"react-native-fast-image": "^8.6.3",
"react-native-floating-action": "^1.22.0",
"react-native-gesture-handler": "2.14.1",
"react-native-location": "^2.5.0",
"react-native-paper": "^5.12.3",
"react-native-paper-dates": "^0.8.7",
"react-native-safe-area-context": "5.0.0",
"react-native-screens": "3.29.0",
"react-native-scroll-wheel-picker": "^0.0.2",
"react-native-switch-selector": "^2.2.1",
"react-native-vector-icons": "^9.1.0",
"react-native-view-slider": "^1.1.1",
"react-native-wheel-scrollview-picker": "^2.0.4",
"styled-components": "^5.3.5",
"sync-storage": "^0.4.2"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-decorators": "^7.17.8",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@types/convert-string": "^0.1.1",
"@types/jest": "^26.0.23",
"@types/react-native": "^0.66.15",
"@types/react-native-vector-icons": "^6.4.10",
"@types/react-test-renderer": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^5.7.0",
"@typescript-eslint/parser": "^5.7.0",
"babel-jest": "^26.6.3",
"eslint": "^7.14.0",
"jest": "^26.6.3",
"jetifier": "^2.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2",
"typescript": "^4.4.4"
},
"resolutions": {
"@types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
My App.tsx:
import * as React from 'react';
import MyDevicesScreen from './src/scenes/MyDevices.screen';
import appStore from './src/shared/stores/App.store';
import IconFeather from 'react-native-vector-icons/Feather';
import IconMaterial from 'react-native-vector-icons/MaterialCommunityIcons';
import DropdownAlert from 'react-native-dropdownalert';
import deviceHelper from './src/shared/helpers/Device.helper';
import {SettingsStackNavigator} from './src/navigations/SettingsStack.navigator';
import {Alert, useEffect} from 'react-native';
import {EventArg, NavigationContainer} from '@react-navigation/native';
import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
import {AnimatedTabBarNavigator} from 'react-native-animated-nav-tab-bar';
import {LogBox} from 'react-native';
import {navigationRef} from './src/shared/helpers/RootNavigation.helper';
import {translate} from './src/services/translations';
import configStore from './src/shared/stores/Configs.store';
import {observer, Observer} from 'mobx-react';
import {AppSettingsNavigator} from './src/navigations/AppSettings.navigator';
import {getData} from './src/shared/stores/Storage.store';
LogBox.ignoreAllLogs();
type BottomTabScreenParamList = {
MyDevices: undefined;
DeviceSettings: undefined;
Profiles: undefined;
AppSettings: undefined;
};
type Props = BottomTabScreenProps<BottomTabScreenParamList, 'MyDevices'>;
const Tabs = AnimatedTabBarNavigator();
const App = () => {
function checkIsDeviceConnected(
e: EventArg<string, true, undefined>,
navigation: Props['navigation'],
) {
if (!appStore.isConnected) {
// Prevent default behavior
e.preventDefault();
Alert.alert(translate('alert'), translate('no_device_connected_2'), [
{
text: translate('okay'),
onPress: () => {
if (appStore.isConnected) {
navigation.navigate('MyDevices');
}
},
},
]);
} else {
deviceHelper.getAllSettings();
}
}
const TabBarIcon = (props: any) => {
return props.fontName === 'feather' ? (
<IconFeather
name={props.name}
size={props.size ? props.size : 24}
color={props.tintColor}
/>
) : props.fontName === 'material' ? (
<IconMaterial
name={props.name}
size={props.size ? props.size : 24}
color={props.tintColor}
/>
) : null;
};
return (
<Observer>
{() => (
<NavigationContainer ref={navigationRef}>
<Tabs.Navigator
initialRouteName="MyDevices"
tabBarOptions={{
activeTintColor: '#2F7C6E',
inactiveTintColor: '#222222',
}}
appearance={{
shadow: true,
floating: false,
}}>
<Tabs.Screen
name={'MyDevices'}
component={MyDevicesScreen}
options={{
title: translate('my_devices'),
tabBarIcon: ({focused, color}) => (
<TabBarIcon
focused={focused}
fontName="feather"
tintColor={color}
name="search"
/>
),
}}
/>
<Tabs.Screen
name={'DeviceSetttings'}
component={SettingsStackNavigator}
listeners={({navigation}) => ({
tabPress: e => {
checkIsDeviceConnected(e, navigation);
},
})}
options={{
title: translate('device_settings'),
tabBarIcon: ({focused, color}) => (
<TabBarIcon
focused={focused}
fontName="material"
tintColor={color}
name="timer-cog-outline"
/>
),
}}
/>
<Tabs.Screen
name={'AppSetttings'}
component={AppSettingsNavigator}
listeners={({navigation}) => ({
tabPress: () => {
navigation.navigate('PhoneSettings');
},
})}
options={{
title: translate('app_settings'),
tabBarIcon: ({focused, color}) => (
<TabBarIcon
focused={focused}
fontName="feather"
tintColor={color}
name="settings"
/>
),
}}
/>
</Tabs.Navigator>
<DropdownAlert
closeInterval={700}
ref={ref => {
if (ref) {
appStore.setDropDownAlertRef(ref);
}
}}
/>
</NavigationContainer>
)}
</Observer>
);
};
export default App;
My AppSettingsNavigator.navigator.tsx:
import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import PhoneSettings from '../scenes/PhoneSettings.screen';
import PhoneInfo from '../scenes/PhoneInfo.screen';
const Stack = createNativeStackNavigator();
const screenOptionStyle = {
headerShown: false,
};
const AppSettingsNavigator = () => {
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen name="PhoneSettings" component={PhoneSettings} />
<Stack.Screen name="PhoneInfo" component={PhoneInfo} />
</Stack.Navigator>
);
};
export {AppSettingsNavigator};
My PhoneSettings.tsx:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
View,
ScrollView,
} from 'react-native';
import Header from '../components/Header.component';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {NavigationProp, ParamListBase} from '@react-navigation/native';
import {translate} from '../services/translations';
const AppSettings = ({
navigation,
}: {
navigation: NavigationProp<ParamListBase>;
}) => {
return (
<SafeAreaView style={styles.container}>
<Header onBackPress={navigation.goBack} />
<ScrollView style={styles.scrollStyle}>
<TouchableOpacity
onPress={() => {
navigation.navigate('PhoneInfo');
}}>
<View style={styles.button}>
<Icon size={50} name={'cellphone-information'} color={'#019267'} />
<Text style={styles.buttonLabels}>
{translate('phone_settings')}
</Text>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
button: {
height: 100,
backgroundColor: 'white',
marginHorizontal: 10,
marginVertical: 5,
borderRadius: 5,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 25,
},
buttonLabels: {
paddingLeft: 30,
fontSize: 23,
},
scrollStyle: {
marginBottom: 10,
},
});
export default AppSettings;