hcmobile-sdk/components/actionsheet/ActionSheetDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ActionSheet from './index';

const CANCEL_INDEX = 0;
const DESTRUCTIVE_INDEX = 4;
const options = [ 'Cancel', 'Apple', 'Banana', 'Watermelon', 'Durian' ];
const title = 'Which one do you like?';

// create a component
class ActionSheetDemo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selected: ''
        };
        this.handlePress = this.handlePress.bind(this);
        this.showActionSheet = this.showActionSheet.bind(this);
    }

    showActionSheet() {
        this.ActionSheet.show();
    }
    
    handlePress(i) {
        this.setState({
            selected: i
        });
    }


    render() {
        return (
            <View style={styles.container}>
                <Text style={{marginBottom: 20}} >I like {options[this.state.selected]}</Text>
                <Text style={styles.button} onPress={this.showActionSheet}>Example A</Text>
                <ActionSheet
                    ref={o => this.ActionSheet = o}
                    title={title}
                    message="custom message custom message custom message custom message custom message custom message "
                    options={options}
                    tintColor = {'blue'}
                    cancelButtonIndex={CANCEL_INDEX}
                    destructiveButtonIndex={DESTRUCTIVE_INDEX}
                    onPress={this.handlePress}
                />
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    button: {
        width: 200,
        marginBottom: 10,
        paddingTop: 15,
        paddingBottom: 15,
        textAlign: 'center',
        color: '#fff',
        backgroundColor: '#38f'
    }
});

//make this component available to the app
export default ActionSheetDemo;