Open ActionSheet on button Press [android]?

Expo SDK
1

Hello , expo gurus :slight_smile:,

i have a storeList that will populate the view with cards containing store items and what not,

i am trying to implement ActionSheet into cardItem button but when i press nothing happens?
here is my code:

import React, { Component } from 'react';
import { Text,View , Image,TouchableOpacity} from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';
import ButtonMinus from './ButtonMinus';
import ActionSheet from 'react-native-custom-actionsheet';



const ItemDetail = (props) => {
    this.state={selected: '',}
    const CANCEL_INDEX = 0;
    const DESTRUCTIVE_INDEX = 4;
    const options = [
        'Cancel',
    {
        component:<View><Image style={{height:30,width:30}} source={{uri: props.item.image}}></Image> <Text>{props.item.name}</Text></View>,
        height: 30,
    },
    {
        component:<Text>{props.item.price}</Text>,
        height: 30,
    },
    {
        component:<View><ButtonMinus /><Text>{props.item.name}</Text> <Button /></View>,
        height: 30,
    },
    {
        component:<TouchableOpacity><Text>Add</Text></TouchableOpacity>,
        height:30
    } 
]
const Title = <Text style={{ color: 'crimson', fontSize: 18 }}>Add {props.item.name} to basket ?</Text>
    
   

    showActionSheet = () => this.actionSheet.show()

    getActionSheetRef = ref => (this.actionSheet = ref)
  
    handlePress = (index) => this.setState({ selected: index })

    return(
        <Card>
            <CardSection>
                <View style={styles.topContainer}>
                                    <View style={styles.box}>
                                        <Text style={styles.titleStyle}>{props.item.name}</Text>
                                    </View>
                            
                                    <View style={styles.box2}>
                                          <Text style={styles.priceStyle}>{props.item.price} TND</Text>
                                     </View>

                                    <View style={styles.box3} >
                                        <Button style={styles.button} onPress={this.showActionSheet}/>
                                        <ActionSheet 
                                            ref={this.getActionSheetRef}
                                            title={Title}
                                            options={options}
                                            cancelButtonIndex={CANCEL_INDEX}
                                            destructiveButtonIndex={DESTRUCTIVE_INDEX}
                                            onPress={this.handlePress}
                                        />
                                     </View> 
                               
                </View>
            </CardSection>

            <CardSection>
                <Image source={{uri: props.item.image}}  style={styles.imageStyle}/>
            </CardSection>
        </Card>
    );
};

const styles = {
    topContainer:{
        flex:1,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    box:{
      
    },
    box2:{
      

    },
    box3:{
       

        
    },
    headerStyle: {
    },
    titleStyle:{
        fontSize: 14,
        fontWeight: 'bold',
    },
    priceStyle:{
        fontSize: 14,
        fontWeight: 'bold',
        color: 'red',
    },
    imageStyle: {
        height: 300,
        flex: 1,
        width: null,
    },
    button:{
     
    }

}

export default ItemDetail;

can’t figure out why
i am using this custom-action-sheet : https://github.com/valerybugakov/react-native-custom-actionsheet

2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.