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

Overview

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.

Type Required
ref Yes

initialOffsetFromBottom

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

Type Required
boolean 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

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.Component 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.

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

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

hideUnderlay

Hide the top underlay when ActionSheet is fullscreen.

Type Required
boolean no

Default: false

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.

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

show()

Opens the ActionSheet.

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?.show();

hide()

Closes the ActionSheet.

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?.hide();

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(callback)

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";

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

  const onHasReachedTop = (hasReachedTop) => {
    if (hasReachedTop)
      scrollViewRef.current?.setNativeProps({
        scrollEnabled: hasReachedTop,
      });
  };

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

  const onClose = () => {
    scrollViewRef.current?.setNativeProps({
      scrollEnabled: false,
    });
  };

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

Find this library useful? ❤️

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

MIT Licensed

Comments
  • Touchables aren't working

    Touchables aren't working

    To be specific I am using TouchableNativeFeedback from react-native. When gestureEnabled is set to true, touchables no longer work, however with them disabled, the action sheet handle disables.

    <ActionSheet
                ref={actionSheetRef}
                id={props.sheetId}
                statusBarTranslucent
                gestureEnabled={true}
                containerStyle={{}}
                indicatorStyle={{}}
            >
    </ActionSheet>
    
    bug 
    opened by Savvy 28
  • Horizontal layout support

    Horizontal layout support

    Hi! Thanks for this awesome plugin. Portrait mode is working as expected, but horizontal layout does not trigger the content view, the background in toggled as I can see it turning darker.

    Could you please look in to it?

    Thanks

    bug 
    opened by vinters768 27
  • onPositionChanged callback looped & content jumping on first open

    onPositionChanged callback looped & content jumping on first open

    The component is rendered straight under SafeAreaProvider.

    <ActionSheet
          ref={ref}
          onPositionChanged={() => console.log('onPositionChanged')}
          onClose={() => console.log('onClose')}
          onOpen={() => console.log('onOpen')}>
          <Text>Test</Text>
          <Text>Test</Text>
          <Text>Test</Text>
        </ActionSheet>
    

    image

    This bug causes content jumping on the first open. It's reproduced in ~80% of first renders.

    Version used: "react-native-actions-sheet": "0.4.7",

    opened by unixvb 21
  • Indicator position

    Indicator position

    Hi @ammarahm-ed !

    I'm trying to create an action sheet with your package. When i set the height to a higher value, the indicator renders 'x' pixels lower (I think because of the indicatorTranslateY):

    indicator at the top: iphone11_2

    indicator renders lower:

    iphone11_1

    Is this intentionally? I think you check the distance between the action sheet and the top of the screen and based on that the indicator renders couple of pixels lower. We would like to have the indicator always at the top of the action sheet. Is there any chance, to have for example an 'indicatorPositionAlwaysTop'(boolean) attribute which we can set from outside? I'm also open to contribute to this library, so i can make a PR for this solution. What's your opinion?

    opened by mateattilabarna 19
  • Scroll within Flatlist is not working on android with gestureEnabled true

    Scroll within Flatlist is not working on android with gestureEnabled true

    Android

    Desired behavior: Flatlist as a child of ActionSheet IS scrollable and ActionSheet CAN be close with a gesture.

    Actual behavior: gestureEnabled={true} Flatlist as a child of ActionSheet IS NOT scrollable. ActionSheet CAN be close with a gesture.

    gestureEnabled={false} Flatlist as a child of ActionSheet IS scrollable. ActionSheet CAN NOT be close with a gesture.

    iOS

    Everything works as desired.

    opened by ghost 17
  • Padding bottom is overwritten by the libraries style

    Padding bottom is overwritten by the libraries style

    <ActionSheetBase
      containerStyle={{
        ...styles.container,
        paddingBottom: insets.bottom,
        ...containerStyle,
        }}>
      {children}
    </ActionSheetBase>
    

    We are setting bottom padding with the value coming from safe area context on, I was able to solve this by wrapping content with a view and passing the padding to it. But I have one sheet that has a sticky button so it should be without bottom spacing but I cannot overwrite the padding.

    Thanks for the great efforts, keep it up.

    opened by naderalfakesh 16
  • Usage example for Typescript - getting an error

    Usage example for Typescript - getting an error

    Hello,

    I posted this issue on SO regarding the usage with Typescript. Can you please assist?

    https://stackoverflow.com/questions/68757797/typescript-createref-for-actionsheet-react-native

    export default function MyFunc(){
       const actionSheetRef = createRef<ActionSheet>()
       useEffect(() => {
            actionSheetRef.current?.setModalVisible(props.open)
       }, [props.open])
       return (
            <>
                <ActionSheet
                    ref={actionSheetRef}
                    onClose={props.onClose}
                >
                // more code here  ....
            <>)
    }
    

    I also added a tag for your project so others can find it easier.

    Thanks for the great library!

    opened by checklist 16
  • Always keep full sheet above the keyboard

    Always keep full sheet above the keyboard

    Is there a way to keep the entire sheet above the keyboard? Currently when the user focuses an input the keyboard will pop up and cover whatever portion of the sheet is below the input that is focused.

    opened by JordanSalinas 16
  • Keyboard avoiding behavior not smooth.

    Keyboard avoiding behavior not smooth.

    I have based my sheet off one of the examples here: https://snack.expo.dev/@ammarahmed/github.com-ammarahm-ed-react-native-actions-sheet:expo-example

    When I tap on an input, they keyboard opens but it is not smooth like in the example (Keyboard appears, sheets animates up). In mine, there is a bit of a delay, the keyboard appears and the modal doesn't animate up. I tested this in the simulator and a device.

    "react-native": "0.70.0", "react-native-actions-sheet": "^0.8.7",

    https://user-images.githubusercontent.com/682876/190770925-1b02d5f8-78f4-446c-8bec-26875c5b8c1c.mov

    opened by coryschadt 14
  • Animation broken or initial position problem

    Animation broken or initial position problem

    Hello! Thank you for awesome lib, but I have some problems with it. Sometimes I'm getting weird bug when ActionSheet can't be opened. I'm using SheetManager with custom context (tested with global too - same bug):

    <ActionSheet
      id={sheetId}
      ref={sheetRef}
      gestureEnabled={true}
      CustomHeaderComponent={<SheetHeader />}
      backgroundInteractionEnabled={true}
      snapPoints={[30, 100]}
    >
      ...
    </ActionSheet>
    

    UPD: Maybe something with warning in console? WARN Sending 'onAnimatedValueUpdate' with no listeners registered.

    https://user-images.githubusercontent.com/19375789/187904262-7df0c711-3d3f-481d-9e39-00377b62dd8b.mp4

    opened by ch3rn1k 14
  •  Invariant Violation: [4633,>"}] is not usable as a native method argument">

    Invariant Violation: [4633,"RCTView",{"paddingBottom":"<>"}] is not usable as a native method argument

    Description The error occurs when I try to write on the text input after upgrading to 0.8.8 to resolve issue #224. Version 0.8.7 worked flawlessly.

    Error new new 2 new 3

    Additional Information

    • [react-native-actions-sheet: 0.8.8
    • React Native version: 0.69.4
    • Platform: Android, not sure for IOS
    • Development Operating System: Window 11
    • Hermes enabled

    Sample code

     <ActionSheet/>
      id="feed-create-post-sheet"
      ref={actionSheetRef}
      containerStyle={styles.actionContainer}
      statusBarTranslucent
      drawUnderStatusBar={true}
      defaultOverlayOpacity={0.3}
      gestureEnabled={true}>
      <View style={styles.container}>
        <View style={styles.inputConStyle}>
            <TextInput
              value={message}
              onChangeText={handleMessageChange}
              multiline
              style={styles.input}
            />
        </View>
        <Button
          onPress={handle}
        />
      </View>
    </ActionSheet>
    
    opened by ayuleul 13
  • Bump loader-utils from 1.4.0 to 1.4.2 in /expo-example

    Bump loader-utils from 1.4.0 to 1.4.2 in /expo-example

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • ref.hide fix: allow 'data' to be passed through to onClose

    ref.hide fix: allow 'data' to be passed through to onClose

    This makes hide on the ref behave as described in the documentation.

    ref.current?.hide({ confirmed: true }); will now successfully pass { confirmed: true } as the data param, accessible from the onClose callback.

    Useful for when you only have one sheet and you want to determine whether the customer has dismissed the popover or it has been force closed.

    opened by JordanRichards-hx 1
  • Big Delay when opening ActionSheet

    Big Delay when opening ActionSheet

    When opening an Actionsheet it has a massive delay. After 1 Second the animation starts, but it should start instant. Running an console.log onOpen shows, that it fires instant, but the animation starts about 1 Second later.

    I tried changing the openAnimationConfig but didnt achive to remove the delay. Also if i remove all the content in my ActionSheet, there is this delay.

    Has anyone this problem too? I am opening my Actionsheets with an SheetManager.

    opened by jonxssc 1
  • Scrollview/Flatlist scrolling not working on all Platforms + Project Example

    Scrollview/Flatlist scrolling not working on all Platforms + Project Example

    I tried all the stuff from other issues like Scrollview from react-native-gesture-handler or other stuff, all not working.

    Improvment suggestion:

    • attach the swipe function only to the top indicator element, so scrolling works on the rest of the element
    • allow scrolling on different snappoints then fullscreen.

    For all searching for an Solution to this problem: Wrap all the content inside the Scrollview with a Pressable, not a very nice solution but it works for now

    opened by jonxssc 1
  • Closing action sheet causes a bounce on Android

    Closing action sheet causes a bounce on Android

    Closing the action sheet is causing the below bounce on Android only. On iOS the close is smooth and normal. Am i missing something with this?

    Thanks

    Using version 0.8.10

       <ActionSheet
          useBottomSafeAreaPadding
          indicatorStyle={styles.indicatorStyle}
          id={sheetId}
          ref={actionSheetRef}
          snapPoints={[100]}
          statusBarTranslucent
          gestureEnabled
          defaultOverlayOpacity={0.7}
          containerStyle={styles.actionSheetContainer}
        >
          <SafeAreaView>
            <ScrollView {...scrollHandlers} style={styles.scrollview}>
              <View>
                <View style={styles.actionSheetHeader}>
                  <Text style={styles.text}>{payload.title}</Text>
                  <Pressable onPress={() => SheetManager.hide('select-sheet')}>
                    <MaterialIcons
                      name="close"
                      size={26}
                      color={isDarkMode ? colours.white : colours.greyDark80}
                    />
                  </Pressable>
                </View>
                {payload?.children}
              </View>
            </ScrollView>
          </SafeAreaView>
        </ActionSheet>
    

    https://user-images.githubusercontent.com/10877466/199248096-8586bd80-edca-44f1-a3b6-d25696f28700.mov

    opened by SKempin 0
Releases(v0.8.10)
  • v0.8.10(Oct 26, 2022)

    • Fix a race condition causing sheet to not open on iOS #234
    • Fix paddingBottom is NaN crash #231
    • Fix a race condition causing sheet to use incorrect keyboard height on open sometimes
    Source code(tar.gz)
    Source code(zip)
  • v0.8.9(Oct 25, 2022)

    • Fixed onLayout flakiness causing sheet padding to be unstable. Fixed #222
    • Fixed error thrown when padding is not set on containerStyle. #231
    • Fixed unable to click anything after sheet is closed. #226
    Source code(tar.gz)
    Source code(zip)
  • v0.8.8(Oct 9, 2022)

  • v0.8.7(Sep 13, 2022)

  • v0.8.6(Sep 13, 2022)

    What's Changed

    • Fix opening sheet inside modal by @focux in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/202
    • Fix keyboard race condition by @focux in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/205
    • Make data optional in hide() to fix ts error by @shobhitsinghal624 in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/211

    New Contributors

    • @shobhitsinghal624 made their first contribution in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/211

    Full Changelog: https://github.com/ammarahm-ed/react-native-actions-sheet/compare/v0.8.4...v0.8.6

    Source code(tar.gz)
    Source code(zip)
  • v0.8.4(Aug 28, 2022)

    This release mainly includes some important fixes:

    • Fix hardwareBackPress listener should be removed on component unmount by @bobharley in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/194
    • Fix sheet behavior with keyboard, no more jumping/ bouncing animations.
    • Fix height change causing sheet to reanimate from the bottom.
    • Fix gestures are not working in nested action sheets. #199
    • Added prop withNestedSheetProvider to be used for sheets with isModal={false}
    • statusBarTranslucent will have no effect on android. It will be enabled by default as it interferes with keyboard & input handling

    New Contributors

    • @bobharley made their first contribution in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/194

    Full Changelog: https://github.com/ammarahm-ed/react-native-actions-sheet/compare/v0.8.3...v0.8.4

    Source code(tar.gz)
    Source code(zip)
  • v0.8.3(Aug 23, 2022)

  • v0.8.2(Aug 23, 2022)

    • add useBottomSafeAreaPadding prop
    • add docs on safearea handling https://rnas.vercel.app/guides/safearea
    • Fixed hideAll method not working.
    Source code(tar.gz)
    Source code(zip)
  • v0.8.1(Aug 22, 2022)

  • v0.8.0(Aug 21, 2022)

    What's New

    1. Complete rewrite of the library
    2. Background interaction support
    <ActionSheet backgroundInteractionEnabled={true} />
    
    1. Improved ScrollView & FlatList handling.
    2. Official support for react-native-web & expo projects
    3. You can provide an array of snapPoints as a prop and action sheet will move between those points
    4. New overdraw effect
    5. More granular control over action sheet behaviour
    6. Improved SheetManager api
    7. You can now receive result from action sheet and send data to it asynchronously:
    async function openExternalLink(link: string) {
      const canOpen = await SheetManager.show("confirm-sheet", {
        payload: {
          message: `Do you want to open ${link} in your phone browser?`,
        },
      });
      if (canOpen) {
        Linking.openUrl(link);
      }
    }
    

    New Documentation Website

    Detailed guides & API reference of each features of the action sheet. Hosted with @vercel & built with Nextra by @shuding.

    Breaking changes

    v0.8.0 introduces some breaking changes. I tried to minimize them as much as possible but since this is a complete rewrite some of the features of this library have changed. Read the migration guide

    Source code(tar.gz)
    Source code(zip)
  • v0.7.1(Jun 26, 2022)

    What's New

    1. Now you can show the sheet without a Modal. Just set the isModal prop to false
    2. This version introduces a better way to manage all the sheets in your app using a SheetProvider

    Using the SheetProvider

    Create your ActionSheet component and register it with a unique id. Remember that you do not need to render the ActionSheet in any components.

    import React from "react";
    import ActionSheet, { SheetManager,SheetProps,registerSheet } from "react-native-actions-sheet";
    
    function MySheet(props:SheetProps) {
    
    return <ActionSheet id={props.sheetId}>
      <View>
        <Text>Hello World</Text>
      </View>
    </ActionSheet>;
    }
    
    // Register your Sheet component.
    registerSheet('mysheet', MySheet);
    
    export default MySheet;
    

    Create a sheets.tsx or sheets.js file.

    // Import all the sheets here as follows
    import "mysheet.tsx"
    export {};
    

    In App.js import sheets.tsx and wrap your app in SheetProvider.

    import { SheetProvider } from "react-native-actions-sheet";
    import "sheets.tsx"; // here
    
    function App() {
    
      return <SheetProvider>
        {
          // your app components
        }
      </SheetProvider>;
    }
    

    Now you can open the ActionSheet from anywhere in the app.

    SheetManager.show("mysheet");
    
    Source code(tar.gz)
    Source code(zip)
  • v0.6.2(Jun 24, 2022)

    What's Changed

    • Added children type to ActionSheetProps by @francesco-clementi-92 in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/165

    New Contributors

    • @francesco-clementi-92 made their first contribution in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/165

    Full Changelog: https://github.com/ammarahm-ed/react-native-actions-sheet/compare/v0.6.1...v0.6.2

    Source code(tar.gz)
    Source code(zip)
  • v0.6.1(Apr 1, 2022)

  • v0.6.0(Jan 29, 2022)

    What's New

    1. After using the ActionSheet in many projects, I have decided to add a tiny SheetManager class that makes it less tedious to show/hide and manage ActionSheets from across the app.

    Showing the ActionSheet from anywhere in the app is now dead simple.

    SheetManager.show("sheet_id");
    
    <ActionSheet id="sheet_id" />;
    

    The old ref methods are still there so nothing will break in your apps.

    1. Top indicator in ActionSheet can now be styled with indicatorStyle prop.
    2. Keyboard events warning has now been fixed.

    Check the updated docs and Enjoy building something cool with this!

    Source code(tar.gz)
    Source code(zip)
  • v0.5.8(Nov 18, 2021)

  • v0.5.7(Nov 11, 2021)

  • v0.5.6(Oct 25, 2021)

  • v0.5.5(Oct 25, 2021)

  • v0.5.3(Aug 31, 2021)

    • Fix numerous typescript errors #119 Thanks to @RazaShehryar
    • Fix example app throwing errors on launch
    • Add ActionSheetRefObject type which can be used as useRef<ActionSheetRefObject>() for the intellisense to work in typescript.
    • Set drawUnderStatusBar prop to false by default.
    Source code(tar.gz)
    Source code(zip)
  • 0.5.2(Aug 29, 2021)

  • v0.5.1(Aug 10, 2021)

  • v0.5.0(Aug 3, 2021)

    • Convert to Typescript
    • Fixed incorrect indicator positioning
    • Fixed onPositionChanged event not firing
    • ActionSheet behaviour with Keyboard & Inputs is improved, Now the action sheet content is always above the keyboard and does not hide partially behind it.
    • Gestures work now even when Keyboard is open so action sheet can be dismissed
    • Add keyboardDismissMode prop - Set how keyboard should behave on tapping the ActionSheet.
    • Add ExtraOverlayComponent prop - Render a component over the ActionSheet. Useful for rendering Toast components with which user can interact.
    • Removed PropTypes
    Source code(tar.gz)
    Source code(zip)
  • v0.4.9(May 27, 2021)

  • v0.4.8(May 7, 2021)

    Fixed

    1. Fixed stuttering on iOS when opening ActionSheet for the first time. #73
    2. Fixed onPositionChanged called too many times.
    3. Optimised ActionSheet behaviour when using closable prop as discussed in #70

    Changed

    1. addHasReachedTopListener & removeHasReachedTopListener are now deprecated in favour of the new onPositionChanged prop.
    Source code(tar.gz)
    Source code(zip)
  • v0.4.7(Apr 26, 2021)

  • v0.4.6(Apr 23, 2021)

    • Fix incorrect positioning of indicator when ActionSheet covers fullscreen
    • Added a new prop drawUnderStatusBar so you can disable drawing under StatusBar which is enabled by default.
    • Updated Docs
    • Updated example to better handle ScrollView inside ActionSheet on Android. (Now it works similar to iOS)
    Source code(tar.gz)
    Source code(zip)
  • v0.4.5(Apr 19, 2021)

  • v0.4.3(Apr 18, 2021)

Owner
Ammar Ahmed
A simple guy who loves to write, code and take photos.
Ammar Ahmed
📜 Cross platform custom ActionSheet

react-native-custom-actionsheet Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way of drawing it on

Valery Bugakov 47 Oct 21, 2021
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 13 Nov 21, 2022
React Native ActionSheet Android extension

React Native ActionSheet React Native ActionSheet is a JavaScript library for React Native that implements AcionSheet for Android. Its equivalent of A

Ladislav Martincik 25 Mar 5, 2020
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 94 Nov 18, 2022
React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

对此项目的规划 出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下,此工程架构会定期更新升级依赖到最新版本,并不断的积累 App 中常用组件和基础页面功能,也会不断优化代码组织架构 此项目对以下情形会有帮助 想用前端技术做 app 开发却无从下手 想在项目中运用 typescrip

Benson 7 May 13, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 399 Sep 23, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 353 Nov 23, 2022
A cross-platform (iOS / Android) single and multiple-choice React Native component.

react-native-multiple-choice A cross-platform (iOS / Android) single and multiple-choice React Native component. Install npm i react-native-multiple-c

Dan 67 Sep 24, 2022
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.

react-native-webbrowser A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Cur

Dan 197 Sep 27, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 345 Nov 11, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 336 Nov 3, 2022
A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app

react-native-idle-timer A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app Install npm insta

Marc Shilling 157 Nov 7, 2022
Brainfeed: an app that helps you remember articles you want to read later

Brainfeed ?? Brainfeed is an app that helps you remember articles you want to read later Features Light/dark mode toggle Auto-Copying url from clipboa

Maciej Wiatr 2 Feb 1, 2022
A React Native component for user to draw anything by touching screen

react-native-drawpad Basic useful feature list: Let users draw anything they want! change color of input easily change thickness of input easily defau

Partido 用遊戲聊天交友 30 Feb 21, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

Saurav Gupta 171 Nov 9, 2022
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 418 Nov 22, 2022
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Yu Zheng (Sam) 306 Nov 4, 2022
Simple, performant & type-safe cross platform navigation in React Native / React Native Web

Simple and performant cross platform navigation on iOS, Android and the web with simple and type-safe api for React 18 (alpha)

webRidge 33 Aug 26, 2022