eyaleizenberg / react-native-custom-action-sheet

React Native custom action sheet

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'.

Questions/Bugs/Ideas?

Feel free to open an issue on github, send suggestions, fork this repository or contact me at [email protected]

This package was developed during my work at Samanage.

Thanks and Enjoy! :)

react-native-custom-action-sheet's Issues

configure button color

hi, maybe it's better to provide a prop to set buttonColor?~
because I need >_< thx.

could you please write some example

The component looks great in your recorded example.
I was on the lookout for something like that for a while to hide DatePicker :)

I tried to use it in our app and struggling with 2 issues:

1. background is lost somehow (see image below)
2. I have a long form and it is not scrolling when I use this component

It would be great if you could write a simple example of how you use it.
I am also using your FloatLabelTextInput as you can see in the snapshot. Thank you very much!!!

Overlay

Hi!

It looks like the overlay that this component implements does not hide when the visibleModal is set to false.

Here is my setup:

<CustomActionSheet modalVisible={this.state.modalVisible} onCancel={this.toggleModal}>
     <View style={{backgroundColor: 'white', marginBottom: 10, borderRadius: 5}}>
          <DatePickerIOS mode={"date"} date={this.state.date} onDateChange={this.onDateChange} />
      </View>
</CustomActionSheet>

modalVisible is set to false by default, the component is hidden but I can't click anywhere in the page, when I Inspect the page it shows that is an ActionModal.

CustomActionSheet renders invisible overlay when modelVisible is false

When modelVisible is false, it still renders seemingly invisible overlay on the background causing the background not to be interactable. I worked around this by basically rendering this.state.show && <CustomActionSheet modelVisible={this.state.show}>

does not work with PickerIOS

Though that's probably more PickerIOS' fault. Still though I mention it if someone else tries it.

[0.26][Android] Bad Animation

I don't know if it's because this is such an early-stage RN project, but the animation on Android is bad and in general, there seems to be no direction for dealing with the styles such as background of the panel, fade in or anything like that. There's a line that goes from top to bottom of my screen when opened as well.

backgroundColor prop not functioning

maybe its just me but it seems like the default transparent black background does not render with react native v 0.31

NPM Release?

Is it possible to make a release to npm with the current master? thank you!

require('Dimensions') doesn't work in 0.14

Dimensions is available at require('react-native').Dimensions.

Cancel Button

It would make sense to be able to pass the text for the Cancel button. Also, renaming the default button to 'close' seems reasonable

onBackdrop click callback

For example, it'd be useful to be able to dismiss the actionsheet on backdrop click.

Bug: RN 0.24 Modal component has required prop onRequestClose for Android

It's a small fix in index.js, I'll submit a PR for this.