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

v0.8.7

• fix ref not updated in sheet manager.

v0.8.6

What's Changed

• Fix opening sheet inside modal by @focux in #202
• Fix keyboard race condition by @focux in #205
• Make data optional in hide() to fix ts error by @shobhitsinghal624 in #211

New Contributors

• @shobhitsinghal624 made their first contribution in #211

Full Changelog: v0.8.4...v0.8.6

v0.8.4

This release mainly includes some important fixes:

• Fix hardwareBackPress listener should be removed on component unmount by @bobharley in #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 #194

Full Changelog: v0.8.3...v0.8.4

v0.8.3

• Fix touch events getting cancelled by PanResponder.

v0.8.2

• add useBottomSafeAreaPadding prop
• add docs on safearea handling https://rnas.vercel.app/guides/safearea
• Fixed hideAll method not working.