New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unhandled JS Exception: Cannot read property '_root' of null #739
Comments
@tranren it seem to work fine .Please share the code snippet and the version of NB ,React and RN that you are using . |
This is my code:
The first time that I call the But, when the |
Have exactly the same problem, the crash only occurs after navigating (push), going back and hitting ActionSheet.show again. Tested on iOS. Edit: react-native@0.42.3 |
@joaofranca Yes, I'm getting the exact error |
@GeekRishabh |
I was having this issue in an app based on https://github.com/start-react/native-starter-kit which plays animations between different pages in the app. Each page had its own container, which worked fine in past versions of the starter-kit, but is now breaking because there are animations in which both containers are briefly onscreen. Because of this, the timeline is:
As a component unmounts in React, it runs its ref function with 'null'. This is causing the error that we're seeing in this thread, since there is a single class of ActionSheet with an instance bound to it, and the animations between pages mean that the unmount is the most recent ref-defining event, setting it to null. The fix in my case was to wrap the app in a single container that lives above the AppNavigator and replace the per-page containers with views. A little bit of styling later and the app was back to looking the same and the ActionSheet was working as expected! Hope this is helpful for some of the other people having this issue as well. I'm not sure that there is a good solution to make this more robust within NativeBase, but if there is that would be fantastic. |
The problem seems to be in Something like this: import React, { Component } from 'react';
import { View } from 'react-native';
import { ActionSheet, Button, Text } from 'native-base';
class Foo extends Component {
constructor(props) {
super(props);
this.actionSheet = null;
}
render() {
return (
<View>
<Button onPress={() => this.showActionSheet()}>
<Text>Action Sheet!</Text>
</Button>
<ActionSheet ref={(c) => { this.actionSheet = c; }} />
</View>
);
}
showActionSheet() {
if ( this.actionSheet !== null ) {
// Call as you would ActionSheet.show(config, callback)
this.actionSheet._root.showActionSheet({options: [1,2,3]}, (i) => console.log(i));
}
}
} |
Having the same exact issue here when calling |
Fixed with 2.1.5 |
I was still getting this error after updating to 2.1.5, it seems like the component I am using the actionsheet on is only just getting unmounted right before it gets mounted again and the check in Container still thinks it exists. I managed to get around it by making sure ActionSheet.actionsheetInstance is null when the component unmounts.
Edit: Actually that didn't fix fully fix my problem, as the components are not being unmounted so I couldn't use Toast on the login if I started on the main screen. Instead I'm setting the actionsheetInstance and toastInstance to null in the willMount of both the login and main screens.
|
|
Is there any fix for this? My RN Version is 0.44.0 and native-base 2.1.5 |
We have again tested it out on our projects again and it is working. Somebody please link me to a repo where I can replicate it. Will be considered resolved otherwise. |
It's working now. Thanks |
I'm still facing this issue on NB version 2.2.0 and react-native: 0.44.0. |
I get React: 16.0.0-alpha.12 MY code:
|
@peterchibunna I got the same issue like you. But it was work properly previously. Now not. Is this affected from another 3rd party library? |
thanks @pankaj-ag I'm using a tabbed app component (https://github.com/wix/react-native-navigation) I can't seem to find where I might wrap with Root- do you have any ideas? |
Hi, I have this issue too, with the ActionSheet component. Gist: https://gist.github.com/marcusvbp/67cf22925cb5fc38aa11f85efc7c7e83 How to reproduce: Package.json: "native-base": "^2.3.1", |
@marcusvbp Make sure to wrap the app with |
@shivrajkumar hi, the Root component is needed in all scenes with native-base elements or only in the avatar-changer.js component? Thanks. |
@shivrajkumar I have wrapped my register.js component with the Root component but the error persists. I have tested all theses cases, and all returns the same error: 1 - Root component in scene component (register.js) and the avatar-changer.js |
thanks @peterchibunna working for me |
@stephenfromrobin hi! I have the same problem with the wix/react-native-navigation. Did you solve it? |
@pedrogarciyalopez Sorry, I still haven't found a solution! |
Wrap your whole application within |
@wkirby solution helped me figure out a simpler solution that fixed this bug for me for both Toast and ActionSheet. I added the following code to my topmost component (i.e., the same file where I wrapped my whole application with
To understand why this works, look at |
@marcusvbp the problem is still there because |
@peterchibunna thanks, I get it now :) |
Same issue but with the Toast, even after wrapping my entire app inside Here is my entry point
here is my dummy HomeScreen when I'm trying to use Toast
Can any of you suggest me something, please.... |
@refucktor Please check for this implementation in NativeBase KitchenSink |
@kesiena115 this worked for me as well, thank you! 😄 My top most component looks like this right now: import { Root, Toast } from 'native-base';
export default class AppComp extends Component {
componentWillUnmount() {
Toast.toastInstance = null;
}
render() {
return (
<Provider store={store}>
<Root>
<Routes />
</Root>
</Provider>
)
}
} |
thanks @rooque ! |
My previous suggestion above eventually gave me problems. The ActionSheet would suddenly stop working after a few days i.e., it won't show when I click on the button that's meant to display it. I don't know what was causing this and frankly, I got tired of trying to fix this component. I eventually switched to react-native-modal a few weeks ago as a replacement for the ActionSheet. Best decision ever! |
We have not faced it so far, how can that work today and not tomorrow? |
What does it mean " wrap your topmost component inside |
@manish-appface See example for Actionsheet here |
@akhil-geekyants It helped.Thank you. |
Wrap your all tags in render method with , its work for me |
@rooque, your solution worked for me. |
actually, none of solutions work. (testing on Android 7) If you put down application with back-button, then switch again to application, first you get warning about ToastContainer (yellow screen), described in #819 . And if you try to show toast, you got this error. In my case, root component is StyleProvider then Root, but it doesnt matter, I've tryed all permutations with same result - this error. I can only guess that 'static' saving instance of Root (in Root) is not best way to deal with. And maybe RN is doing something strange and different when starting application for the first time, and re-opening application (from background). |
Actionsheet error
Actionsheet.js:94:79
The text was updated successfully, but these errors were encountered: