react-native-actionsheet

An elegant ActionSheet component for React Native.

Showing:

Popularity

Downloads/wk

24.9K

GitHub Stars

1.2K

Maintenance

Last Commit

3yrs ago

Contributors

11

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Reviews

Average Rating

4.5/54
Read All Reviews
the-vishal-kumar
deep8292

Top Feedback

3Easy to Use
2Performant
1Highly Customizable

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

import ActionSheet from 'react-native-actionsheet'

class Demo extends React.Component {
  showActionSheet = () => {
    this.ActionSheet.show()
  }
  render() {
    return (
      <View>
        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          ref={o => this.ActionSheet = o}
          title={'Which one do you like ?'}
          options={['Apple', 'Banana', 'cancel']}
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
  }
}

Use ActionSheetCustom directly

so you can customize option and title

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

const options = [
  'Cancel', 
  'Apple', 
  <Text style={{color: 'yellow'}}>Banana</Text>,
  'Watermelon', 
  <Text style={{color: 'red'}}>Durian</Text>
]

class Demo extends React.Component {
  showActionSheet = () => {
    this.ActionSheet.show()
  }
  render() {
    return (
      <View>
        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          ref={o => this.ActionSheet = o}
          title={<Text style={{color: '#000', fontSize: 18}}>Which one do you like?</Text>}
          options={options}
          cancelButtonIndex={0}
          destructiveButtonIndex={4}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
  }
}

How to redesign style ?

The style of ActionSheet is defined in lib/styles.js. We can pass the styles prop to cover default style. See Example .

// example

const styles = {
  titleBox: {
    background: 'pink'
  },
  titleText: {
    fontSize: 16,
    color: '#000'
  }
}

<ActionSheet
  ...
  styles={styles}
/>

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 {}

Rate & Review

Great Documentation0
Easy to Use3
Performant2
Highly Customizable1
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Vishal Kumar34 Ratings43 Reviews
I'm a software engineer by morning, an aspiring entrepreneur by evening, and a blogger by night. I love to gather attention and help others. Want to be Immortal
9 months ago
Easy to Use
Performant

I have used this package professionally in one of my RN app. I wanted similar look and feel for my android app also, and this package was able to do it without any issues. Only thing that I faced was that it doesn't support hooks, but hopefully they'll fix in upcoming releases.


0
Deepak KhiwaniChandigarh47 Ratings57 Reviews
9 months ago
Performant
Easy to Use

I have been using this package since I started developed in React-Native and I believe this package has been a divine for all the mobile developers. Best part this package gives the native look and feel for both the platforms.


0
Murat ÖNER29 Ratings2 Reviews
September 7, 2020

Tutorials

No tutorials found
Add a tutorial