Bug Components actionsheet error: null is not an object (evaluationg 'this.actionsheetInstance._root.showActionSheet')

@GeekyAnts, @akhil-geekyants: Hi, I’m using the ActionSheet component on android. Link: https://docs.nativebase.io/Components.html#actionsheet-def-headref Every time I always make the same mistake, see the picture:

I tried using the Root tag and then also the Container, only the Root, even the Container but always the same mistake.

You know how to fix the problem, it’s a problem that you always get, every single time. Once it’s done, the next turn stops working.

react-native, react and native-base version

	"native-base": "^2.3.3",
	"react": "16.0.0",
	"react-native": "0.50.4",

Expected behaviour

See picture.

Actual behaviour

As soon as you click the button you will see that error message.

Steps to reproduce (code snippet or screenshot)

import React, { Component } from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import { ActionSheet, Root, Container, Content } from "native-base";  // 2.3.3
var BUTTONS = [
  { text: "a", icon: "play", iconColor: "#2c8ef4" },
  { text: "b", icon: "shuffle", iconColor: "#000" },
  { text: "c", icon: "clipboard", iconColor: "#ea943b" },
  { text: "d", icon: "trash", iconColor: "#fa213b" },
];
var CANCEL_INDEX = 2;

export default class App extends Component {
  render() {
    return (
      <Root>
        <Container>
          <Content>
            <TouchableOpacity
              onPress={() =>
              ActionSheet.show({
              options: BUTTONS,
              cancelButtonIndex: CANCEL_INDEX,
              title: "title"
              },
              buttonIndex => {
                alert(buttonIndex)
              }
              )}
              underlayColor="transparent"
              activeOpacity={1}>
              <Text style={styles.text}>Name</Text>
            </TouchableOpacity>
          </Content>
        </Container>
      </Root>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    color: '#34495e',
  },
});

Link expo: https://snack.expo.io/HyGhITKef

Is the bug present in both ios and android or in any one of them?

Both specifically on android.

Any other additional info which would help us debug the issue quicker.

I’ve tried all the solutions that I’ve found that I’ve found here, none of them work.

[akhil-ga]

@Angelk90 For ActionSheet to work, you need to wrap your topmost component inside <Root> from native-base. You need not wrap every screen in <Root/>.

Gif

[Angelk90]

@akhil-geekyants: The problem occurs when you have multiple windows, and you go back and forth between them and the subsequent times the code does not work. Example: index.js and app.js and there is that code in the latter. If I’m in the index and then I move to app, it works. Then from app, back to index, then again I move to app, code no longer works.