React native customizable ActionSheet library

react-native-actions-sheet

A highly customizable cross platform ActionSheet for react native.

Screenshots

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. Support for Tablets and iPads
  10. Support Horizontal Layout
  11. Support for Nested Scrolling or Scrollable Content.
  12. Virtualization Support

Run Example

To run the example app clone the project
git clone https://github.com/ammarahm-ed/react-native-actions-sheet.git

then run yarn or npm install in the example folder and finally to run the example app:

react-native run-android

Installation Guide

npm install react-native-actions-sheet --save

or if you use yarn:

yarn add react-native-actions-sheet

Usage Example

For complete usage, see the example project.
import ActionSheet from "react-native-actions-sheet";
import React, { createRef } from "react";

const actionSheetRef = createRef();

const App = () => {
  let actionSheet;

  return (
    <View
      style={{
        justifyContent: "center",
        flex: 1,
      }}
    >
      <TouchableOpacity
        onPress={() => {
          actionSheetRef.current?.setModalVisible();
        }}
      >
        <Text>Open ActionSheet</Text>
      </TouchableOpacity>

      <ActionSheet ref={actionSheetRef}>
        <View>
          <Text>YOUR CUSTOM COMPONENT INSIDE THE ACTIONSHEET</Text>
        </View>
      </ActionSheet>
    </View>
  );
};

export default App;

Reference

Props

ref

Assigns a ref to ActionSheet component to use methods.

TypeRequired
refYes

initialOffsetFromBottom

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

TypeRequired
booleanno

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.

TypeRequired
numberno

Default:0

containerStyle

Any custom styles for the container.

TypeRequired
Objectno

delayActionSheetDraw

Delay draw of ActionSheet on open for android.

TypeRequired
booleanno

Default: false

delayActionSheetDrawTime

Delay draw of ActionSheet on open for android time.

TypeRequired
number (ms)no

Default: 50

CustomHeaderComponent

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

TypeRequired
React.Componentno

headerAlwaysVisible

Keep the header always visible even when gestures are disabled.

TypeRequired
booleanno

Default: false

CustomFooterComponent

A footer component if you want to add some info at the bottom.

TypeRequired
React.Componentno

Note: Remember to give footer a fixed height and provide ActionSheet the footerHeight prop with same value. If you have added margins etc, add those values to footerHeight also.

footerHeight

Height of the footer

TypeRequired
numberno

Default: 80

footerStyle

Custom Styles for the footer container.

TypeRequired
Objectno

footerAlwaysVisible

Keep footer visible. Currently when you overdraw, the footer appears, however you can change this by setting this to true.

TypeRequired
booleanno

Default: false

animated

Animate the opening and closing of ActionSheet.

TypeRequired
booleanno

Default: true

openAnimationSpeed

Speed of opening animation. Higher means the ActionSheet will open more quickly.

TypeRequired
numberno

Default: 12

closeAnimationDuration

Duration of closing animation.

TypeRequired
numberno

Default: 300

gestureEnabled

Enables gesture control of ActionSheet

TypeRequired
booleanno

Default: false

closeOnTouchBackdrop

Control closing ActionSheet by touching on backdrop.

TypeRequired
booleanno

Default: true

bounceOnOpen

Bounces the ActionSheet on open.

TypeRequired
booleanno

Default: false

bounciness

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

TypeRequired
numberno

Default: 8

springOffset

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

TypeRequired
numberno

Default: 50

elevation

Add elevation to the ActionSheet container.

TypeRequired
numberno

Default: 0

indicatorColor

Color of the gestureEnabled Indicator.

TypeRequired
stringno

Default: "#f0f0f0"

overlayColor

Color of the overlay/backdrop.

TypeRequired
stringno

Default: "black"

defaultOverlayOpacity

Default opacity of the overlay/backdrop.

TypeRequired
number 0 - 1no

Default: 0.3

closable

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

TypeRequired
booleanno

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.

TypeRequired
numberno

Default: 0

keyboardShouldPersistTaps

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

TypeRequired
stringno

Default: never

statusBarTranslucent

Determine whether the modal should go under the system statusbar.

TypeRequired
booleanno

Default: true

closeOnPressBack

Will the ActionSheet close on hardwareBackPress event.

TypeRequired
booleanno

Default: true

onClose

Event called when the ActionSheet closes.

TypeRequired
functionno

onOpen

An event called when the ActionSheet Opens.

TypeRequired
functionno

Methods

Methods require you to set a ref on ActionSheet Component.

setModalVisible

ActionSheet can be opened or closed using its ref.

import ActionSheet from "react-native-actions-sheet";
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.

import ActionSheet from "react-native-actions-sheet";
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.

import ActionSheet from "react-native-actions-sheet";
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);

Event Listeners

Listen to changes in ActionSheet State.

addHasReachedTopListener

Attach a listener to know when ActionSheet is fully opened and has reached top. Use this if you want to use a ScrollView inside the ActionSheet. Check the example for demonstration on how to use nested ScrollViews inside ActionSheet.

import ActionSheet, {addHasReachedTopListener, removeHasReachedTopListener} from 'react-native-actions-sheet


// In your Component

  const _onHasReachedTop = (hasReached) => {
    // handle the event
  }

  useEffect(() => {
    addHasReachedTopListener(_onHasReachedTop)
    return () => {
        removeHasReachedTopListener(_onHasReachedTop)
    }
  },[])

Find this library useful? ❤️

Support it by donating or joining stargazers for this repository. ⭐️ and follow me for my next creations!

MIT Licensed

Check it on GitHub