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..b79ea0b --- /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 '../utils/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..9807e26 --- /dev/null +++ b/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 ( + + Home Screen + + {/* @ts-ignore - Suppress the error since the runtime will work fine */} + +