v10.1.1

What's Changed

• Fix hiding nested sheets not working when using SheetManager.hide
• Fix sheet stutter sometimes when animated=false

v10.1.0

What's Changed

• iOS prefersCrossFadeTransitions support by @ammarahm-ed in #471
• Fix error "You are trying to register multiple SheetProviders with the same context id" by @ammarahm-ed in #473
• Add onRequestClose callback by @ammarahm-ed in #474
• Allow setting snapIndex when opening Sheet with Sheet Manager by @ammarahm-ed in #475
• v10.1.0 by @ammarahm-ed in #476

Full Changelog: v10.0.1...v10.1.0

v10.0.1

What's Changed

• Fixed incorrect bottom insets with Keyboard open on Android and iOS
• Updated jsdocs about using containerStyle
• v10.0.1 by @ammarahm-ed in #470

Full Changelog: v10.0.0...v10.0.1

v10.0.0

This is big release for this library with lots of core parts rewritten to better support future versions of React Native.

• Library versioning has been changed from 0.x.x to x.x.x hence the new v10.0.0 release
• Migrate to use react-native-reanimated for smoother 60fps animations
• Migrate to use `react-native-safe-area-context to handle edge-to-edge and SafeArea on iOS.
• New SheetManager.update API allows you to update the ActionSheet in place.

SheetManager.update('example-sheet', {
  payload: {value: 'Happy New Year'},
});

• New SheetManager.getActiveSheets to query Sheets open for a given sheet ID.
• New SheetRegister component added to replace registerSheet functions in 0.9.x.

import {SheetRegister} from 'react-native-actions-sheet';
import ExampleSheet from 'example-sheet.tsx';
 
export const Sheets = () => {
return <SheetRegister sheets={{'example-sheet': ExampleSheet}} />
}

• Allow overriding Sheet props when opening a Sheet using SheetManager
• Improved Sheet onChange event to track Sheet position
• Upgrade gesture handling to use Gesture.native() from react-native-gesture-handler
• Improved ScrollView handling with gestures enabled and added examples for using Legend List and Flash List
• Improved Keyboard handling to work more seemlessly on both iOS and Android
• Now you can disable default elevation/shadow of the action sheet by setting the enableElevation prop to false
• New initialTranslateFactor prop let's you decide where the sheet will appear from on the screen
• safeAreaInsets prop has been removed
• payload prop has been renamed to returnValue prop
• Updated examples app with many new examples and use cases
• Many other bug fixes and improvements

Migration from v0.9.x

Migrating to V10 is mostly straight forward but there are some small breaking changes which may affect your app. Follow the migration guide in the docs here.

Changelog

• refactor: update ActionSheetProps to use StyleProp for styling of containerStyle and indicatorStyle by @arelstone in #432
• ref can be null in web by @lobor in #402
• Fix Race condition on fast show/hide by @ammarahm-ed in #449
• Upgrade to React Native 0.81 & Expo 54 by @ammarahm-ed in #451
• fix(web): allow backgroundInteractionEnabled to work by setting pointerEvents by @Silvallis in #431
• Add support for edge to edge and migrate to use reanimated by @ammarahm-ed in #460
• Fix scrollview bugs by @ammarahm-ed in #463
• docs: fix typo in SheetProvider documentation by @bastiendmt in #457
• docs: fix SheetWithRouter component name by @alexrififi in #455
• docs: update ActionSheet props by @alexrififi in #453
• fix: add enableElevation prop to ActionSheet for shadow support by @nguyenthanhan in #438
• docs: fix docsRepositoryBase by @alexrififi in #454
• Update sheetmanager.mdx by @Ammarahmed1263 in #413
• Add update method to SheetManager by @ammarahm-ed in #469
• V10 by @ammarahm-ed in #465

New Contributors

• @lobor made their first contribution in #402
• @Silvallis made their first contribution in #431
• @bastiendmt made their first contribution in #457
• @alexrififi made their first contribution in #455
• @nguyenthanhan made their first contribution in #438
• @Ammarahmed1263 made their first contribution in #413

Full Changelog: v0.9.7...v10.0.0

v10 alpha 3

It's been 5 years

Time files, I have been working on this library for over 5 years now and made almost 53 releases in that time. In these 5 years React Native has matured a lot. The community has grown exponentially and there have been many new amazing libraries like react-native-safe-area-context , react-native-gesture-handler and react-native-reanimated that have matured to a level where they are being adapted as defaults for almost all React Native apps. Hence the library has gone through a rewrite in v10 to use the above mentions libraries instead of default React Native APIs to improve performance and overall developer experience. This means that the library is more robust, future proof today. Listing the main changes here:

1. Migrate to use react-native-reanimated for animations to provide 60fps animations
2. Migrate to use `react-native-safe-area-context to handle edge-to-edge and SafeArea on iOS.
3. Upgrade gesture handling to use Gesture.native() from react-native-gesture-handler
4. Improved ScrollView handling with gesures enabled
5. Improved Keyboard handling to work more seemlessly on both iOS and Android
6. Many other bug fixes and improvements

