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