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

Issues
  • 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 24
  • 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
  • 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
  • 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 14
  • snapToOffset function will trigger _returnToPrevScrollPosition

    snapToOffset function will trigger _returnToPrevScrollPosition

    Hi, I have tried to call snapToOffset function in the CustomHeaderComponent to show like dismissing the action-sheet to the bottom when clicking on the header.

    However, the _onScrollEnd function will get called each time after onScroll function. Again, the action sheet will call _returnToPrevScrollPosition.

    Not sure what do I miss here. Appreciate any helps. Thanks.

    https://user-images.githubusercontent.com/79141836/116054421-38a83480-a6ae-11eb-802f-8b881ab4979c.mov

    here is the piece of code of my testing

            <ActionSheet
              containerStyle={{borderRadius: 32}}
              animated={false}
              initialOffsetFromBottom={0.7}
              ref={actionSheetRef}
              onOpen={onOpen}
              statusBarTranslucent
              onPositionChanged={onHasReachedTop}
              gestureEnabled={true}
              onClose={onClose}
              closable={false}
              bottomOffset={200}
              closeOnPressBack={false}
              CustomHeaderComponent={
                  <TouchableOpacity
                    onPress={() => {
                      console.log('header is clicked');
                      actionSheetRef.current?.snapToOffset(200);
                    }}
                  >
                    <View style={styles.indicator} />
                  </TouchableOpacity>
              }
              defaultOverlayOpacity={0}>
    

    the inspiration of the testing is here.

    https://user-images.githubusercontent.com/79141836/116055123-fa5f4500-a6ae-11eb-8823-c809e5904ea5.mov

    opened by aliceInWahed 13
  • When data is received from a service, ActionSheet becomes not visible.

    When data is received from a service, ActionSheet becomes not visible.

    Probably there is an automatic toggle of the ModalVisible state. Is this by design?

    If so I guess I could keep track of the modalVisible state outside the component? Or is there a way to disable the modalVisible automation?

    Example gif:

    Working with static data (provided from outside): CleanShot 2020-06-11 at 09 45 54

    Dynamic data: CleanShot 2020-06-11 at 09 46 30

    opened by superandrew 10
  • First action on the ActionSheet isnt working in Android and iOS

    First action on the ActionSheet isnt working in Android and iOS

    Hi, I am currently using the ActionSheet to show a few touchable options inside it. When the ActionSheet is launched, the first action doesn't seem to be working. I tried setting the zIndex as 1, but thats solving the issue only in Android. Is there something I am missing, or is there a better way to do this, could you please help me with it?

    To give an idea about the Usage:

    There is a parent view which loads another component in which the ActionSheet code is available. something like below:

    <View style={{ flex: 1}}> ..... <CustomComponent ref={ref} {...props} /> </View>

    Inside CustomComponent: <> ... <ActionSheet ref={ref} containerStyle={{ flex: 1 }} {...} /> </>

    opened by Sriman97 9
  • White space at the bottom

    White space at the bottom

    I upgraded to version 0.5.6 but still white at the bottom <ActionSheet ref={ref => this.refTest = ref}> <View style={{ backgroundColor: 'red', height: 200 }}>

    Simulator Screen Shot - iPhone 11 - 2021-10-26 at 08 07 15

    opened by duonghoangphong 8
  • Bump shelljs from 0.8.4 to 0.8.5 in /example

    Bump shelljs from 0.8.4 to 0.8.5 in /example

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    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] 0
  • Crash when trying to close the action sheet.

    Crash when trying to close the action sheet.

    Whenever I try to hide the action sheet, this happens. Simulator Screen Shot - iPhone 13 - 2021-12-21 at 15 57 38 Screenshot 2021-12-21 at 3 57 49 PM

    opened by aliraza96 1
  • Update container style order to be customizable 138

    Update container style order to be customizable 138

    closes #138

    THis will allow users to apply their own custom styles, such as padding-bottom.

    opened by naderalfakesh 0
  • 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 0
  • issue action sheet doesn't open after closing another modal that has/hasn't keyboard opened

    issue action sheet doesn't open after closing another modal that has/hasn't keyboard opened

    issue

    The actionsheet doesnt open when ref.current?.setModalVisible(true) is called inside a setTimeout. Also doesnt opens when is tried to open after closing another modal that had the keyboard opened.

    The expected behavior are the first 15 seconds where we open a modal, select something and open the action sheet after that. You can see the 18 second where we select something from the modal with the keyboard opened but nothing appears, only the overlay of the actionsheet, here is the issue. In my opinion, needs a delay to open the actionsheet but when I try to put the ref.current?.setModalVisible(true) inside a setTimeout callback the ref always returns null, I dont know why this happens. But when is outside always works...

    In the last seconds of the video we can see that one time the action sheet opened even with the keyboard opened, so it pretty weird, in android sometimes it doesnt open completed and just the header or middle of content.

    code

    const handleSelectProduct = useCallback((newProduct) => {
        setSelectedProduct(newProduct);
        setShowSelectModal(false);//close modal
        console.log("out",actionSheetRef.current); //the ref has the right object
        //if is outside the callback it works sometimes
        if (newProduct) actionSheetRef.current?.setModalVisible(true);
        setTimeout(() => {
            console.log("in",actionSheetRef.current); //always null
            //if is inside never works
            //if (newProduct) actionSheetRef.current?.setModalVisible(true);
        }, Platform.OS === "ios" ? 300 : 0);
    }, [setSelectedProduct, setShowSelectModal, actionSheetRef]);
    

    Versions

    "native-base": "^2.15.2", "react": "17.0.1", "react-dom": "17.0.1", "react-native": "0.64.3", "react-native-actions-sheet": "^0.5.6",

    video

    https://user-images.githubusercontent.com/26872450/142474001-04594105-5a43-4729-b867-60333a2c32c7.MP4

    help me out @ammarahm-ed please!

    I havent seen any issue like this.

    opened by joseortiz9 4
  • Double swipe for actionsheet closing not working

    Double swipe for actionsheet closing not working

    hi thanks for this legendary library, in the example, the scrollview is waiting for the scroll to be full screen after the scroll is completed on the up scroll, this is very nice. Can we make the same process wait for it to scroll again so that it closes when the scroll down is complete?

    opened by EmreKorpe 2
  • Action sheet not opening on component re-render.

    Action sheet not opening on component re-render.

    Action sheet version: "0.4.9" React native version: 0.63.4

    My parent component:

    <View style={styles.loginContainer}>
    	<View style={styles.login_logo}>
    		<Image style={{ width: 200, height:200 }} source={require('../test.jpg')} />
    	</View>
    	<InputActionSheet />
    </View>
    

    InputActionSheet Component:

    useEffect(() => {
    	navigation.addListener('focus', () => {
    	    setTimeout(() => {
    	        actionSheetRef.current?.setModalVisible();
    		actionSheetRef.current?.show();
    		console.log(actionSheetRef.current);
    		console.log('Inside useEffect of InputActionSHeet');
    	  }, 1000);
    	});
    }, []);
    
    return (
        <ActionSheet 
    	ref={actionSheetRef}
    	closeOnPressBack={false}
    	closeOnTouchBackdrop={false}
    	closable={false}
    	headerAlwaysVisible={true}
    	indicatorColor='#bbbbbb'
    	overlayColor='white'
    	containerStyle={styles.actionSheetStyle}
    	elevation={10}
         >
            <LoginComponent />	
      </ActionSheet>
    );
    

    On the first render of the Parent component, everything works fine. But when I navigate to a different Screen from the LoginComponent and then press the System back button, the console.log is working, but my actionsheet is not displayed. What am I missing here?

    Also, the elevation prop is not working. Am I doing something wrong?

    opened by saurav-bhagat 5
  • Close multiple open action sheets at once

    Close multiple open action sheets at once

    I have multiple action sheets open. An action sheet opens from another action sheet. Image below

    photo_2021-06-01_07-50-30

    I want to close all the previously opened action sheets from the last one when an action is performed. It's not currently able to that.

    Expected behaviour: Close all open action sheets when action is carried out, for instance, at the click or tap the DONE button

    Possible solution: Navigate to another screen in the app but that isn't ideal as I would like the users of the app to remain on the screen they initiated the action sheet from.

    Any possible solution to this or a workaround will be highly appreciated

    opened by natemartins 2
  • Dont want talkback to read the header once the actionsSheet is opened

    Dont want talkback to read the header once the actionsSheet is opened

    The talkback is reading the header of actionssheet while opening which I don't want. I want the focus to go into the view directly. Please help

    opened by blaze-nitd 3
  • Multiple action sheet issue on the same screen

    Multiple action sheet issue on the same screen

    I tried to insert two action sheets in my screen, here is my code:

    export class HomeScreen extends React.Component {
      actionSheetRef;
      plainActionSheetRef;
    
      constructor(props: any) {
        super(props);
        this.actionSheetRef = createRef<ActionSheet>();
        this.plainActionSheetRef = createRef<ActionSheet>();
      }
    
      render() {
        return (
          <View
            style={{
              justifyContent: 'center',
              flex: 1,
            }}
          >
            <TouchableOpacity
              onPress={() => {
                this.actionSheetRef.current?.setModalVisible();
              }}
            >
              <MFText>Open First ActionSheet</MFText>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.plainActionSheetRef.current?.setModalVisible();
              }}
            >
              <MFText>Open Second ActionSheet</MFText>
            </TouchableOpacity>
    
            <ActionSheet
              ref={this.actionSheetRef}
              extraScroll={34}
              gestureEnabled={true}
            >
              <MFText>first action sheet - row 1</MFText>
              <MFText>first action sheet - row 2</MFText>
              <MFText>first action sheet - row 3</MFText>
              <MFText>first action sheet - row 4</MFText>
            </ActionSheet>
    
            <ActionSheet
              key="asd"
              ref={this.plainActionSheetRef}
              extraScroll={34}
              gestureEnabled={true}
            >
              <MFText>second action sheet - row 1</MFText>
              <MFText>second action sheet - row 2</MFText>
              <MFText>second action sheet - row 3</MFText>
              <MFText>second action sheet - row 4</MFText>
            </ActionSheet>
          </View>
        );
      }
    }
    

    I tried also in functional component and class based component. The issue is that the extraScroll parameter doesn't work for the secondly opened action sheet:

    1 2

    extra info: It's the same issue, if i don't use the extraScroll parameter, so in case of the first action sheet i can scroll up, but for the second the scrolling up doesn't work. (scrolling down -> hiding the action sheet always works).

    Can I ask you help, what could be wrong? Or I can't use two ActionSheet components in one screen?

    opened by mateattilabarna 3