I am still working on ironing out the last few bits but feel free to try it out.

What's Changed

• Update ActionSheetProps to use StyleProp for styling of containerStyle and indicatorStyle by @arelstone in #432
• Ref can be null in web by @lobor in #402
• Fix quickly opening/closing a sheet causes the sheet to lose payload data by @ammarahm-ed in #449
• Upgrade Example to React Native 0.81 & Expo 54 by @ammarahm-ed in #451
• Allow backgroundInteractionEnabled to work by setting pointerEvents by @Silvallis in #431
• Migrate to use reanimated, gesture-handler and react-native-safe-area-context by @ammarahm-ed in #460
• Fix scroll view handling by @ammarahm-ed in #463

New Contributors

• @lobor made their first contribution in #402
• @Silvallis made their first contribution in #431

Full Changelog: v0.9.7...10.0.0-alpha.3

v0.9.7

What's new

• Improved handling of keyboard and inputs
• Better gesture control using react-native-gesture-handlers
• Better support for scrollable views inside action sheet
• Improved router for handling multiple pages inside sheet
• Added useSheetRef hook to access sheet ref from context
• Added useSheetPayload hook to get sheet's payload from context
• Support for nesting action sheets
• New and improved example app with lots of examples for almost every action sheet use case
• Improved documentation

Fixes and improvements

• Docs: fix type on initialSnapIndex by @seanpcoyle in #279
• fix: import useSheetRouter instead of useRouter in sheet router g… by @kimjisena in #320
• Update sheetmanager.mdx by @owenduncansnobel in #308
• Correct vertical position of Actionsheet by @aleberguer in #288
• fix: Bottom Space Problem on all devices by @jonxssc in #328
• Adds onTouchBackdrop to pass up the touch event on the backdrop by @gbrvalerio in #292
• Fix react-native-gesture-handler deps by @DanielRiera in #338
• Improve migration guide structure by @yusato in #340
• Docs: Add isModal={false} requirement to the example for bg interaction by @lakardion in #339
• FIX : Invariant Violation: You can define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one, js engine: hermes by @Saliheen in #372
• Update index.tsx for correct offset calculation in onChange by @redy159 in #385

Migrate from v0.8.x

Learn how to migrate your app to v0.9.7 in the docs

New Contributors

• @seanpcoyle made their first contribution in #279
• @kimjisena made their first contribution in #320
• @owenduncansnobel made their first contribution in #308
• @aleberguer made their first contribution in #288
• @jonxssc made their first contribution in #328
• @gbrvalerio made their first contribution in #292
• @DanielRiera made their first contribution in #338
• @yusato made their first contribution in #340
• @lakardion made their first contribution in #339
• @Saliheen made their first contribution in #372
• @redy159 made their first contribution in #385

Full Changelog: v0.8.21...v0.9.7

v0.8.21

What's New

