react-native-enhanced-actionsheet

A super lightweight, fully customizable, dependency-free component for React Native that replicates native iOS action sheet. An Android style action sheet will be added as well within the next few versions.

How to install it

1. Run npm install react-native-enhanced-actionsheet --save or yarn add react-native-enhanced-actionsheet
2. Import it in the component of your choice import Actionsheet from 'react-native-enhanced-actionsheet'

How to use it

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View, 
  Button
} from 'react-native'
import Actionsheet from 'react-native-enhanced-actionsheet'

const COUNT = 0

const OPTIONS = [
  {id: COUNT++, label: 'option #' + COUNT}, 
  {id: COUNT++, label: 'option #' + COUNT}, 
]

export default class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      visible: false,
      selected: 0
    }
  }

  render() {

    const selectedOption = OPTIONS.find((e) => e.id === this.state.selected)

    return (
      <View style={styles.container}>
        <Button
          title="Just tap me bro"
          color="#841584"
          onPress={() => this.setState({visible: true})}
        />
        <View style={{marginTop: 40}}>
          <Text>Selected option: {selectedOption.label}</Text>
        </View>
        <Actionsheet 
          visible={this.state.visible}
          data={OPTIONS} 
          title={'Select an option'}
          selected={this.state.selected}
          onOptionPress={(e) => this.setState({visible: false, selected: e.id})}
          onCancelPress={() => this.setState({visible: false})}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

Props

| Prop | Info | | ---------------------------- | ------------- | | visible | (bool) - Toggles actionsheet | | data | (array of objects) - A list of actionsheet options. Each object must have id and label fields. | | title | (string) - Actionsheet title. Default value is Select | | cancelBtnText | (string) - Actionsheet cancel button text. Default value is Cancel | | selected | (string/array of strings) - If you would like to highlight the selected element, provide the id of this element. If you want to make Actionsheet support multiple selected items, provide an array of ids. | | titleStyle | (style object) - Object that styles actionsheet title. Provided styles should be appropriate for Text component | | titleContainerStyle | (style object) - Object that styles actionsheet title container. Provided styles should be appropriate for View component | | cancelTextStyle | (style object) - Object that styles cancel text. Provided styles should be appropriate for Text component | | cancelContainerStyle | (style object) - Object that styles cancel button. Provided styles should be appropriate for View component | | optionTextStyle | (style object) - Object that styles options text. Provided styles should be appropriate for Text component | | optionContainerStyle | (style object) - Object that styles option buttons. Provided styles should be appropriate for View component | | selectedOptionTextStyle | (style object) - Object that styles selected option text. Provided styles should be appropriate for Text component | | selectedOptionContainerStyle | (style object) - Object that styles selected option button. Provided styles should be appropriate for View component | | onOptionPress | (function) - Callback function that it is called when an option is pressed. The whole object of the option that was pressed, is returned. | | onCancelPress | (function) - Callback function that it is called when cancel button is pressed. |