SolvedNativeBase What am I doing wrong with my ActionSheet?

I'm wrapping my main App component in a Native Base as the docs suggest.

It looks like this:

import {AppRegistry} from 'react-native';
import { Root } from 'native-base';
import App from './App';
import {name as appName} from './app.json';


const RootApp = () => (
    <Root>
        <App />
    </Root>
);

AppRegistry.registerComponent(appName, () => RootApp);

Then i'm trying to trigger the ActionSheet like this:

<Button transparent onPress={
     () => ActionSheet.show({
       options: this.BUTTONS,
       cancelButtonIndex: this.CANCEL_INDEX,
       destructiveButtonIndex: this.DESTRUCTIVE_INDEX,
       title: i18n.t("settings")
     },
       buttonIndex => {
          alert('Logout was clicked ' + buttonIndex);
       }
     )}>
</Button>

And it throws Cannot read property _root of undefined

I although would like to have the Button to call it like this:

<Button onPress={ () => this.openSettings }></Button>

And openSettings function looking like this:

openSettings() {
    ActionSheet.show({
            options: this.BUTTONS,
            cancelButtonIndex: this.CANCEL_INDEX,
            destructiveButtonIndex: this.DESTRUCTIVE_INDEX,
            title: i18n.t("settings")
        },
        buttonIndex => {

            alert('Logout was clicked ' + buttonIndex);
        }
    )
}

But again, didn't work.

I think my problem here is the way i'm wrapping my App, based on the docs and the KitchenSink app, i noticed that you all guys use "StackNavigation" from react-native, and everything is quite different to what i have when using wix navigation v1.

This is how i start my App inside App.js

// Start App
Navigation.startSingleScreenApp({
    screen: {
        screen: 'app.AuthView',
        title: 'Login',
        navigatorStyle: {
          navBarHidden: true
        }
    }
});

Any suggestions? I know this is working nowadays, but i just can't find a way to make it work.

React-Native version: 0.57.8
Native-Base version: ^2.10.0
Wix React-Native-Navigation: ^1.1.493 (v1)

4 Answers

✔️Accepted Answer

@msqar
Wrap Actionsheet in Root

import React, { Component } from "react";
import {
  Container,
  Header,
  Button,
  Content,
  ActionSheet,
  Text,
  Root,
} from "native-base";
var BUTTONS = ["Option 0", "Option 1", "Option 2", "Delete", "Cancel"];
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;
export default class ActionSheetExample extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <Root>
        <Container>
          <Header />
          <Content padder>
            <Button
              onPress={() =>
                ActionSheet.show(
                  {
                    options: BUTTONS,
                    cancelButtonIndex: CANCEL_INDEX,
                    destructiveButtonIndex: DESTRUCTIVE_INDEX,
                    title: "Testing ActionSheet",
                  },
                  buttonIndex => {
                    this.setState({ clicked: BUTTONS[buttonIndex] });
                  }
                )}
            >
              <Text>Actionsheet</Text>
            </Button>
          </Content>
        </Container>
      </Root>
    );
  }
}

screen shot 1440-05-23 at 6 04 01 pm

More Issues: