From 8a9bcbdebcaf6c9ecd7165353ceea55067e216cb Mon Sep 17 00:00:00 2001 From: lodev09 Date: Sun, 23 Nov 2025 16:04:56 +0800 Subject: [PATCH 1/7] feat(example): add navigation integration demo with modal screen - Upgrade React Navigation deps to latest (7.1.21 & 7.7.0) - Convert Button component from TouchableOpacity to Pressable with touch feedback - Add NavigationSheet component with detents to demonstrate opening RN modal from TrueSheet - Add ModalScreen to show modal presentation from within sheet - Update navigation stack with modal presentation option --- example/package.json | 4 +- example/src/App.tsx | 5 +- example/src/components/Button.tsx | 20 +- .../src/components/sheets/NavigationSheet.tsx | 47 + example/src/components/sheets/index.ts | 1 + example/src/screens/ChildScreen.tsx | 5 +- example/src/screens/ModalScreen.tsx | 45 + example/src/screens/NavigationScreen.tsx | 9 +- example/src/screens/index.ts | 1 + example/src/types.ts | 1 + package-lock.json | 35004 ++++++++++++++++ yarn.lock | 8 +- 12 files changed, 35133 insertions(+), 17 deletions(-) create mode 100644 example/src/components/sheets/NavigationSheet.tsx create mode 100644 example/src/screens/ModalScreen.tsx create mode 100644 package-lock.json diff --git a/example/package.json b/example/package.json index 3c0e8438..70625873 100644 --- a/example/package.json +++ b/example/package.json @@ -10,8 +10,8 @@ "build:ios": "react-native build-ios --mode Debug" }, "dependencies": { - "@react-navigation/native": "^7.1.20", - "@react-navigation/native-stack": "^7.6.3", + "@react-navigation/native": "^7.1.21", + "@react-navigation/native-stack": "^7.7.0", "react": "19.1.1", "react-native": "0.82.1", "react-native-gesture-handler": "^2.29.1", diff --git a/example/src/App.tsx b/example/src/App.tsx index 71b6f256..e4a2ed35 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,7 +1,7 @@ import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import { MapScreen, NavigationScreen, ChildScreen } from './screens'; +import { MapScreen, NavigationScreen, ChildScreen, ModalScreen } from './screens'; import type { AppStackParamList } from './types'; import { ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet'; @@ -13,7 +13,7 @@ const App = () => { { component={NavigationScreen} /> + diff --git a/example/src/components/Button.tsx b/example/src/components/Button.tsx index a4457029..9fd7b1dc 100644 --- a/example/src/components/Button.tsx +++ b/example/src/components/Button.tsx @@ -1,17 +1,24 @@ -import { StyleSheet, Text, TouchableOpacity, type TouchableOpacityProps } from 'react-native'; +import { Pressable, StyleSheet, Text, type PressableProps } from 'react-native'; import { styles as constantStyles, BORDER_RADIUS, DARK_BLUE } from '../utils'; -interface ButtonProps extends TouchableOpacityProps { +interface ButtonProps extends PressableProps { text: string; } export const Button = (props: ButtonProps) => { - const { text, style: $styleOverride, ...rest } = props; + const { text, style, ...rest } = props; return ( - + [ + styles.button, + pressed && styles.pressed, + typeof style === 'function' ? style({ pressed }) : style, + ]} + {...rest} + > {text} - + ); }; @@ -23,4 +30,7 @@ const styles = StyleSheet.create({ backgroundColor: DARK_BLUE, alignItems: 'center', }, + pressed: { + opacity: 0.8, + }, }); diff --git a/example/src/components/sheets/NavigationSheet.tsx b/example/src/components/sheets/NavigationSheet.tsx new file mode 100644 index 00000000..967c3a6b --- /dev/null +++ b/example/src/components/sheets/NavigationSheet.tsx @@ -0,0 +1,47 @@ +import { forwardRef } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { TrueSheet } from '@lodev09/react-native-true-sheet'; +import type { TrueSheetProps } from '@lodev09/react-native-true-sheet'; + +import { Button } from '../Button'; +import { SPACING } from '../../utils'; +import { useAppNavigation } from '../../hooks'; + +export const NavigationSheet = forwardRef((props, ref) => { + const navigation = useAppNavigation(); + + const handleOpenModal = () => { + navigation.navigate('Modal'); + }; + + return ( + + + Navigation Sheet + + This sheet demonstrates opening a React Navigation modal from within a TrueSheet. + +