React Native - Action Sheet

React Native - Custom Action Sheet (with hooks).

Notes

React Native Action Sheet cannot get dismissed programatically, so we've decided to use React Native Modal and imitate Action Sheet behaviour with it to enable dismissable option.

Install

yarn add @selcouth-digital/react-native-action-sheet

Usage

Simple example:

import React, { Fragment, useState } from 'react'
import ActionSheet from '@selcouth-digital/react-native-action-sheet'

const Example = () => {
  const [showActionSheet, setShowActionSheet] = useState(false)
  
  const options = [
    {
      onPress: () => console.log('option 1 pressed'),
      title: 'Option 1'
    }
  ]
  
  return (
    <Fragment>
      <Button onPress={() => setShowActionSheet(true)} title="Open Action Sheet" />

      /*
       * note that the ActionSheet component has to be at the highest screen level
       * so it overlaps the other components
       */
      <ActionSheet
        onDismiss={() => setShowActionSheet(false)}
        options={options}
        visible={showActionSheet}
      />
    </Fragment>
  )
}

export default Example

API

Props

| Name | Type | Required? | Default | | -------------- |:-------:|:----------:|:-----------------------:| | options | Array | - | | | title | String | - | 'Select an option...' | | visible | Boolean | true | false | | CancelButton | Node | - | - | | styles* | Object | - | - |

*see available styles below

Methods

| Name | Required? | Description | | ------------ |:----------:|:--------------------------:| | onDismiss()| true | ActionSheet gets destroyed |

Styles

| Name | Description | | -------------- |:---------------------------------------:| | overlayBox | Overlay wrapper (animated view) | | overlay | Overlay "clickable" layer | | body | Action Sheet wrapper (box) | | titleBox | Title wrapper (box) | | titleText | Title text | | option | Option wrapper (box) | | optionText | Option text | | cancelButton | Cancel button |

TODO

• Add more Action Sheet types
• Add Gesture Handler to resize action sheet (when it's too long for half a screen)
• Unit Tests
• Add icons and subtitles to options

PEER Dependencies

Reanimated

We use Ract Native Reanimated library for animating! Special thanks to @kmagiera for providing it!

Created with ♥ by Selcouth.DIGITAL team