undefined is not an object (evaulating '_this.ActionSheet.show')

[bmwertman]

I've wrapped ActionSheet in a class component, call it MyActionSheet with some standard styling that I plan to use throughout my app.

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { ActionSheetCustom as ActionSheet } from 'react-native-actionsheet'
import Colors from '../assets/Colors.js'

export default class MyActionSheet extends Component {
  constructor (props) {
    super(props)
    this.state = {
      title: props.title,
      options: props.options
    }
  }

  componentDidMount () {
    this.showActionSheet() // I verified this is available w/ a debugger statement just above it
  }

  showActionSheet = () => {
   this.ActionSheet.show()
 }

  render () {
    return (
      <ActionSheet
        useNativeDriver={false}
        styles={{
          titleBox: {
            alignItems: 'flex-start',
            height: 40,
            justifyContent: 'flex-end',
            paddingHorizontal: 10
          }
        }}
        title={
          <View style={{ flexDirection: 'row' }}>
            <View style={{ paddingLeft: 5, justifyContent: 'flex-end' }}>
              <Text style={{
                color: Colors.dkBlue,
                fontWeight: 'bold'
              }}
              >
                {this.state.title}
              </Text>
            </View>
          </View>
        }
        options={this.state.options}
        cancelButtonIndex={0}
        destructiveButtonIndex={this.state.options.length - 1}
        onPress={(index) => { /* do something */ }}
      />
    )
  }
}

I'm then passing MyActionSheet to one of my main view components which passes props down to MyActionSheet as they're received.

export default class MainView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      showActionSheet: props.options ? props.options : false
    }
    render () {
        return (
            <View>
                <Text> My View</View>
                {this.state.showActionSheet
                  ? <BuddyActions show={this.props.options} title={this.props.title} options={this.props.options}/>
                  : null
             </View>
        )
    }
}

My MainView component then renders the MyActionSheet using a ternary condition and I try to call this.ActionSheet.show() in ComponentDidMount but I get the error in the title undefined is not an object (evaulating '_this.ActionSheet.show')

There is probably something fundamental I'm missing but I've been on this all weekend.

[heidji]

did you find the problem? i'm stuck.

[heidji]

ah, i am using hooks, had to use ref.current.show()