From d9d3075c1e7be2872a609785dcace20eed4ecfc8 Mon Sep 17 00:00:00 2001 From: EQuimper Date: Tue, 11 Nov 2025 09:57:04 -0500 Subject: [PATCH 1/4] chore: add expo-router example and update package --- .github/workflows/ci.yml | 26 +- LICENSE | 2 +- README.md | 24 +- example/expo-router/.gitignore | 6 + example/expo-router/app.json | 36 + example/expo-router/app/_layout.tsx | 40 + example/expo-router/app/big-sheet.tsx | 1 + example/expo-router/app/index.tsx | 24 + example/expo-router/app/sheet-screen.tsx | 52 + example/expo-router/app/sheet.tsx | 1 + .../assets/adaptive-icon.png | Bin example/{ => expo-router}/assets/favicon.png | Bin example/{ => expo-router}/assets/icon.png | Bin .../{ => expo-router}/assets/splash-icon.png | Bin example/{ => expo-router}/babel.config.js | 4 +- example/expo-router/index.js | 1 + example/{ => expo-router}/metro.config.js | 6 +- example/expo-router/package.json | 37 + example/expo-router/tsconfig.json | 14 + example/{ => react-navigation}/app.json | 10 +- .../react-navigation/assets/adaptive-icon.png | Bin 0 -> 17547 bytes example/react-navigation/assets/favicon.png | Bin 0 -> 1466 bytes example/react-navigation/assets/icon.png | Bin 0 -> 22380 bytes .../react-navigation/assets/splash-icon.png | Bin 0 -> 17547 bytes example/react-navigation/babel.config.js | 16 + example/{ => react-navigation}/index.js | 0 example/react-navigation/metro.config.js | 24 + example/{ => react-navigation}/package.json | 6 +- example/{ => react-navigation}/src/App.tsx | 0 .../src/SimpleExample.tsx | 4 +- example/{ => react-navigation}/tsconfig.json | 2 +- example/yarn.lock | 8900 ----------------- package.json | 19 +- src/index.tsx | 2 + src/useBottomSheetNavigation.tsx | 25 + tsconfig.json | 4 +- yarn.lock | 4526 +++++---- 37 files changed, 2802 insertions(+), 11010 deletions(-) create mode 100644 example/expo-router/.gitignore create mode 100644 example/expo-router/app.json create mode 100644 example/expo-router/app/_layout.tsx create mode 100644 example/expo-router/app/big-sheet.tsx create mode 100644 example/expo-router/app/index.tsx create mode 100644 example/expo-router/app/sheet-screen.tsx create mode 100644 example/expo-router/app/sheet.tsx rename example/{ => expo-router}/assets/adaptive-icon.png (100%) rename example/{ => expo-router}/assets/favicon.png (100%) rename example/{ => expo-router}/assets/icon.png (100%) rename example/{ => expo-router}/assets/splash-icon.png (100%) rename example/{ => expo-router}/babel.config.js (73%) create mode 100644 example/expo-router/index.js rename example/{ => expo-router}/metro.config.js (69%) create mode 100644 example/expo-router/package.json create mode 100644 example/expo-router/tsconfig.json rename example/{ => react-navigation}/app.json (62%) create mode 100644 example/react-navigation/assets/adaptive-icon.png create mode 100644 example/react-navigation/assets/favicon.png create mode 100644 example/react-navigation/assets/icon.png create mode 100644 example/react-navigation/assets/splash-icon.png create mode 100644 example/react-navigation/babel.config.js rename example/{ => react-navigation}/index.js (100%) create mode 100644 example/react-navigation/metro.config.js rename example/{ => react-navigation}/package.json (78%) rename example/{ => react-navigation}/src/App.tsx (100%) rename example/{ => react-navigation}/src/SimpleExample.tsx (97%) rename example/{ => react-navigation}/tsconfig.json (72%) delete mode 100644 example/yarn.lock create mode 100644 src/useBottomSheetNavigation.tsx diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index deb2ff5..c5f6ca2 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/LICENSE b/LICENSE index 66d0506..757a165 100644 --- a/LICENSE +++ b/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 diff --git a/README.md b/README.md index 4035442..ecb665c 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ -# @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. @@ -15,7 +17,7 @@ If you don't have those already, you will also need to install the [@gorhom/bott ## Usage ```js -import { createBottomSheetNavigator } from "@th3rdwave/react-navigation-bottom-sheet"; +import { createBottomSheetNavigator } from '@appandflow/react-navigation-bottom-sheet'; // ... @@ -23,7 +25,7 @@ const BottomSheet = createBottomSheetNavigator(); {/* The first screen should be your app content */} @@ -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 }} /> ; // ... // 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 +Array; ``` Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number and string. diff --git a/example/expo-router/.gitignore b/example/expo-router/.gitignore new file mode 100644 index 0000000..5873d9a --- /dev/null +++ b/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 \ No newline at end of file diff --git a/example/expo-router/app.json b/example/expo-router/app.json new file mode 100644 index 0000000..1634003 --- /dev/null +++ b/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 + } + } +} diff --git a/example/expo-router/app/_layout.tsx b/example/expo-router/app/_layout.tsx new file mode 100644 index 0000000..0ef8826 --- /dev/null +++ b/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 '../lib/types'; + +const BottomSheetNavigator = createBottomSheetNavigator(); + +const BottomSheet = withLayoutContext(BottomSheetNavigator.Navigator); + +const renderBackdrop = (props: BottomSheetBackdropProps) => ( + +); + +export const unstable_settings = { + initialRouteName: 'index', +}; + +export default function RootLayout() { + return ( + + + + + + + + ); +} diff --git a/example/expo-router/app/big-sheet.tsx b/example/expo-router/app/big-sheet.tsx new file mode 100644 index 0000000..ef34dfb --- /dev/null +++ b/example/expo-router/app/big-sheet.tsx @@ -0,0 +1 @@ +export { default } from './sheet-screen'; diff --git a/example/expo-router/app/index.tsx b/example/expo-router/app/index.tsx new file mode 100644 index 0000000..7fdcb60 --- /dev/null +++ b/example/expo-router/app/index.tsx @@ -0,0 +1,24 @@ +import { Button, Text, View } from 'react-native'; +import { styles } from '../lib/styles'; +import { Link, useRouter } from 'expo-router'; + +export default function HomeScreen() { + const router = useRouter(); + return ( + + Home Screen + + {/* @ts-expect-error comment - Suppress the error since the runtime will work fine */} + +