A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
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.useProviderContext
SheetProviders anymore.getSheetStack method to get all current rendered sheetsisRenderedOnTopmethodonBeforeClose prop which get's called just before the Sheet is closing, you can use it for example close the Keyboard etc /**
* 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;
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;
};
Get the passed params for the Route
import {useSheetRouteParams} from "react-native-actions-sheet";
const App = () => {
const params = useSheetRouteParams();
console.log(params.userId);
...
onClose using when using ref.hide()
onClose prop is not setSheetManager.show
Full Changelog: https://github.com/ammarahm-ed/react-native-actions-sheet/compare/v0.8.10...v0.8.21
paddingBottom is NaN crash #231onLayout flakiness causing sheet padding to be unstable. Fixed #222containerStyle. #231initialVelocity can be an object causing crash #216Full Changelog: https://github.com/ammarahm-ed/react-native-actions-sheet/compare/v0.8.4...v0.8.6
This release mainly includes some important fixes:
hardwareBackPress listener should be removed on component unmount by @bobharley in https://github.com/ammarahm-ed/react-native-actions-sheet/pull/194
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 handlingFull Changelog: https://github.com/ammarahm-ed/react-native-actions-sheet/compare/v0.8.3...v0.8.4
useBottomSafeAreaPadding prophideAll method not working.