TypeError: undefined is not an object (evaluating '_this.showActionSheet')

Question

I'm working on building a random app using react-native. I'm trying to create an action sheet that activates via a button but I keep getting this error. when I first run the app it works fine, but when I reload the app again I get this error every time. I tried to use and many other things I found online but got the same result. please help, I'm new to react-native :(

import React from 'react';
import {Text, View, StyleSheet, TextInput, TouchableOpacity, Button} from 'react- native';
import ActionSheet from 'react-native-actionsheet'
//----------------------------
showActionSheet = () => {
this.ActionSheet.show()
}
//----------------------------

TouchableOpacity.defaultProps = { activeOpacity: 0.8 };

const AppButton = ({ onPress, title }) => (
<TouchableOpacity onPress={onPress} style={styles.appContainer}>
<Text style={styles.appButtonText}>{title}</Text>
</TouchableOpacity>
); 


const forgotpassword = () => { 
return (
 <View> 

   <Text style={{fontSize: 20, color: '#000', fontWeight: '200', alignSelf: "center", marginTop: 70,}}> Forgot Password? </Text>
   <Text style={{fontSize: 15, color: '#B8B8B8', fontWeight: '100', marginLeft: 20, marginTop: 40,}}> Email address </Text> 
   <TextInput style={styles.inputpassword} secureTextEntry={true}/>
   <AppButton    
     title= 'Continue'
   />

   <View style={{fontSize: 20, fontWeight: '100', color: '#B8B8B8', alignSelf: "center", bottom: 90,}}>
   <Text onPress={this.showActionSheet}>Contact Support</Text>
    <ActionSheet
      ref={o => this.ActionSheet = o}
      title={'Which one do you like ?'}
      options={['Mail', 'Gmail', 'Outlook', 'Yahoo Mail', 'Cancel']}
      cancelButtonIndex={2}
      destructiveButtonIndex={1}
      onPress={(index) => { /* do something */ }} 
     />
     </View>

     </View>
   );
   };
export default forgotpassword;

const styles = StyleSheet.create({
inputpassword: {
  opacity: 0.5,
  width: "90%",
  borderWidth: 1,
  borderRadius: 10,
  padding: 7,
  marginBottom: 160,
  alignSelf: "center",
  borderColor: "#B8B8B8",
}, 

appContainer: {
  elevation: 8,
  width: "90%",
  backgroundColor: "#FABB51",
  alignSelf: "center",
  padding: 7,
  borderRadius: 10,
  paddingVertical: 10,
  bottom: 120,
  paddingHorizontal: 12,
  },

appButtonText: {
  fontSize: 18,
  color: "#fff",
  fontWeight: "bold",
  alignSelf: "center",

  },
});

score 0 · Answer 1 · answered Feb 02 '22 at 20:34

Place your showActionSheet function inside the forgotpassword component and instead of this.ActionSheet, use useRef() like this:

   const actionSheet = useRef();
    const showActionSheet=()=>{
     actionSheet.current.show()
    }

and on your ActionSheet do like:

<ActionSheet ref={actionSheet} .../>

And please use PascalCase to name your components.

TypeError: undefined is not an object (evaluating '_this.showActionSheet')

1 Answers1