update docs

Author: ammarahm-ed

docs/pages/guides/meta.json

@@ -1,6 +1,7 @@
 {
   "sheetmanager": "Usage with SheetManager",
   "passingdata": "Passing data to ActionSheet",
+  "sheetrouter": "Using ActionSheet Router",
   "getdata": "Returning results from ActionSheet",
   "refaccess": "Ref access from anywhere",
   "scrollview": "Using ScrollView",

docs/pages/guides/sheetrouter.mdx

@@ -0,0 +1,68 @@
+# Using ActionSheet router
+
+ActionSheet comes with a tiny router for navigation between different routes in an ActionSheet. This is useful for making different flows in your app without the need to open/close different ActionSheets.
+
+You can say that using a router is like having one Sheet that can replace multiple Sheets in your app with routes.
+
+Router works like any navigation router in your app.
+
+```tsx
+import ActionSheet, {
+  Route,
+  RouteScreenProps,
+  useRouter,
+  useSheetRouteParams,
+} from 'react-native-actions-sheet';
+
+const RouteA = ({router}: RouteScreenProps) => {
+  return (
+    <View>
+      <Button
+        title="Go to Route B"
+        onPress={() => {
+          router.navigate('route-b', {data: 'test'});
+        }}
+      />
+    </View>
+  );
+};
+
+const RouteB = () => {
+  const router = useRouter();
+  const params = useSheetRouteParams();
+
+  return (
+    <View>
+      <Button
+        title="Go Back to Route A"
+        onPress={() => {
+          router.goBack();
+        }}
+      />
+    </View>
+  );
+};
+
+const routes: Route[] = [
+  {
+    name: 'route-a',
+    component: RouteA,
+  },
+  {
+    name: 'route-b',
+    component: RouteB,
+  },
+];
+
+function Sheet(props: SheetProps) {
+  return (
+    <ActionSheet
+      enableRouterBackNavigation={true}
+      routes={routes}
+      initialRoute="route-a"
+    />
+  );
+}
+
+export default Sheet;
+```

docs/pages/reference/actionsheet.mdx

@@ -346,11 +346,58 @@ A function called just before the action sheet is ready to be shown.
 | -------- | -------- |
 | function | no       |
 
+## `onBeforeClose(data:any)`
 
-## `backdropProps`
+A function called just before the action sheet is closing.
 
-An object containing props for the backdrop layer. Used to provide accessibility props.
+| Type     | Required |
+| -------- | -------- |
+| function | no       |
+
+## `routes`
+
+A list of routes for this actions sheet if any.
+
+| Type                        | Required |
+| --------------------------- | -------- |
+| [/reference/route](Route[]) | no       |
+
+## `onNavigate(route: string)`
+
+An event called when navigating to a route in stack
 
 | Type     | Required |
 | -------- | -------- |
-| object   | no       |
+| function | no       |
+
+## `onNavigateBack(route: string)`
+
+| Type     | Required |
+| -------- | -------- |
+| function | no       |
+
+An event called when navigating back in stack.
+
+## `initialRoute`
+
+Initial route to navigate to when the sheet opens.
+
+| Type   | Required |
+| ------ | -------- |
+| string | no       |
+
+## `enableRouterBackNavigation`
+
+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.
+
+| Type    | Required |
+| ------- | -------- |
+| boolean | no       |
+
+## `backdropProps`
+
+An object containing props for the backdrop layer. Used to provide accessibility props.
+
+| Type   | Required |
+| ------ | -------- |
+| object | no       |

docs/pages/reference/meta.json

@@ -7,5 +7,10 @@
   "usescrollhandlers": "useScrollHandlers",
   "registersheet": "registerSheet",
   "showoptions": "ShowOptions",
-  "hideoptions": "HideOptions"
+  "hideoptions": "HideOptions",
+  "userouter": "useRouter",
+  "usesheetrouteparams": "useSheetRouteParams",
+  "usesheetidcontext": "useSheetIDContext",
+  "useprovidercontext": "useProviderContext",
+  "route": "Route"
 }

docs/pages/reference/route.mdx

@@ -0,0 +1,27 @@
+# Route
+
+A single component in router navigation stack.
+
+## `name`
+
+A name for the route
+
+| Type   | Required |
+| ------ | -------- |
+| string | true     |
+
+## `component`
+
+A component to render when navigating to this route
+
+| Type            | Required |
+| --------------- | -------- |
+| React Component | true     |
+
+## `params`
+
+Initial params for the route
+
+| Type | Required |
+| ---- | -------- |
+| any  | false    |

docs/pages/reference/useprovidercontext.mdx

@@ -0,0 +1,6 @@
+# useProviderContext
+
+Get id of the current Sheet provider.
+
+
+

docs/pages/reference/userouter.mdx

@@ -0,0 +1,79 @@
+# useRouter
+
+A hook that helps you navigate between routes inside the sheet.
+
+## `currentRoute:[/reference/route](Route)`
+
+The current navigation route in stack that has been navigated to.
+
+## `navigate(name: string, params?: any, snap?: number)`
+
+Navigate to a route
+
+Parameters:
+
+`name`
+
+Name of the route to navigate to.
+
+| Type   | Required |
+| ------ | -------- |
+| string | true     |
+
+`params`:
+
+Any data to pass to the route during navigation.
+
+| Type | Required |
+| ---- | -------- |
+| any  | false    |
+
+`snap`:
+
+Snap value for navigation animation. Between -100 to 100. A positive value snaps inwards, while a negative value snaps outwards.
+
+| Type        | Required |
+| ----------- | -------- |
+| -100 to 100 | true     |
+
+## `goBack(name?:string, snap?:number)`
+
+Navigate back from a route.
+
+Parameters:
+
+`name`
+
+Name of the route to navigate to.
+
+| Type   | Required |
+| ------ | -------- |
+| string | false    |
+
+`snap`:
+
+Snap value for navigation animation. Between -100 to 100. A positive value snaps inwards, while a negative value snaps outwards.
+
+| Type        | Required |
+| ----------- | -------- |
+| -100 to 100 | true     |
+
+## `close()`
+
+Close the sheet
+
+## `popToTop()`
+
+Pop to top of the stack
+
+## `hasRoutes()`
+
+Check whether any routes have been registered with this sheet.
+
+## `stack: [/reference/route](Route[])`
+
+Get the current rendered stack.
+
+## `canGoBack()`
+
+Check whether router can go back in navigation.

docs/pages/reference/usesheetidcontext.mdx

@@ -0,0 +1,3 @@
+# useSheetIDContext
+
+A simple hook that returns current sheet id.

docs/pages/reference/usesheetrouteparams.mdx

@@ -0,0 +1,3 @@
+# `useSheetRouteParams`
+
+Get route params passed to this route during navigation

example/src/confirm.tsx

@@ -21,7 +21,7 @@ const RouteA = ({router}: RouteScreenProps) => {
       <Button
         title="No"
         onPress={() => {
-          router?.navigate('route-b', undefined, 1);
+          SheetManager.hide('confirm-sheet');
         }}
       />
     </View>
@@ -63,15 +63,13 @@ const routes: Route[] = [
 function ConfirmSheet(props: SheetProps) {
   return (
     <ActionSheet
+      id={props.sheetId}
       statusBarTranslucent={false}
       drawUnderStatusBar={false}
       gestureEnabled={true}
       containerStyle={{
         paddingHorizontal: 12,
       }}
-      onClose={data => {
-        SheetManager.hide(props.sheetId);
-      }}
       enableRouterBackNavigation={true}
       routes={routes}
       initialRoute="route-a"