Releases(v0.5.8)
  • 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)

  • 0.4.0(Dec 28, 2020)

    Since the previous release of this library I have been busy with some stuff but finally a new and more amazing version is out that has a lot of fixes and cool things added to make your applications snappier and cooler than before!

    What's New

    1. New and simpler show() and hide() methods for opening and closing the ActionSheet.
    2. New height calculation algorithms that work more accurately than before.
    3. Added an underlay which appears on top when ActionSheet is fullscreen size.
    4. Set Maximum height limit for ActionSheet so it never goes beyond the screen size.
    5. Handle Orientation Change accurately.
    6. Add better support for ScrollViews inside the ActionSheet.
    7. Introduced a new method, handleChildScrollEnd that helps you handle ActionSheet closing/opening when using internal ScrollViews.
    8. Refactor the example App.
    9. Fix minor typo's in README.md
    10. Fix borderRadius cannot be changed for the ActionSheet.
    11. Increase ActionSheet closing Animation duration for smoother animations.
    12. Fix typescript definitions
    13. Refactor code

    What's Removed

    1. Footer related props and Footer has been removed from ActionSheet. You can add a custom Footer if you need one.

    Finally Thank You! for 100K Downloads on NPM!

    Source code(tar.gz)
    Source code(zip)
  • v0.3.5(Sep 6, 2020)

  • 0.3.2(Aug 18, 2020)

  • v0.3.1(Jul 15, 2020)

  • 0.3.0(Jun 15, 2020)

  • 0.2.9(May 30, 2020)

    What's New

    1. Use translucent status bar on android #28 Thanks @aarongrider
    2. Fix method onOpen called without arrow function #27 Thanks @maicolsantos
    Source code(tar.gz)
    Source code(zip)
  • 0.2.8(May 22, 2020)

  • v0.2.7(May 18, 2020)

    What's New

    1. Allow ActionSheet to stay open always unless closed programatically. @Jackthomsonn #23
    2. fixed incorrect ts & proptypes defs. #21
    3. add snapToOffset method so you can snap ActionSheet to an offset as needed
    4. add closable & bottomOffset props
    5. Send boolean value in hasReachedTop listener
    6. Fix Spring Effect not working on dragging a little from previous offset
    7. Some minor refactoring
    8. Change default indicatorColor to #f0f0f0
    9. Change default springOffset to 100 from 50

    That's all for now

    Source code(tar.gz)
    Source code(zip)
  • 0.2.6(Apr 23, 2020)

    What's New

    1. Disable animation on modal to fix unresponsive screen after ActionSheet is Closed. Fixes #20
    2. Add delayActionSheetDraw and delayActionSheetDrawTime props.
    3. Add complete JSDoc to index.d.ts file for easier code writing.
    4. Fix some typescript definations.
    5. Improve ActionSheet Open/Close performance.
    6. Add ability to explicitly show or hide ActionSheet #19 Thanks to @theill

    No Breaking Changes

    Source code(tar.gz)
    Source code(zip)
  • 0.2.5(Apr 9, 2020)

  • 0.2.3(Mar 23, 2020)

  • 0.2.2(Mar 21, 2020)

Owner
Ammar Ahmed
A simple guy who loves to write, code and take photos.
Ammar Ahmed
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 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 9 Dec 6, 2021
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 68 Jan 17, 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 6 Aug 24, 2021
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 397 Dec 23, 2021
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 330 Jan 15, 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 Dec 4, 2021
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 192 Dec 28, 2021
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
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 347 Jul 23, 2021
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 1 Dec 21, 2021
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 139 Jan 4, 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 301 Jan 19, 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 用遊戲聊天交友 29 Feb 24, 2021
✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay

How it works code import { RNHoleView } from 'react-native-hole-view'; <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <

ibitcy 131 Jan 19, 2022
React-magic-scroll - A react library for adding some effect you want when scroll

react-magic-scroll A react library for adding some effect you want when scroll.

diandian 1 Jan 10, 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 322 Jan 18, 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) 289 Jan 4, 2022