ActionSheet for React Native

ActionSheet component for React Native (iOS and Android).

ActionSheet-for-React-Native

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.

GitHub