chore: add expo-router example and update package (#37)

* chore: add expo-router example and update package

* fix: fix example

* fix: ts comment

* fix: fix ts error

Author: EQuimper

.github/workflows/ci.yml

@@ -57,16 +57,16 @@ jobs:
       - name: Build package
         run: yarn prepare
 
-  build-web:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Build example for Web
-        run: |
-          yarn example expo export --platform web
+  # build-web:
+  #   runs-on: ubuntu-latest
+  #
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+  #
+  #     - name: Setup
+  #       uses: ./.github/actions/setup
+  #
+  #     - name: Build example for Web
+  #       run: |
+  #         yarn example expo export --platform web

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Janic Duplessis
+Copyright (c) 2025 AppAndFlow
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,29 +1,31 @@
-# @th3rdwave/react-navigation-bottom-sheet
+# @appandflow/react-navigation-bottom-sheet
 
 Bottom sheet navigator for React Navigation.
 
+Can also work with Expo Router [example](./example/expo-router/)
+
 Integrates [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) with [React Navigation](https://github.com/react-navigation/react-navigation).
 
 ## Installation
 
 ```sh
-yarn add @th3rdwave/react-navigation-bottom-sheet @react-navigation/native @gorhom/bottom-sheet
+yarn add @appandflow/react-navigation-bottom-sheet @react-navigation/native @gorhom/bottom-sheet
 ```
 
 If you don't have those already, you will also need to install the [@gorhom/bottom-sheet dependencies](https://gorhom.github.io/react-native-bottom-sheet/#dependencies) react-native-reanimated and react-native-gesture-handler.
 
 ## Usage
 
 ```js
-import { createBottomSheetNavigator } from "@th3rdwave/react-navigation-bottom-sheet";
+import { createBottomSheetNavigator } from '@appandflow/react-navigation-bottom-sheet';
 
 // ...
 
 const BottomSheet = createBottomSheetNavigator();
 
 <BottomSheet.Navigator
   // Default options
-  screenOptions={{ snapPoints: ["60%", "90%"] }}
+  screenOptions={{ snapPoints: ['60%', '90%'] }}
 >
   {/* The first screen should be your app content */}
   <BottomSheet.Screen name="app" component={MyApp} />
@@ -32,18 +34,22 @@ const BottomSheet = createBottomSheetNavigator();
     name="secondSheet"
     component={SecondSheetComponent}
     // Can pass any prop from @gorhom/bottom-sheet's BottomSheetModal
-    options={{ snapPoints: [200, "100%"], index: 1 }}
+    options={{ snapPoints: [200, '100%'], index: 1 }}
   />
 </BottomSheet.Navigator>;
 
 // ...
 
 // Open like any regular react-navigation screen.
-navigation.navigate("firstSheet", { id: 1 });
-
+navigation.navigate('firstSheet', { id: 1 });
 ```
 
-See the [example app](./example/src/SimpleExample.tsx) for full usage details.
+See the React Navigation [example app](./example/react-navigation/src/SimpleExample.tsx) or the Expo Router example under [`example/expo-router/app`](./example/expo-router/app) for full usage details.
+
+### Running the examples
+
+- `yarn example:react-navigation` – launches the classic React Navigation sample
+- `yarn example:expo-router` – launches the Expo Router sample
 
 ## API
 
@@ -52,7 +58,7 @@ See the [example app](./example/src/SimpleExample.tsx) for full usage details.
 #### `snapPoints`
 
 ```ts
-Array<string | number>
+Array<string | number>;
 ```
 
 Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number and string.

example/expo-router/.gitignore

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

example/expo-router/app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "@appandflow/react-navigation-bottom-sheet expo-router",
+    "slug": "appandflow-react-navigation-bottom-sheet-expo-router",
+    "description": "Expo Router example app for @appandflow/react-navigation-bottom-sheet",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "testlibrary.example.exporouter"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "package": "testlibrary.example.exporouter"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

example/expo-router/app/_layout.tsx

@@ -0,0 +1,40 @@
+import { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import type { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
+import { createBottomSheetNavigator } from '@appandflow/react-navigation-bottom-sheet';
+import { withLayoutContext } from 'expo-router';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import type { BottomSheetParamList } from '../utils/types';
+
+const BottomSheetNavigator = createBottomSheetNavigator<BottomSheetParamList>();
+
+const BottomSheet = withLayoutContext(BottomSheetNavigator.Navigator);
+
+const renderBackdrop = (props: BottomSheetBackdropProps) => (
+  <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
+);
+
+export const unstable_settings = {
+  initialRouteName: 'index',
+};
+
+export default function RootLayout() {
+  return (
+    <GestureHandlerRootView>
+      <BottomSheet
+        screenOptions={{
+          backdropComponent: renderBackdrop,
+          enableDynamicSizing: false,
+        }}
+      >
+        <BottomSheet.Screen name="index" />
+        <BottomSheet.Screen name="sheet" />
+        <BottomSheet.Screen
+          name="big-sheet"
+          options={{
+            snapPoints: ['60%', '80%'],
+          }}
+        />
+      </BottomSheet>
+    </GestureHandlerRootView>
+  );
+}

example/expo-router/app/big-sheet.tsx

@@ -0,0 +1 @@
+export { default } from './sheet-screen';

example/expo-router/app/index.tsx

@@ -0,0 +1,24 @@
+import { Button, Text, View } from 'react-native';
+import { styles } from '../utils/styles';
+import { Link, useRouter } from 'expo-router';
+
+export default function HomeScreen() {
+  const router = useRouter();
+  return (
+    <View style={styles.container}>
+      <Text>Home Screen</Text>
+      <View style={styles.spacer} />
+      {/* @ts-ignore - Suppress the error since the runtime will work fine */}
+      <Link href="/sheet?id=1" asChild>
+        <Button title="Open sheet" />
+      </Link>
+      <View style={styles.spacer} />
+      <Button
+        title="Open a big sheet"
+        onPress={() => {
+          router.push('/big-sheet?id=1');
+        }}
+      />
+    </View>
+  );
+}

example/expo-router/app/sheet-screen.tsx

@@ -0,0 +1,52 @@
+import { Button, Text, View } from 'react-native';
+import { useBottomSheetNavigation } from '@appandflow/react-navigation-bottom-sheet';
+import { styles } from '../utils/styles';
+import type { BottomSheetParamList } from '../utils/types';
+import { useLocalSearchParams, usePathname, useRouter } from 'expo-router';
+
+export default function SheetScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const router = useRouter();
+  const navigation = useBottomSheetNavigation<BottomSheetParamList>();
+  const pathname = usePathname();
+  return (
+    <View style={[styles.container, styles.content]}>
+      <Text>Sheet Screen {id}</Text>
+      <View style={styles.spacer} />
+      <Button
+        title="Open new sheet"
+        onPress={() => {
+          router.push({
+            pathname: '/sheet',
+            params: { id: Number(id) + 1 },
+          });
+        }}
+      />
+      <View style={styles.spacer} />
+      <Button
+        title="Open new big sheet"
+        onPress={() => {
+          router.navigate(`/big-sheet?id=${Number(id) + 1}`);
+        }}
+      />
+      <View style={styles.spacer} />
+      <Button
+        title="Close this sheet"
+        onPress={() => {
+          router.back();
+        }}
+      />
+      {pathname.includes('big-sheet') && (
+        <>
+          <View style={styles.spacer} />
+          <Button
+            title="Snap to top"
+            onPress={() => {
+              navigation.snapTo(1);
+            }}
+          />
+        </>
+      )}
+    </View>
+  );
+}

example/expo-router/app/sheet.tsx

@@ -0,0 +1 @@
+export { default } from './sheet-screen';