I am trying to make a drawer menu on my app. I have followed this installation guide here.
I have this code
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
My app fails to render when I try to create the drawer object with the createDrawerNavigator() hook. I get the error
Invariant Violation: new NativeEventEmitter() requires a non-null argument..
I have looked at some answers here that say I should delete the pod and the pod.lock file and then install the pod again, but I still get the same issue even after doing this and reinstalling the pods.
Any insight on what could be wrong is appreciated!!
Related
I am upgrading a react-native app from version react-navigation V4.x to version 6.x. I have this piece of code
export const AppNavigationContainer = createAppContainer(
createNavigator(
AppContainer as any, //this is the navigation view which will be dislpayed.
StackRouter(NavigatorRoutes, NavigatorConfig), // the routers
NavigatorConfig // the configuration
)) as unknown as React.ComponentType<AppContainerProps>;
which I am trying to convert into version 6.x
I am aware that the createAppContainer will be replaced by <NavigationContainer><NavigationContainer /> , Which will take the custom navigator, but I am not able to understand how to convert this piece of code which creates the custom navigator. The router being passed as the second parameter has been converted, the only problem is how to get it all together using the new custom hook useNavigationBuilder() provided.
I am using NativeBase with my ReactNative App.
It is running ok.
However there is a warning that is bugging me a little bit.
How do I fix the warning below?
When server rendering, you must wrap your application in an
to ensure consistent ids are generated between the
client and server.
FormControl#http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.wenyang.DanceConnectyCube:162364:111
RCTView View
First install this package
npm i #react-aria/ssr or yarn add #react-aria/ssr
Then import it into your App.js
import {SSRProvider} from '#react-aria/ssr';
Then do this
const App = () => {
return (
<SSRProvider>
<NativeBaseProvider>
<App />
</NativeBaseProvider>
</SSRProvider>
);
};
I have a component that uses #stripe/stripe-react-native named NativeCheckout.
This package does not work on web (Chrome), and when I import it I get an error:
Failed to compile
/home/joey/Projects/project/project_frontend/node_modules/#stripe/stripe-react-native/lib/module/components/StripeProvider.js
Module not found: Can't resolve '../../package.json' in '/home/joey/Projects/project/project_frontend/node_modules/#stripe/stripe-react-native/lib/module/components'
So if I run it in my browser, I do not want this component. This component is only rendered on native apps. I have found three alternative ways to import the Component. If my code is working fine then I add any of the follow lines, the above error is happening. I thought this would not load in the problem code.
const loadNative = async () => {
await import("./NativeCheckout")
}
const NativeCheckout = lazy(() => import("./NativeCheckout"));
const NativeCheckout = lazy(() => import("./NativeCheckout"));
Does anyone know a way to make this work?
TIA
I am using the package react-native-coreml and running into this error at startup.
My intention is to use this package to use a CoreML package in my react native app. I am running this within EXPO if that makes any difference.
I can't even run the app. These two errors are together.
Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
and
TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
- node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
Obviously the first error isn't useful, just including for thoroughness.
My implementation is as follows:
import React, { useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import FaceScanner from './FaceScanner';
import { classifyImage } from "react-native-coreml";
const Onboarding = () => {
const [imageURL, setImageURL] = useState('');
const [tested, setTested] = useState(false);
console.log(imageURL)
if (imageURL !== '' && !tested) {
async () => {
// const { label, confidence } = await classifyImage(imageURL, './model.mlmodelc')
setTested(true);
console.log("The image is a " + label + ". I think. ")
}
}
...
edit I have ejected from expo as per a comment's suggestion. I am now encountering these errors.
BUNDLE ./index.js
ERROR TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
LOG Running "main" with {"rootTag":1,"initialProps":{}}
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
react-native-coreml is a library with native extensions that do not work in the expo managed workflow currently. you can read about the managed workflow limitations in the expo docs.
if you'd like to use it, run expo eject and build the project in xcode
We have been investigating issues in our app where we just see a white screen and no crash is logged. Goes for both Android and iOS
The issue seem to be related to the use of async/await or promises.
We have found that we can reproduce the white screen issue locally when using async/await or promises.
The issue can be reproduced with the following code (tried to simplify it as much as possible). Replace App.js in a new project with the following:
import React, {Fragment} from 'react';
import {Text} from 'react-native';
class App extends React.Component {
state = {isMounted: false};
async componentDidMount() {
await Promise.resolve(1);
this.setState({isMounted: true});
}
render() {
if (this.state.isMounted) {
this.state.isMounted.test();
}
return (
<Fragment>
<Text>test</Text>
</Fragment>
);
}
}
export default App;
I also pushed a test project on github
I would expect the app to crash as isMounted does not contains a test method.
When running locally I get the red box stating that an error occurred as expected
TypeError: this.state.isMounted.test is not a function. (In 'this.state.isMounted.test()', 'this.state.isMounted.test' is undefined)
This error is located at:
in App (at renderApplication.js:40)
in RCTView (at View.js:35)
in View (at AppContainer.js:98)
in RCTView (at View.js:35)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:39)
...
but when running a release build the app does not crash and no error is reported. This makes it very hard for us to find and fix issues like this as we are totally blind.
If I comment out
await Promise.resolve(1);
It crash as expected in a release build
React Native version: 0.60.5
Are we wrong in assuming that the above code should result in an app crash?
Found that error-boundaries was the missing piece. Implementing an error boundary on the root level allows us to manually log these errors to our crash handling system.
As a side note I can also mention that if you use redux-saga and you throw an error, the error by default seem to be swallowed. So if you want to handle these uncaught errors you can implement the onError option in createSagaMiddleware