ActionSheet for React Native

ActionSheet component for React Native (iOS and Android)

Installation

Get started with actionsheet by installing the node module:

$ npm install react-native-zhb-actionsheet --save

Props

| prop | type | default | required | description | | ---- | ---- | ---- | ---- | ---- | | titles | array of object, [{title: string, actionStyle: oneOf(["default", "cancel", "destructive"]), action: func] | [] | yes | | | onClose | func | none | no | | | separateHeight | number | 4 | no | | | separateColor | string(color) | '#dddddd' | no | | | backgroundColor | string(color) | 'rgba(0, 0, 0, 0.4)' | no | | | containerStyle | style | {} | no | |

Methods

| method | type | description | | ---- | ---- | ---- | | show() | function | show the actionsheet | | hide() | function | hide the actionsheet |

Basic Usage

'use strict';

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import ActionSheet from 'react-native-zhb-actionsheet';

export default class App extends Component {

    constructor(props) {
        super(props);
        this.defaultTitles = [{title: 'Camera', action: () => {console.log('click Camera');}},
            {title: 'Choose from Album', actionStyle: 'default', action: () => {console.log('click Choose from Album');}},
            {title: 'Delete', actionStyle: 'destructive', action: () => {console.log('click Delete');}},
            {title: 'Cancel', actionStyle: 'cancel', action: () => {console.log('click Cancel');}}
            ];
        this.customTitles = [{title: 'Title 1'}, {title: 'Title 2'}, {title: 'Title 3'}, {title: 'Title 4'}, {title: 'Title 5'},
            {title: 'Title 6'}, {title: 'Title 7'}, {title: 'Title 8'}];
        this.state = {
            titles: this.defaultTitles
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <ActionSheet
                    ref="picker"
                    titles={this.state.titles}
                    separateHeight={3}
                    separateColor="#dddddd"
                    backgroundColor="rgba(0, 0, 0, 0.3)"
                    containerStyle={{margin: 10, borderRadius: 5}}
                    onClose={(obj) => {console.log('action sheet closed! clicked:' + JSON.stringify(obj));}}
                />

                <Text style={styles.welcome} onPress={() => {this.setState({titles: this.defaultTitles}, () => {this.refs.picker.show();})}}>
                    click me !!!
                </Text>
                <Text style={styles.welcome} onPress={() => {this.setState({titles: this.customTitles}, () => {this.refs.picker.show();})}}>
                    click me !!!
                </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 30,
        textAlign: 'center',
        margin: 10
    }
});

Running the Example Project

You can check out the example project with the following instructions

1. Clone the repo: git clone https://github.com/NoPPT/react-native-zhb-actionsheet.git
2. Open: cd react-native-zhb-actionsheet and Install: npm install
3. Run npm start to start the packager.

License

MIT