NativeBase: ActionSheet 'show' method says undefined is not an object

react-native, react and native-base version

RN 0.42, R 15.4.2, NB 2.0.13

Expected behaviour

ActionSheet should show just like it does in the docs: http://nativebase.io/docs/v2.0.0/components#actionsheet

Actual behaviour

Error. undefined is not an object (evaluating ‘_nativeBase.ActionSheet.show’)

Steps to reproduce (code snippet or screenshot)

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Button, ActionSheet } from 'native-base';

const placeholder = require('../images/placeholder_person.png');

var BUTTONS = [
  'Option 0',
  'Option 1',
  'Option 2',
  'Delete',
  'Cancel',
];
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;

export default class ProfileImage extends React.Component {

  render() {
    return (
      <Button transparent onPress={() => ActionSheet.show(
            {
              options: BUTTONS,
              cancelButtonIndex: CANCEL_INDEX,
              destructiveButtonIndex: DESTRUCTIVE_INDEX,
              title: 'Testing ActionSheet'
            },
            (buttonIndex) => {
              this.setState({ clicked: BUTTONS[buttonIndex] });
            }
            )}>
            <Image source={placeholder}  />
      </Button>
    );
  }
}

Screenshot of emulator/device

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

Both

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (3 by maintainers)

Most upvoted comments

Hi @marcusvbp , you should import

import {Root} from 'native-base'

and then

render() {
    return (
      <Root>
      <View style={styles.container}>
        <Button transparent style={styles.btn} onPress={ () => this.showAS() }>
          <Icon name="person" style={{ color: '#666', fontSize: 50 }} />
        </Button>
      </View>
      </Root>
    );
  }

+25

luiskhernandez on Sep 7, 2017

The solutions from @luiskhernandez and @predescu didn’t work for me. The ActionSheet file exists and the <Root> didn’t change anything.

In my case I have 2 scenes with the AS component. The crash occurs when I render the AS in the scene 1 and then go to scene 2 and try to access it. If I do the opposite, scence 2 first then go to scene 1, it doesn’t happen.

The codes are slightly different:

On scene 1 it’s used like the docs, but on scene 2 I choose between two sets of BUTTON that I render, with different cancelButtonIndex. The scene one uses a const, but on scence 2 both set a different number. Both scenes use the AS on a <Header> with a <Button>.

It crashes before showing the menu or anything. The first output of the red screen says the issue is on the show() method of AS.

Any other solutions? The code is pretty straight forward, but if you need to see it, just let me know.

Thanks in advance.

gustavoadt on Sep 25, 2017