enter image description here
ERROR Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.
This error is located at:
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in TechCareer(RootComponent), js engine: hermes
I added the react-navigation and then it started giving me trouble. I've checked a lot of places, but I haven't found a solution to the problem. I could use some help
NavigationContainer not working
It sounds like you either deleted or forgot to install react-native-safe-area-context. To be safe, you might as well install react-native-screens as well.
For react-native project
npm install react-native-screens react-native-safe-area-context && cd ios && npx pod install && cd ..
For expo
npx expo install react-native-screens react-native-safe-area-context
More info on setup
Related
When using an expo managed project and running the app with expo start --dev-client I get the following error:
`Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.
This error is located at:
in RNSScreenStackHeaderConfig (created by HeaderConfig)
in HeaderConfig (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at node_modules/expo-font/build/FontHooks.js:26:33 in loadAsync.then$argument_0
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.`
When I run the project through expo go and just expo start it works perfectly.
This is the error status
ERROR Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView"was not found in the UIManager.
This error is located at:
in RNGestureHandlerRootView (at GestureHandlerRootView.android.tsx:17)
in GestureHandlerRootView (at DrawerView.tsx:317)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:85)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at DrawerView.tsx:316)
in DrawerView (at createDrawerNavigator.tsx:126)
in Unknown (at createDrawerNavigator.tsx:125)
in DrawerNavigator (at App.js:159)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at App.js:158)
in App (at safeTransportPolice/index.js:15)
in Provider (at safeTransportPolice/index.js:14)
in Container (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 safeTransportPolice(RootComponent) (at renderApplication.js:60)
I'm new to react native and i ran into a test problem.
First of all my application runs correctly.
The problem only occurs when i want to test my app with jest AND when there is an icon inside my app.
The following message tells me that there is probably a lazy import loading that conflicts with jest in some ways but i don't know how to workaround or fix this :
ReferenceError: You are trying to 'import' a file after the Jest environment has been torn down.
I've tested my app without icon="camera" and the test runs well so it is very related to icons.
The app also uses react-native-paper.
How can i test my app even when there are icons inside it ?
Here is a minimal App.js that reproduce the bug :
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { Button } from 'react-native-paper';
export default function App() {
return (
<PaperProvider>
<View style={styles.container}>
<Text>Thi is a test</Text>
<Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
Press me
</Button>
<StatusBar style="auto" />
</View>
</PaperProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
The jest test :
import React from 'react';
import renderer from 'react-test-renderer';
import App from './App';
jest.mock('react-native-vector-icons/FontAwesome', () => 'Icon');
describe('<App />', () => {
it('has 1 child', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree.children.length).toBe(1);
});
});
The jest run log :
> # test C:\Users\slash\workspace\runpick
> jest
Expected react-native/jest-preset to define transform[^.+\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$]
react-native/jest-preset contained different transformIgnorePatterns than expected
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get Text [as Text] (node_modules/react-native/index.js:118:12)
at Icon.render (node_modules/#expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:58)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
PASS ./App.test.js
<App />
√ has 1 child (465ms)
console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Icon`.
in Icon (created by Icon)
in Icon (at MaterialCommunityIcon.tsx:87)
in Icon (created by Context.Consumer)
in ThemedComponent (created by withTheme(Icon))
in withTheme(Icon) (at Button.tsx:286)
in View (created by View)
in View (at Button.tsx:285)
in View (created by View)
in View (at Button.tsx:283)
in View (created by View)
in View (created by TouchableHighlight)
in TouchableHighlight (created by ForwardRef)
in ForwardRef (at TouchableRipple/index.native.tsx:91)
in TouchableRipple (created by Context.Consumer)
in ThemedComponent (created by withTheme(TouchableRipple))
in withTheme(TouchableRipple) (at Button.tsx:267)
in View (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)
in Surface (created by Context.Consumer)
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (at Button.tsx:257)
in Button (created by Context.Consumer)
in ThemedComponent (created by withTheme(Button))
in withTheme(Button) (created by App)
in View (created by View)
in View (created by App)
in ThemeProvider (at Provider.tsx:21)
in View (created by View)
in View (at PortalHost.tsx:128)
in Portal.Host (at Provider.tsx:17)
in Provider (created by App)
in App
at warningWithoutStack (node_modules/react/cjs/react.development.js:167:32)
at warning (node_modules/react/cjs/react.development.js:638:27)
at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2035:5)
at Icon.render (node_modules/#expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:31)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
console.error
The above error occurred in the <Icon> component:
in Icon (created by Icon)
in Icon (at MaterialCommunityIcon.tsx:87)
in Icon (created by Context.Consumer)
in ThemedComponent (created by withTheme(Icon))
in withTheme(Icon) (at Button.tsx:286)
in View (created by View)
in View (at Button.tsx:285)
in View (created by View)
in View (at Button.tsx:283)
in View (created by View)
in View (created by TouchableHighlight)
in TouchableHighlight (created by ForwardRef)
in ForwardRef (at TouchableRipple/index.native.tsx:91)
in TouchableRipple (created by Context.Consumer)
in ThemedComponent (created by withTheme(TouchableRipple))
in withTheme(TouchableRipple) (at Button.tsx:267)
in View (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)
in Surface (created by Context.Consumer)
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (at Button.tsx:257)
in Button (created by Context.Consumer)
in ThemedComponent (created by withTheme(Button))
in withTheme(Button) (created by App)
in View (created by View)
in View (created by App)
in ThemeProvider (at Provider.tsx:21)
in View (created by View)
in View (at PortalHost.tsx:128)
in Portal.Host (at Provider.tsx:17)
in Provider (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.272s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\slash\AppData\Roaming\npm-cache\_logs\2020-07-07T07_26_11_064Z-debug.log
The terminal process terminated with exit code: 1
Terminal will be reused by tasks, press any key to close it.
Create a jest setup file which contains the following or add this to your existing jest setup file:
jest.mock('react-native-paper');
Then make sure your setup file is being read by your jest config, either in the jest block of package.json or in your jest config file:
module.exports = {
preset: 'react-native',
setupFiles: ['./pathToJestSetupFile.js'],
...
}
Doing the above fixed the following error I was seeing that is similar to yours:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get View [as View] (node_modules/react-native/index.js:150:12)
at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:43)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
● Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Portal.Host`.
in Portal.Host (created by Provider)
in Provider (created by App)
in App".
at BufferedConsole.error (node_modules/jest-runner/node_modules/#jest/console/build/BufferedConsole.js:165:10)
at registerError (node_modules/react-native/Libraries/LogBox/LogBox.js:169:15)
at errorImpl (node_modules/react-native/Libraries/LogBox/LogBox.js:48:23)
at BufferedConsole.console.error (node_modules/react-native/Libraries/LogBox/LogBox.js:25:15)
at printWarning (node_modules/react/cjs/react.development.js:315:30)
at error (node_modules/react/cjs/react.development.js:287:5)
at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:16)
at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get AccessibilityInfo [as AccessibilityInfo] (node_modules/react-native/index.js:9:12)
at Provider.componentWillUnmount (node_modules/react-native-paper/lib/commonjs/core/Provider.js:256:20)
at callComponentWillUnmountWithTimer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10194:12)
at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9897:10)
at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10073:31)
● Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "The above error occurred in the <Context.Provider> component:
in Portal.Host (created by Provider)
in Provider (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit to learn more about error boundaries.".
● Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Portal.Host`.
[17:28:29] Invariant Violation: Could not find "store" in the context of
"Connect(AppNavigator)". Either wrap the root component in a`<Provider>`
or pass a custom React context provider to <Provider> and the corresponding
React context consumer to Connect(AppNavigator) in connect options.
This error is located at:
in Connect(AppNavigator) (at App.js:17)
in RCTView (at View.js:44)
in ActionSheet (at ActionSheetProvider.js:56)
in ActionSheetProvider (at App.js:16)
in ApolloProvider (at App.js:15)
in App (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)
this error is showing in my ios screen after downloading java script in my device.
ReferenceError: Can't find variable: Text
This error is located at:
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
Import Text from react native.
import {
View,
Text,
} from 'react-native';
Importing react-native is not enough here.
Module not found: Can't resolve 'react-native'
Instead, you need an additional package:
yarn add react-native-web
Now you are able to use
import {Text} from 'react-native'