https://github.com/noppt/react-native-zhb-actionsheet

https://github.com/noppt/react-native-zhb-actionsheet

actionsheet pickerview react-native

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/noppt/react-native-zhb-actionsheet
• Owner: NoPPT
• License: mit
• Created: 2017-03-07T03:20:45.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-20T08:02:26.000Z (over 6 years ago)
• Last Synced: 2024-11-07T15:05:50.394Z (2 months ago)
• Topics: actionsheet, pickerview, react-native
• Language: JavaScript
• Size: 158 KB
• Stars: 10
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ActionSheet for React Native

[![npm Version](https://img.shields.io/npm/v/react-native-zhb-actionsheet.svg)](https://www.npmjs.com/package/react-native-zhb-actionsheet) [![License](https://img.shields.io/npm/l/react-native-zhb-actionsheet.svg)](https://www.npmjs.com/package/react-native-zhb-actionsheet)

ActionSheet component for React Native (iOS and Android)

![1](./docs/1.png)

## 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 (

            

                 {console.log('action sheet closed! clicked:' + JSON.stringify(obj));}}

                />

                 {this.setState({titles: this.defaultTitles}, () => {this.refs.picker.show();})}}>

                    click me !!!

                

                 {this.setState({titles: this.customTitles}, () => {this.refs.picker.show();})}}>

                    click me !!!

                

            

        )

    }

}

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](./LICENSE)