Nativebase: ActionSheet.show crash 2.1.5

[fbacker]

Upgraded react-native and nativebase. No changes in my code. Running on iOS.

versions

react: 16.0.0-alpha.12
react-native: 0.45.1
native-base: 2.1.5

Expected behaviour

ActionSheet.show will show the ActionSheet

Actual behaviour

App crashes

Cannot read property 'showActionSheet' of null
Function.show
ActionSheet.js:128:85

[fbacker]

If I add this on a random view-container it works

<ActionSheet ref={(c) => { ActionSheet.actionsheetInstance = c; }} />

[SupriyaKalghatgi]

"dependencies": {
    "native-base": "^2.1.5",
    "react": "16.0.0-alpha.12",
    "react-native": "0.45.1"
  },

[fbacker]

My Application has a depth structure of subpages using react-native-router-flux. Maybe that can cause the issue?

[shivrajkumar]

@fbacker For ActionSheet to work, it has to be called inside Container component of NativeBase

[fbacker]

Sorry, I don't understand this.

I'm calling ActionSheet from a component. Now I've also tried to bubble up the event to a component that has Container -> Content in the render(). Still same issue.

[shivrajkumar]

@fbacker Not able reproduce the issue on our end.
Can post the code snippet of it. Or create a test repo with the issue for us to look into it.

[fbacker]

@shivrajkumar Will try to sit down in a couple of days and create an empty project and add router-flux-navigation and reproduce the issue. Thanks.

[sankhadeeproy007]

@fbacker If your App is ios-only, you might as well use the native actionsheet that comes bundled with react-native.

[fbacker]

Sorry no, both ios and android. It works for me to put the ActionSheet component in the render view. Maybe only me that has this issue :)

[shivrajkumar]

@fbacker This has been fixed in v2.2.0. But there is a slight change in the use case. Check the docs for the latest

[Blue-Lan]

I encountered the same issue by the condition of remounting a component wrapped by Root, I'm using wix/react-native-navigation, after popping a screen which is wrapped by Root and pushing it again, the ActionSheet.actionsheetInstance._root becomes null.
react: 16.0.0-alpha.12
react-native: 0.46
native-base: 2.2.1
Currently I have no idea to deal with that.

[lone-cloud]

This was not fixed. I see this happen infrequently with the same stack trace as @fbacker on the latest native-base build.

[SupriyaKalghatgi]

@hoboman313 Please share code snippet with screenshot and package.json

[jxeeno]

I encountered the same issue by the condition of remounting a component wrapped by Root, I'm using wix/react-native-navigation, after popping a screen which is wrapped by Root and pushing it again, the ActionSheet.actionsheetInstance._root becomes null.

Did a fair bit of debugging. The culprit is the ref setter for ActionSheetContainer and ToasterContainer in the <Root /> element (Root.js).

After remounting, new Toast and ActionSheets instances are created but aren't set because it checks if it was already previously set:

<View ref={c => (this._root = c)} {...this.props} style={{ flex: 1 }}>
    {this.props.children}
    <Toast
        ref={c => {
            if (!Toast.toastInstance) Toast.toastInstance = c;
        }}
    />
    <ActionSheet
        ref={c => {
            if (!ActionSheet.actionsheetInstance) ActionSheet.actionsheetInstance = c;
        }}
    />
</View>

You can get around it by simply removing the check if (!ActionSheet.actionsheetInstance) or adding an additional check to see if ActionSheet.actionsheetInstance._root is null:

<View ref={c => (this._root = c)} {...this.props} style={{ flex: 1 }}>
    {this.props.children}
    <Toast
        ref={c => {
            Toast.toastInstance = c;
        }}
    />
    <ActionSheet
        ref={c => {
            ActionSheet.actionsheetInstance = c;
        }}
    />
</View>

[akhil-geekyants]

It will be very helpful if someone create a test repo to reproduce this issue.

[wish-master]

I solved this problem for myself by adding
componentDidMount() { ActionSheet.actionsheetInstance = null; }
in caller component. After that ActionSheet reinit every time I enter my page.

[Rutulpatel7077]

Same issue after changing tabs from tab navigator it does not work

[rungwe]

Same issue here, it was working initially and all of sudden this just started :(

[SupriyaKalghatgi]

Fixed with 2.5.0

[Rutulpatel7077]

Awesome Thanks!

[gogulanareshkw]

"native-base": "^2.8.1",        
"react": "^16.4.1",
"react-native": "^0.55.4",

please help me, am getting error as cannot read property 'showActionSheet' of null

to reproduce this issue follow these steps:

• actionsheet available in page 1, for the first actionsheet is working
• navigate to page 2 from page1, and then page 3 from page2 (page1 -> page2 -> page3)
  -then goback to page1 and click actionsheet, now getting error

Thanks

[gogulanareshkw]

Hi @SupriyaKalghatgi , please check once above mentioned issue

[jayan2019]

Hi @gogulanareshkw I also had same error. But I have fixed it by following method. It's not a good practice, but it worked for me!

actionSheetPressed = () =>{ this.setState({ action_sheet_pressed: true }); ActionSheet.show( { options: ACTION_BUTTONS, title: "Choose an option for action" }, buttonIndex => this.setState({ clicked: ACTION_BUTTONS[buttonIndex] }) ); };