Feat: add navigation example

example/android/app/src/main/java/truesheet/example/MainActivity.kt

@@ -4,9 +4,14 @@ import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
+import android.os.Bundle
 
 class MainActivity : ReactActivity() {
 
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null)
+  }
+
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

example/ios/Podfile.lock

@@ -1244,6 +1244,72 @@ PODS:
     - Yoga
   - react-native-maps (1.20.1):
     - React-Core
+  - react-native-safe-area-context (5.1.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - react-native-safe-area-context/common (= 5.1.0)
+    - react-native-safe-area-context/fabric (= 5.1.0)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/common (5.1.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/fabric (5.1.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - react-native-safe-area-context/common
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-true-sheet (1.0.3):
     - DoubleConversion
     - glog
@@ -1619,6 +1685,51 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNScreens (4.5.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNScreens/common (= 4.5.0)
+    - Yoga
+  - RNScreens/common (4.5.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.1)
   - Yoga (0.0.0)
 
@@ -1661,6 +1772,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-maps (from `../node_modules/react-native-maps`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-true-sheet (from `../..`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1690,6 +1802,7 @@ DEPENDENCIES:
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1770,6 +1883,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   react-native-true-sheet:
     :path: "../.."
   React-nativeconfig:
@@ -1828,6 +1943,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1868,6 +1985,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
   React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
   react-native-maps: ee1e65647460c3d41e778071be5eda10e3da6225
+  react-native-safe-area-context: cbadf383376f589bb611c8ae0280c1d4b7b447e9
   react-native-true-sheet: 00be9fe24ef77f41f9c70efbeb30bb5ac91c2893
   React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
   React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
@@ -1897,6 +2015,7 @@ SPEC CHECKSUMS:
   ReactCodegen: ae99a130606068ed40d1d9c0d5f25fda142a0647
   ReactCommon: 89c87b343deacc8610b099ac764848f0ce937e3e
   RNReanimated: 006a5d3961bf09c1e96d62ed436e02b2e43b89bb
+  RNScreens: b02af14099030cc1e63f74f2791574e909fc1541
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
 

example/package.json

@@ -10,11 +10,15 @@
     "build:ios": "react-native build-ios --scheme TrueSheetExample --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\""
   },
   "dependencies": {
+    "@react-navigation/native": "^7.0.14",
+    "@react-navigation/native-stack": "^7.2.0",
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-edge-to-edge": "^1.1.3",
     "react-native-maps": "^1.20.1",
-    "react-native-reanimated": "^3.16.3"
+    "react-native-reanimated": "^3.16.3",
+    "react-native-safe-area-context": "^5.1.0",
+    "react-native-screens": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

example/src/App.tsx

@@ -1,116 +1,28 @@
-import { useRef } from 'react'
-import { Text, View, type TextStyle, type ViewStyle } from 'react-native'
-import { TrueSheet } from '@lodev09/react-native-true-sheet'
-import MapView from 'react-native-maps'
+import { NavigationContainer } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
-import {
-  BasicSheet,
-  BlankSheet,
-  FlatListSheet,
-  GestureSheet,
-  PromptSheet,
-  ScrollViewSheet,
-} from './sheets'
-import { Button, Spacer } from './components'
-import { BLUE, DARK, GRAY, SPACING } from './utils'
+import { MapScreen, NavigationScreen, ChildScreen } from './screens'
+import type { AppStackParamList } from './types'
 
-export default function App() {
-  const sheetRef = useRef<TrueSheet>(null)
-
-  const basicSheet = useRef<TrueSheet>(null)
-  const promptSheet = useRef<TrueSheet>(null)
-  const scrollViewSheet = useRef<TrueSheet>(null)
-  const flatListSheet = useRef<TrueSheet>(null)
-  const gestureSheet = useRef<TrueSheet>(null)
-  const blankSheet = useRef<TrueSheet>(null)
-
-  const presentBasicSheet = async (index = 0) => {
-    await basicSheet.current?.present(index)
-    console.log('Sheet 1 present async')
-  }
+const Stack = createNativeStackNavigator<AppStackParamList>()
 
+const App = () => {
   return (
-    <View style={$container}>
-      <MapView
-        style={$map}
-        initialCamera={{
-          altitude: 18000,
-          zoom: 14,
-          center: {
-            latitude: 9.306743705457553,
-            longitude: 123.30474002203727,
-          },
-          pitch: 0,
-          heading: 0,
-        }}
-        userInterfaceStyle="dark"
-      />
-
-      <TrueSheet
-        sizes={['15%', 'auto', 'large']}
-        ref={sheetRef}
-        blurTint="dark"
-        backgroundColor={DARK}
-        edgeToEdge
-        contentContainerStyle={{ padding: SPACING, paddingBottom: SPACING * 3 }}
-        dimmedIndex={2}
-        dismissible={false}
-        cornerRadius={12}
-        initialIndex={1}
-        // initialIndexAnimated={false}
-        onMount={() => {
-          // sheetRef.current?.present(1)
-          console.log('Sheet is ready!')
-        }}
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{ headerTransparent: true, headerTintColor: 'white' }}
+        initialRouteName="Navigation"
       >
-        <View style={$heading}>
-          <Text style={$title}>True Sheet 💩</Text>
-          <Text style={$subtitle}>The true native bottom sheet experience.</Text>
-        </View>
-        <Button text="TrueSheet View" onPress={() => presentBasicSheet(0)} />
-        <Button text="TrueSheet Prompt" onPress={() => promptSheet.current?.present()} />
-        <Button text="TrueSheet ScrollView" onPress={() => scrollViewSheet.current?.present()} />
-        <Button text="TrueSheet FlatList" onPress={() => flatListSheet.current?.present()} />
-        <Button text="TrueSheet Gestures" onPress={() => gestureSheet.current?.present()} />
-        <Button text="Blank Sheet" onPress={() => blankSheet.current?.present()} />
-
-        <Spacer />
-        <Button text="Expand" onPress={() => sheetRef.current?.resize(2)} />
-        <Button text="Collapse" onPress={() => sheetRef.current?.resize(1)} />
-
-        <BasicSheet ref={basicSheet} />
-        <PromptSheet ref={promptSheet} />
-        <ScrollViewSheet ref={scrollViewSheet} />
-        <FlatListSheet ref={flatListSheet} />
-        <GestureSheet ref={gestureSheet} />
-        <BlankSheet ref={blankSheet} />
-      </TrueSheet>
-    </View>
+        <Stack.Screen options={{ headerShown: false }} name="Map" component={MapScreen} />
+        <Stack.Screen
+          options={{ headerShown: false, title: 'Home' }}
+          name="Navigation"
+          component={NavigationScreen}
+        />
+        <Stack.Screen name="Child" component={ChildScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   )
 }
 
-const $container: ViewStyle = {
-  backgroundColor: BLUE,
-  justifyContent: 'center',
-  flex: 1,
-}
-
-const $map: ViewStyle = {
-  flex: 1,
-}
-
-const $heading: ViewStyle = {
-  marginBottom: SPACING * 2,
-}
-
-const $title: TextStyle = {
-  fontSize: 24,
-  lineHeight: 30,
-  fontWeight: 500,
-  color: 'white',
-}
-
-const $subtitle: TextStyle = {
-  lineHeight: 24,
-  color: GRAY,
-}
+export default App

example/src/sheets/BasicSheet.tsx → example/src/components/sheets/BasicSheet.tsx

@@ -2,8 +2,11 @@ import { forwardRef, useRef, type Ref, useImperativeHandle } from 'react'
 import { StyleSheet } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
-import { DARK, DARK_BLUE, GRABBER_COLOR, SPACING } from '../utils'
-import { Button, DemoContent, Footer, Spacer } from '../components'
+import { DARK, DARK_BLUE, GRABBER_COLOR, SPACING } from '../../utils'
+import { DemoContent } from '../DemoContent'
+import { Footer } from '../Footer'
+import { Button } from '../Button'
+import { Spacer } from '../Spacer'
 
 interface BasicSheetProps extends TrueSheetProps {}
 

example/src/sheets/BlankSheet.tsx → example/src/components/sheets/BlankSheet.tsx

@@ -2,7 +2,7 @@ import { forwardRef, type Ref } from 'react'
 import { StyleSheet, Text } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
-import { $WHITE_TEXT, DARK, SPACING } from '../utils'
+import { $WHITE_TEXT, DARK, SPACING } from '../../utils'
 
 interface BlankSheetProps extends TrueSheetProps {}
 

example/src/sheets/FlatListSheet.tsx → example/src/components/sheets/FlatListSheet.tsx

@@ -2,8 +2,9 @@ import { forwardRef, useRef, type Ref } from 'react'
 import { FlatList, View, type ViewStyle } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
-import { DARK, DARK_GRAY, INPUT_HEIGHT, SPACING, times } from '../utils'
-import { DemoContent, Input } from '../components'
+import { DARK, DARK_GRAY, INPUT_HEIGHT, SPACING, times } from '../../utils'
+import { Input } from '../Input'
+import { DemoContent } from '../DemoContent'
 
 interface FlatListSheetProps extends TrueSheetProps {}
 

example/src/sheets/GestureSheet.tsx → example/src/components/sheets/GestureSheet.tsx

@@ -4,8 +4,10 @@ import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet
 // import Animated, { useAnimatedStyle, useSharedValue, withDecay } from 'react-native-reanimated'
 // import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
 
-import { DARK, DARK_GRAY, GRABBER_COLOR, SPACING } from '../utils'
-import { Button, Footer, Spacer } from '../components'
+import { DARK, DARK_GRAY, GRABBER_COLOR, SPACING } from '../../utils'
+import { Footer } from '../Footer'
+import { Spacer } from '../Spacer'
+import { Button } from '../Button'
 
 // const BOXES_COUNT = 20
 const CONTAINER_HEIGHT = 200