# react-native-actions-sheet-web

> A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

Latest version **0.0.3** (published 2022-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-actions-sheet-web
pnpm add react-native-actions-sheet-web
yarn add react-native-actions-sheet-web
bun add react-native-actions-sheet-web
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-02-24 |
| First published | 2022-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 78.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | vbortsov |
| Maintainers | vbortsov |
| Keywords | bottom-animated, react-native, javascript, actionsheet, android, ios, action-sheet, bottom-sheet, bottom-drawer, dialog, picker, modal, drawer, raw-bottom-sheet, bottom-app-bar, react-native-action-sheet, react, native, action, sheet, bottom, sheet |

## Links

- npm: https://www.npmjs.com/package/react-native-actions-sheet-web
- Repository: https://github.com/noname001/react-native-actions-sheet
- Issues: https://github.com/noname001/react-native-actions-sheet/issues/
- npm.io page: https://npm.io/package/react-native-actions-sheet-web

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2022-02-24
- 0.0.2 — 2022-02-24
- 0.0.1 — 2022-02-24

## README

#

<div
align="center"
style="width:100%;">

<a href="https://github.com/v-bortsov/react-native-actions-sheet-web/pulls"
target="_blank">
<img  src="https://img.shields.io/badge/PRs-welcome-green?color=blue&style=flat-square"/>
</a><a href="https://www.npmjs.com/package/react-native-actions-sheet-web"
target="_blank">
<img src="https://img.shields.io/npm/v/react-native-actions-sheet-web?color=orange&style=flat-square"/>
</a><a href="https://www.npmjs.com/package/react-native-actions-sheet-web" target="_blank">
<img  src="https://img.shields.io/npm/dt/react-native-actions-sheet-web?color=darkgreen&style=flat-square"/>
</a>

</div>

<div align="center">
<h1>Quick Preview</h1>
</div>

<div align="center" >

<img
width='33%'
height:600
src="https://imgur.com/XdsHb6M.gif"
/>
<img
width='30%'
height:500
src="https://imgur.com/g6LLkl4.gif"
/>

</div>

<div align="center">
<h2>Installation Guide</h2>
</div>

<div align="center">
<pre>npm install react-native-actions-sheet-web --save</pre>
<p>OR</p>
<pre>yarn add react-native-actions-sheet-web</pre>
</div>

# How to use

It's very simple to use the ActionSheet. Import the ActionSheet & SheetManager.

```jsx
import React from "react";
import ActionSheet, { SheetManager } from "react-native-actions-sheet-web";
```

Create your ActionSheet component and give it a unique id.

```jsx
<ActionSheet id="helloworld_sheet">
  <View>
    <Text>Hello World</Text>
  </View>
</ActionSheet>
```

Open the ActionSheet from anywhere in the app.

```jsx
SheetManager.show("helloworld_sheet");
```

Want to pass some data on opening the sheet or update the state?

```jsx
SheetManager.show("helloworld_sheet",{value:"Hello World"});

<ActionSheet
onBeforeShow={(data) => {
  setData(data);
}}
id="helloworld_sheet">
```
Hiding the sheet is easy. Enable gestures or do the following.
```jsx
await SheetManager.hide("helloworld_sheet");
```
Close all opened ActionSheets
```jsx
SheetManager.hideAll();
```

# Features

1.  Cross Platform (iOS and Android)
2.  Native Animations & Performance
3.  Identical Working on Android and iOS
4.  Control ActionSheet with **Gestures**
5.  **Raw ActionSheet** - You can Add Anything
6.  Allow ActionSheet to be partially shown when opened
7.  Support TextInputs
8.  Cool **bounce effect** on open.
9.  **Tablets and iPads**
10. **Horizontal Layout**
11. **Nested Scrolling or Scrollable Content.**
12. Virtualization Support
13. Global Sheet Manager
14. Proper resizing on Android & iOS on Keyboard show/hide.

## Consider supporting with a ⭐️ [star on GitHub](https://github.com/v-bortsov/react-native-mmkv-storage/)

If you are using the library in one of your projects, consider supporting with a star. It takes a lot of time and effort to keep this maintained and address issues and bugs. Thank you.

<div align="center">
<h1>Reference</h1>
</div>

## Props

#### `id`

A unique id for the ActionSheet. You must set this if you are using `SheetManager`.

| Type | Required |
|------|----------|
| id   | false    |

#

#### `ref`

Assigns a ref to ActionSheet component to use methods.

| Type | Required |
|------|----------|
| ref  | false    |

#

#### `testID`

Test ID for unit testing

| Type   | Required |
|--------|----------|
| string | no       |

#

#### `initialOffsetFromBottom`

Use if you want to show the ActionSheet Partially on Opening. **Requires `gestureEnabled=true` **

| Type   | Required |
|--------|----------|
| number | no       |

Default: `1`

#

#### `extraScroll`

Normally when the ActionSheet is fully opened, a small portion from the bottom is hidden by default. Use this prop if you want the ActionSheet to hover over the bottom of screen and not hide a little behind it.

| Type   | Required |
|--------|----------|
| number | no       |

Default: `0`

#

#### `indicatorStyle`

Style the top indicator bar in ActionSheet.

| Type        | Required |
|-------------|----------|
| `ViewStyle` | no       |

#

#### `containerStyle`

Any custom styles for the container.

| Type   | Required |
|--------|----------|
| Object | no       |

#

#### `delayActionSheetDraw`

Delay draw of ActionSheet on open for android.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `false`

#

#### `delayActionSheetDrawTime`

Delay draw of ActionSheet on open for android time.

| Type        | Required |
|-------------|----------|
| number (ms) | no       |

Default: `50`

#

#### `CustomHeaderComponent`

Your custom header component. Using this will hide the default indicator.

| Type             | Required |
|------------------|----------|
| React. ReactNode | no       |

#

#### `ExtraOverlayComponent`

Render a component over the ActionSheet. Useful for rendering Toast components with which user can interact.

| Type             | Required |
|------------------|----------|
| React. ReactNode | no       |

#

#### `headerAlwaysVisible`

Keep the header always visible even when gestures are disabled.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `false`

#

#### `animated`

Animate the opening and closing of ActionSheet.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `true`

#

#### `openAnimationSpeed`

Speed of opening animation. Higher means the ActionSheet will open more quickly. Use it in combination with `bounciness` prop to have optimize the bounce/spring effect on ActionSheet open.

| Type   | Required |
|--------|----------|
| number | no       |

Default: `12`

#

#### `closeAnimationDuration`

Duration of closing animation.

| Type   | Required |
|--------|----------|
| number | no       |

Default: `300`

#

#### `gestureEnabled`

Enables gesture control of ActionSheet

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `false`

#

#### `closeOnTouchBackdrop`

Control closing ActionSheet by touching on backdrop.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `true`

#

#### `bounceOnOpen`

Bounces the ActionSheet on open.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `false`

#

#### `bounciness`

How much you want the ActionSheet to bounce when it is opened.

| Type   | Required |
|--------|----------|
| number | no       |

Default: `8`

#

#### `springOffset`

When touch ends and user has not moved farther from the set springOffset, the ActionSheet will return to previous position.

| Type   | Required |
|--------|----------|
| number | no       |

Default: `50`

#

#### `elevation`

Add elevation to the ActionSheet container.

| Type   | Required |
|--------|----------|
| number | no       |

Default: `0`

#

#### `indicatorColor`

Color of the gestureEnabled Indicator.

| Type   | Required |
|--------|----------|
| string | no       |

Default: `"#f0f0f0"`

#

#### `overlayColor`

Color of the overlay/backdrop.

| Type   | Required |
|--------|----------|
| string | no       |

Default: `"black"`

#

#### `defaultOverlayOpacity`

Default opacity of the overlay/backdrop.

| Type         | Required |
|--------------|----------|
| number 0 - 1 | no       |

Default: `0.3`

#

#### `closable`

Prevent ActionSheet from closing on gesture or tapping on backdrop. Instead snap it to `bottomOffset` location

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `true`

#

#### `bottomOffset`

Snap ActionSheet to this location if `closable` is set to false. By default it will snap to the location on first open.

| Type   | Required |
|--------|----------|
| number | no       |

Default: `0`

#

#### `keyboardShouldPersistTaps`

Setting the keyboard persistence of the `ScrollView` component. Should be one of "never", "always" or "handled"

| Type   | Required |
|--------|----------|
| string | no       |

Default: `never`

#

#### `keyboardHandlerEnabled`

Allow to choose will content change position when keyboard is visible.
This is enabled by default.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `true`

#

#### `keyboardDismissMode`

Set how keyboard should behave on tapping the ActionSheet.

| Type                                 | Required |
|--------------------------------------|----------|
| `"on-drag"` `"none"` `"interactive"` | no       |

Default : `"none"`

#

#### `statusBarTranslucent`

Determine whether the modal should go under the system statusbar.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `true`

#

#### `closeOnPressBack`

Will the ActionSheet close on `hardwareBackPress` event.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `true`

#

#### `drawUnderStatusBar`

Allow ActionSheet to draw under the StatusBar. This is enabled by default.

| Type    | Required |
|---------|----------|
| boolean | no       |

Default: `false`

#

#### `onPositionChanged(onReachedTop:boolean)`

Event called when position of ActionSheet changes.

| Type     | Required |
|----------|----------|
| function | no       |

#

#### `onClose`

Event called when the ActionSheet closes.

| Type     | Required |
|----------|----------|
| function | no       |

#

#### `onOpen`

An event called when the ActionSheet Opens.

| Type     | Required |
|----------|----------|
| function | no       |

## Methods

Methods require you to set a ref on ActionSheet Component.

#### `handleChildScrollEnd()`

If your component includes any child ScrollView/FlatList you must attach this method to all scroll end callbacks.

```jsx

<ScrollView
            ref={scrollViewRef}
            nestedScrollEnabled={true}
            onMomentumScrollEnd={() =>
              actionSheetRef.current?.handleChildScrollEnd()
            }
.....

```

#### `show()`

Opens the ActionSheet.

```jsx
import ActionSheet from "react-native-actions-sheet-web";
import React, { createRef } from "react";

const actionSheetRef = createRef();

// First create a ref on your <ActionSheet/> Component.
<ActionSheet ref={actionSheetRef} />;

// then later in your function to open the ActionSheet:

actionSheetRef.current?.show();
```

#### `hide()`

Closes the ActionSheet.

```jsx
import ActionSheet from "react-native-actions-sheet-web";
import React, { createRef } from "react";

const actionSheetRef = createRef();

// First create a ref on your <ActionSheet/> Component.
<ActionSheet ref={actionSheetRef} />;

// then later in your function to open the ActionSheet:

actionSheetRef.current?.hide();
```

#### `setModalVisible`

ActionSheet can be opened or closed using its ref.

```jsx
import ActionSheet from "react-native-actions-sheet-web";
import React, { createRef } from "react";

const actionSheetRef = createRef();

// First create a ref on your <ActionSheet/> Component.
<ActionSheet ref={actionSheetRef} />;

// then later in your function to open the ActionSheet:

actionSheetRef.current?.setModalVisible();
```

#### `setModalVisible(visible)`

It's also possible to explicitly either show or hide modal.

```jsx
import ActionSheet from "react-native-actions-sheet-web";
import React, { createRef } from "react";

const actionSheetRef = createRef();
// First create a ref on your <ActionSheet/> Component.
<ActionSheet ref={actionSheetRef} />;

// then to show modal use
actionSheetRef.current?.setModalVisible(true);

// and later you may want to hide it using
actionSheetRef.current?.setModalVisible(false);
```

#

#### `snapToOffset(offset:number)`

When the ActionSheet is open, you can progammatically snap it to different offsets.

```jsx
import ActionSheet from "react-native-actions-sheet-web";
import React, { createRef } from "react";

const actionSheetRef = createRef();
// First create a ref on your <ActionSheet/> Component.
<ActionSheet ref={actionSheetRef} />;

// snap to this location on screen
actionSheetRef.current?.snapToOffset(200);

actionSheetRef.current?.snapToOffset(150);

actionSheetRef.current?.snapToOffset(300);
```

#

## Nested scrolling on android

Nested scrolling on android is disabled by default. You can enable it as done below.

```jsx
import ActionSheet from "react-native-actions-sheet-web";

const App = () => {
  const actionSheetRef = useRef();

  return (
    <ActionSheet ref={actionSheetRef}>
      <ScrollView
        nestedScrollEnabled={true}
        onMomentumScrollEnd={() =>
          actionSheetRef.current?.handleChildScrollEnd()
        }
      />
    </ActionSheet>
  );
};
```

#

## Find this library useful? ❤️

[Support it by donating](https://ko-fi.com/vbortsov) or joining stargazers for this repository. ⭐️ and follow me for my next creations!

### MIT Licensed

#

<a href="https://notesnook.com" target="_blank">
<img style="align:center; " src="https://i.imgur.com/EMIqXNc.jpg" href="https://notesnook.com" alt="Notesnook Logo" width="50%" />
</a>

---
_Source: https://npm.io/package/react-native-actions-sheet-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._