https://github.com/beefe/react-native-actionsheet

An elegant ActionSheet component for React Native.
https://github.com/beefe/react-native-actionsheet

actionsheet react-native

Last synced: 3 days ago
JSON representation

An elegant ActionSheet component for React Native.

• Host: GitHub
• URL: https://github.com/beefe/react-native-actionsheet
• Owner: beefe
• License: mit
• Created: 2016-03-01T14:11:31.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T17:08:45.000Z (about 2 years ago)
• Last Synced: 2024-12-12T14:12:00.435Z (10 days ago)
• Topics: actionsheet, react-native
• Language: JavaScript
• Homepage:
• Size: 1.06 MB
• Stars: 1,350
• Watchers: 14
• Forks: 345
• Open Issues: 104
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-actionsheet

Cross platform ActionSheet. This component implements a custom ActionSheet  and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.

  

    

      

        

      

      

        

      

    

  

## Install

```

npm install react-native-actionsheet --save

```

## Usage

```js

import ActionSheet from 'react-native-actionsheet'

class Demo extends React.Component {

  showActionSheet = () => {

    this.ActionSheet.show()

  }

  render() {

    return (

      

        Open ActionSheet

         this.ActionSheet = o}

          title={'Which one do you like ?'}

          options={['Apple', 'Banana', 'cancel']}

          cancelButtonIndex={2}

          destructiveButtonIndex={1}

          onPress={(index) => { /* do something */ }}

        />

      

    )

  }

}

```

### Use ActionSheetCustom directly

so you can customize option and title

```js

import { ActionSheetCustom as ActionSheet } from 'react-native-actionsheet'

const options = [

  'Cancel', 

  'Apple', 

  Banana,

  'Watermelon', 

  Durian

]

class Demo extends React.Component {

  showActionSheet = () => {

    this.ActionSheet.show()

  }

  render() {

    return (

      

        Open ActionSheet

         this.ActionSheet = o}

          title={Which one do you like?}

          options={options}

          cancelButtonIndex={0}

          destructiveButtonIndex={4}

          onPress={(index) => { /* do something */ }}

        />

      

    )

  }

}

```

### How to redesign style ?

The style of ActionSheet is defined in [lib/styles.js](https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js). We can pass the `styles` prop to cover default style. See [Example](https://github.com/beefe/react-native-actionsheet/blob/master/example/app/ExampleB.js#L48) .

```javascript

// example

const styles = {

  titleBox: {

    background: 'pink'

  },

  titleText: {

    fontSize: 16,

    color: '#000'

  }

}

```

## Props

https://github.com/beefe/react-native-actionsheet/blob/master/lib/options.js

    

        Prop name

        Description

        Type

        Default

    

    

        title

        

        PropTypes.string or PropTypes.element

        

    

    

        message

        

        PropTypes.string or PropTypes.element

        

    

    

        options

        

        PropTypes.arrayOf([PropTypes.string, PropTypes.element])

        

    

    

        tintColor

        

        PropTypes.string

        

    

    

        cancelButtonIndex

        

        PropTypes.number

        

    

    

        destructiveButtonIndex

        

        PropTypes.number

        

    

    

        onPress

        

        PropTypes.func

        (index) => {}

    

    

        styles

        only for ActionSheetCustom

        

        {}