1. A tiny but powerful built-in router for Sheet with support for forward/back navigation like in the app added so you can easily do different flows in a Single Sheet instead of multiple Sheets opening/closing. Example
2. You do not need to set id prop on Sheet anymore if you are using registerSheet. There's a new hook added for that in case you want to access the id of the current sheet, useSheetIDContext.
3. Now you can get the current context by using the hook useProviderContext
4. Auto context & provider handling has been added. This means that you do not need Nested SheetProviders anymore.
5. Exposed getSheetStack method to get all current rendered sheets
6. Check whether a Sheet is rendered on top using isRenderedOnTopmethod
7. Added onBeforeClose prop which get's called just before the Sheet is closing, you can use it for example close the Keyboard etc

New Props

  /**
   * Default safeArea insets provided through a library such as
   * react-native-safe-area-insets. This also helps in giving a tiny boost
   * in performance as the sheet does not have to calculate insets anymore.
   */
  safeAreaInsets?: {top: number; left: number; right: number; bottom: number};
  /**
   * A list of routes for the router.
   */
  routes?: Route[];
  /**
   * An event called when navigating to a route in stack
   */
  onNavigate?: (route: string) => void;
  /**
   * An event called when navigating back in stack.
   */
  onNavigateBack?: (route: string) => void;
  /**
   * Initial route to navigate to when the sheet opens.
   */
  initialRoute?: string;
  /**
   * Enable back navigation for router when pressing hardware back button or
   * touching the back drop. Remember that swiping down the sheet will still close
   * the sheet regardless of the route in stack.
   */
  enableRouterBackNavigation?: boolean;

Router hooks

useRouter

A hook that let's you navigate between routes inside the Sheet

import {useRouter} from "react-native-actions-sheet";

const App = () => {
const router =  useRouter();

router.navigate("sheet-route")
...

Router implements the following methods

export type Router = {
  currentRoute: Route;
  /**
   * @param name  Name of the route to navigate to
   * @param params Params to pass to the route upon navigation. These can be accessed in the route using `useSheetRouteParams` hook.
   * @param snap Snap value for navigation animation. Between -100 to 100. A positive value snaps inwards, while a negative value snaps outwards.
   */
  navigate: (name: string, params?: any, snap?: number) => void;
  /**
   * @param name  Name of the route to navigate back to.
   * @param snap Snap value for navigation animation. Between -100 to 100. A positive value snaps inwards, while a negative value snaps outwards.
   */
  goBack: (name?: string, snap?: number) => void;
  /**
   * Close the action sheet.
   */
  close: () => void;
  /**
   * Pop to top of the stack.
   */
  popToTop: () => void;
  /**
   * Whether this router has any routes registered.
   */
  hasRoutes: () => boolean | undefined;
  /**
   * Get the currently rendered stack.
   */
  stack: Route[];
  /**
   * An internal function called by sheet to navigate to initial route.
   */
  initialNavigation: () => void;
  canGoBack: () => boolean;
};

A single Route in navigation Stack is like below

export type Route = {
  /**
   * Name of the route.
   */
  name: string;
  /**
   * A react component that will render when this route is navigated to.
   */
  component: any;
  /**
   * Initial params for the route.
   */
  params?: any;
};

useSheetRouteParams

Get the passed params for the Route

import {useSheetRouteParams} from "react-native-actions-sheet";

const App = () => {
const params =  useSheetRouteParams();

console.log(params.userId);
...

What's Fixed

1. Fix zIndex causing sheet to render behind backdrop on new arch
2. Fix layout on orientation change. Now Sheet will animate to new position when device orientation changes
3. Fix: allow 'data' to be passed through to onClose using when using ref.hide()
4. Fix Scrolling finally by making the sheet to simply disable gestures inside a ScrollView
5. Fix awaiting result from Sheet is undefined if onClose prop is not set
6. Add missing payload type annotation in SheetManager.show

New Contributors

• @benkaiser made their first contribution in #246
• @JordanRichards-hx made their first contribution in #242
• @luiscrjunior made their first contribution in #264
• @menghany made their first contribution in #268

Full Changelog: v0.8.10...v0.8.21

v0.8.10

• 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

v0.8.9

• 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

v0.8.8

• Added smooth keyboard open/close animations
• Handle case where initialVelocity can be an object causing crash #216