https://github.com/mfrachet/action-sheet-rn

Probably the most declarative API for ActionSheets in React Native
https://github.com/mfrachet/action-sheet-rn

Last synced: 3 months ago
JSON representation

Probably the most declarative API for ActionSheets in React Native

• Host: GitHub
• URL: https://github.com/mfrachet/action-sheet-rn
• Owner: mfrachet
• License: mit
• Created: 2019-07-18T13:44:12.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T04:45:27.000Z (about 2 years ago)
• Last Synced: 2024-04-25T00:50:46.303Z (9 months ago)
• Language: TypeScript
• Size: 4.5 MB
• Stars: 37
• Watchers: 1
• Forks: 2
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-native - action-sheet-rn ★1 - Probably the most declarative API for ActionSheets in React Native (Components / UI)
• awesome-react-native - action-sheet-rn ★1 - Probably the most declarative API for ActionSheets in React Native (Components / UI)
• awesome-react-native - action-sheet-rn ★1 - Probably the most declarative API for ActionSheets in React Native (Components / UI)

README

        
[![Build Status](https://travis-ci.org/mfrachet/action-sheet-rn.svg?branch=master)](https://travis-ci.org/mfrachet/action-sheet-rn)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Probably the most declarative API for ActionSheets in React Native

![Image of the action sheets in action](./docs/as.gif)

[Here's a running snack of the lib :)](https://snack.expo.io/@mfrachet/great-tortillas)

# Usage

## Installation

```javascript

$ yarn add action-sheet-rn

```

## In your code

```jsx

import { ActionSheet, SheetItem, SheetDivider } from "action-sheet-rn";

// Icons can be defined as:

// const ShareIcon = 

// const CreateIcon = 

// const RemoveIcon = 

// const LocateIcon = 

// const ShareIcon = 

const App = ({ isVisible }) =>

  isVisible && (

    

      

        Share

      

      

        Create

      

      

        Remove

      

      

      

        Locate

      

      

        Cancel

      

    

  );

```

## How it works?

### iOS

It displays a native `ActionSheet` using [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios).

On a `SheetItem`, you can specify a `type` of value `cancel | remove` that will allow to customize its style (positionning the cancel button to the bottom and adding the red style of the remove one).

_The `Icon` prop has no effect on the iOS Action Sheet. It's only relevant for Android_

### Android

It displays a custom and JavaScript implementation of a [Modal Bottom Sheet from the Material Design Spec](https://material.io/design/components/sheets-bottom.html#modal-bottom-sheet). For now, it's not implemented 100%, but I really hope it will (missing the gesture handling + the number of visible items etc..)

On Android, the `SheetItem` with the `cancel` type won't be visible. Instead, the lib will handle the click on the opaque zone as a cancellation (only when the `type="cancel"` is provided to keep consistency between iOS and Android).

You can also pass an `Icon` props to the `SheetItem` so that it adds a little Icon on the left, always following the spec concerning size / margins.

_The `remove` type as no specific effects on Android._