React-native-custom-action-sheet NPM

React Native custom action sheet

What is this?

This component will fade in/out an overlay and will pop in a modal with a cancel button. You can pass any view that you want to the component and it will be shown in the modal. In the example below I am passing a date picker.

Installation

npm install react-native-custom-action-sheet --save

Usage example

var CustomActionSheet = require('react-native-custom-action-sheet');

var SomeComponent = React.createClass({
  render: function() {
    return (
      <View>
        <CustomActionSheet modalVisible={this.state.modalVisible} onCancel={this.toggleModal}>
          <View style={styles.datePickerContainer}>
            <DatePickerIOS mode={"date"} date={@state.dateForPicker} onDateChange={@dateChanged} />
          </View>
        </CustomActionSheet>
      </View>
    );
  }
});

Component props

modalVisible (Boolean) - Decide if the component should be visible or not.
onCancel (Function) - Function to run when the cancel button/background has been pressed.
buttonText (String) - The text of the onCancel button. Defaults to Cancel.
backgroundColor (String) - The color of the fade-in effect background. Defaults to 'black'.