React Native custom action sheet

Eyal Eizenberg in his Component shows us some good use of core React Native parts, such as Animated and Modal. The result is a custom action sheet with a great API that can power some new User Interactions in your React Native apps.

react-native-custom-action-sheet on GitHub

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.

<View>
    <CustomActionSheet modalVisible={this.state.modalVisible} onCancel={this.toggleModal}>
      <View style={styles.datePickerContainer}>
        <DatePickerIOS mode={"date"} date={@state.dateForPicker} onDateChange={@dateChanged} />
      </View>
    </CustomActionSheet>
</View>

Custom action sheet