Skip to content

Commit 298aec7

Browse files
lodev09lodev09
authored
feat: add navigation example (#115)
1 parent 58f3773 commit 298aec7

19 files changed

+630
-123
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@ import com.facebook.react.ReactActivity
44
import com.facebook.react.ReactActivityDelegate
55
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
66
import com.facebook.react.defaults.DefaultReactActivityDelegate
7+
import android.os.Bundle
78

89
class MainActivity : ReactActivity() {
910

11+
override fun onCreate(savedInstanceState: Bundle?) {
12+
super.onCreate(null)
13+
}
14+
1015
/**
1116
* Returns the name of the main component registered from JavaScript. This is used to schedule
1217
* rendering of the component.

‎example/ios/Podfile.lock

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1244,6 +1244,72 @@ PODS:
12441244
- Yoga
12451245
- react-native-maps (1.20.1):
12461246
- React-Core
1247+
- react-native-safe-area-context (5.1.0):
1248+
- DoubleConversion
1249+
- glog
1250+
- hermes-engine
1251+
- RCT-Folly (= 2024.01.01.00)
1252+
- RCTRequired
1253+
- RCTTypeSafety
1254+
- React-Core
1255+
- React-debug
1256+
- React-Fabric
1257+
- React-featureflags
1258+
- React-graphics
1259+
- React-ImageManager
1260+
- react-native-safe-area-context/common (= 5.1.0)
1261+
- react-native-safe-area-context/fabric (= 5.1.0)
1262+
- React-NativeModulesApple
1263+
- React-RCTFabric
1264+
- React-rendererdebug
1265+
- React-utils
1266+
- ReactCodegen
1267+
- ReactCommon/turbomodule/bridging
1268+
- ReactCommon/turbomodule/core
1269+
- Yoga
1270+
- react-native-safe-area-context/common (5.1.0):
1271+
- DoubleConversion
1272+
- glog
1273+
- hermes-engine
1274+
- RCT-Folly (= 2024.01.01.00)
1275+
- RCTRequired
1276+
- RCTTypeSafety
1277+
- React-Core
1278+
- React-debug
1279+
- React-Fabric
1280+
- React-featureflags
1281+
- React-graphics
1282+
- React-ImageManager
1283+
- React-NativeModulesApple
1284+
- React-RCTFabric
1285+
- React-rendererdebug
1286+
- React-utils
1287+
- ReactCodegen
1288+
- ReactCommon/turbomodule/bridging
1289+
- ReactCommon/turbomodule/core
1290+
- Yoga
1291+
- react-native-safe-area-context/fabric (5.1.0):
1292+
- DoubleConversion
1293+
- glog
1294+
- hermes-engine
1295+
- RCT-Folly (= 2024.01.01.00)
1296+
- RCTRequired
1297+
- RCTTypeSafety
1298+
- React-Core
1299+
- React-debug
1300+
- React-Fabric
1301+
- React-featureflags
1302+
- React-graphics
1303+
- React-ImageManager
1304+
- react-native-safe-area-context/common
1305+
- React-NativeModulesApple
1306+
- React-RCTFabric
1307+
- React-rendererdebug
1308+
- React-utils
1309+
- ReactCodegen
1310+
- ReactCommon/turbomodule/bridging
1311+
- ReactCommon/turbomodule/core
1312+
- Yoga
12471313
- react-native-true-sheet (1.0.3):
12481314
- DoubleConversion
12491315
- glog
@@ -1619,6 +1685,51 @@ PODS:
16191685
- ReactCommon/turbomodule/bridging
16201686
- ReactCommon/turbomodule/core
16211687
- Yoga
1688+
- RNScreens (4.5.0):
1689+
- DoubleConversion
1690+
- glog
1691+
- hermes-engine
1692+
- RCT-Folly (= 2024.01.01.00)
1693+
- RCTRequired
1694+
- RCTTypeSafety
1695+
- React-Core
1696+
- React-debug
1697+
- React-Fabric
1698+
- React-featureflags
1699+
- React-graphics
1700+
- React-ImageManager
1701+
- React-NativeModulesApple
1702+
- React-RCTFabric
1703+
- React-RCTImage
1704+
- React-rendererdebug
1705+
- React-utils
1706+
- ReactCodegen
1707+
- ReactCommon/turbomodule/bridging
1708+
- ReactCommon/turbomodule/core
1709+
- RNScreens/common (= 4.5.0)
1710+
- Yoga
1711+
- RNScreens/common (4.5.0):
1712+
- DoubleConversion
1713+
- glog
1714+
- hermes-engine
1715+
- RCT-Folly (= 2024.01.01.00)
1716+
- RCTRequired
1717+
- RCTTypeSafety
1718+
- React-Core
1719+
- React-debug
1720+
- React-Fabric
1721+
- React-featureflags
1722+
- React-graphics
1723+
- React-ImageManager
1724+
- React-NativeModulesApple
1725+
- React-RCTFabric
1726+
- React-RCTImage
1727+
- React-rendererdebug
1728+
- React-utils
1729+
- ReactCodegen
1730+
- ReactCommon/turbomodule/bridging
1731+
- ReactCommon/turbomodule/core
1732+
- Yoga
16221733
- SocketRocket (0.7.1)
16231734
- Yoga (0.0.0)
16241735

@@ -1661,6 +1772,7 @@ DEPENDENCIES:
16611772
- React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
16621773
- React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
16631774
- react-native-maps (from `../node_modules/react-native-maps`)
1775+
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
16641776
- react-native-true-sheet (from `../..`)
16651777
- React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
16661778
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1690,6 +1802,7 @@ DEPENDENCIES:
16901802
- ReactCodegen (from `build/generated/ios`)
16911803
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
16921804
- RNReanimated (from `../node_modules/react-native-reanimated`)
1805+
- RNScreens (from `../node_modules/react-native-screens`)
16931806
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
16941807

16951808
SPEC REPOS:
@@ -1770,6 +1883,8 @@ EXTERNAL SOURCES:
17701883
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
17711884
react-native-maps:
17721885
:path: "../node_modules/react-native-maps"
1886+
react-native-safe-area-context:
1887+
:path: "../node_modules/react-native-safe-area-context"
17731888
react-native-true-sheet:
17741889
:path: "../.."
17751890
React-nativeconfig:
@@ -1828,6 +1943,8 @@ EXTERNAL SOURCES:
18281943
:path: "../node_modules/react-native/ReactCommon"
18291944
RNReanimated:
18301945
:path: "../node_modules/react-native-reanimated"
1946+
RNScreens:
1947+
:path: "../node_modules/react-native-screens"
18311948
Yoga:
18321949
:path: "../node_modules/react-native/ReactCommon/yoga"
18331950

@@ -1868,6 +1985,7 @@ SPEC CHECKSUMS:
18681985
React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
18691986
React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
18701987
react-native-maps: ee1e65647460c3d41e778071be5eda10e3da6225
1988+
react-native-safe-area-context: cbadf383376f589bb611c8ae0280c1d4b7b447e9
18711989
react-native-true-sheet: 00be9fe24ef77f41f9c70efbeb30bb5ac91c2893
18721990
React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
18731991
React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
@@ -1897,6 +2015,7 @@ SPEC CHECKSUMS:
18972015
ReactCodegen: ae99a130606068ed40d1d9c0d5f25fda142a0647
18982016
ReactCommon: 89c87b343deacc8610b099ac764848f0ce937e3e
18992017
RNReanimated: 006a5d3961bf09c1e96d62ed436e02b2e43b89bb
2018+
RNScreens: b02af14099030cc1e63f74f2791574e909fc1541
19002019
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
19012020
Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
19022021

‎example/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,15 @@
1010
"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\""
1111
},
1212
"dependencies": {
13+
"@react-navigation/native": "^7.0.14",
14+
"@react-navigation/native-stack": "^7.2.0",
1315
"react": "18.3.1",
1416
"react-native": "0.76.3",
1517
"react-native-edge-to-edge": "^1.1.3",
1618
"react-native-maps": "^1.20.1",
17-
"react-native-reanimated": "^3.16.3"
19+
"react-native-reanimated": "^3.16.3",
20+
"react-native-safe-area-context": "^5.1.0",
21+
"react-native-screens": "^4.5.0"
1822
},
1923
"devDependencies": {
2024
"@babel/core": "^7.25.2",

‎example/src/App.tsx

Lines changed: 20 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,28 @@
1-
import { useRef } from 'react'
2-
import { Text, View, type TextStyle, type ViewStyle } from 'react-native'
3-
import { TrueSheet } from '@lodev09/react-native-true-sheet'
4-
import MapView from 'react-native-maps'
1+
import { NavigationContainer } from '@react-navigation/native'
2+
import { createNativeStackNavigator } from '@react-navigation/native-stack'
53

6-
import {
7-
BasicSheet,
8-
BlankSheet,
9-
FlatListSheet,
10-
GestureSheet,
11-
PromptSheet,
12-
ScrollViewSheet,
13-
} from './sheets'
14-
import { Button, Spacer } from './components'
15-
import { BLUE, DARK, GRAY, SPACING } from './utils'
4+
import { MapScreen, NavigationScreen, ChildScreen } from './screens'
5+
import type { AppStackParamList } from './types'
166

17-
export default function App() {
18-
const sheetRef = useRef<TrueSheet>(null)
19-
20-
const basicSheet = useRef<TrueSheet>(null)
21-
const promptSheet = useRef<TrueSheet>(null)
22-
const scrollViewSheet = useRef<TrueSheet>(null)
23-
const flatListSheet = useRef<TrueSheet>(null)
24-
const gestureSheet = useRef<TrueSheet>(null)
25-
const blankSheet = useRef<TrueSheet>(null)
26-
27-
const presentBasicSheet = async (index = 0) => {
28-
await basicSheet.current?.present(index)
29-
console.log('Sheet 1 present async')
30-
}
7+
const Stack = createNativeStackNavigator<AppStackParamList>()
318

9+
const App = () => {
3210
return (
33-
<View style={$container}>
34-
<MapView
35-
style={$map}
36-
initialCamera={{
37-
altitude: 18000,
38-
zoom: 14,
39-
center: {
40-
latitude: 9.306743705457553,
41-
longitude: 123.30474002203727,
42-
},
43-
pitch: 0,
44-
heading: 0,
45-
}}
46-
userInterfaceStyle="dark"
47-
/>
48-
49-
<TrueSheet
50-
sizes={['15%', 'auto', 'large']}
51-
ref={sheetRef}
52-
blurTint="dark"
53-
backgroundColor={DARK}
54-
edgeToEdge
55-
contentContainerStyle={{ padding: SPACING, paddingBottom: SPACING * 3 }}
56-
dimmedIndex={2}
57-
dismissible={false}
58-
cornerRadius={12}
59-
initialIndex={1}
60-
// initialIndexAnimated={false}
61-
onMount={() => {
62-
// sheetRef.current?.present(1)
63-
console.log('Sheet is ready!')
64-
}}
11+
<NavigationContainer>
12+
<Stack.Navigator
13+
screenOptions={{ headerTransparent: true, headerTintColor: 'white' }}
14+
initialRouteName="Navigation"
6515
>
66-
<View style={$heading}>
67-
<Text style={$title}>True Sheet 💩</Text>
68-
<Text style={$subtitle}>The true native bottom sheet experience.</Text>
69-
</View>
70-
<Button text="TrueSheet View" onPress={() => presentBasicSheet(0)} />
71-
<Button text="TrueSheet Prompt" onPress={() => promptSheet.current?.present()} />
72-
<Button text="TrueSheet ScrollView" onPress={() => scrollViewSheet.current?.present()} />
73-
<Button text="TrueSheet FlatList" onPress={() => flatListSheet.current?.present()} />
74-
<Button text="TrueSheet Gestures" onPress={() => gestureSheet.current?.present()} />
75-
<Button text="Blank Sheet" onPress={() => blankSheet.current?.present()} />
76-
77-
<Spacer />
78-
<Button text="Expand" onPress={() => sheetRef.current?.resize(2)} />
79-
<Button text="Collapse" onPress={() => sheetRef.current?.resize(1)} />
80-
81-
<BasicSheet ref={basicSheet} />
82-
<PromptSheet ref={promptSheet} />
83-
<ScrollViewSheet ref={scrollViewSheet} />
84-
<FlatListSheet ref={flatListSheet} />
85-
<GestureSheet ref={gestureSheet} />
86-
<BlankSheet ref={blankSheet} />
87-
</TrueSheet>
88-
</View>
16+
<Stack.Screen options={{ headerShown: false }} name="Map" component={MapScreen} />
17+
<Stack.Screen
18+
options={{ headerShown: false, title: 'Home' }}
19+
name="Navigation"
20+
component={NavigationScreen}
21+
/>
22+
<Stack.Screen name="Child" component={ChildScreen} />
23+
</Stack.Navigator>
24+
</NavigationContainer>
8925
)
9026
}
9127

92-
const $container: ViewStyle = {
93-
backgroundColor: BLUE,
94-
justifyContent: 'center',
95-
flex: 1,
96-
}
97-
98-
const $map: ViewStyle = {
99-
flex: 1,
100-
}
101-
102-
const $heading: ViewStyle = {
103-
marginBottom: SPACING * 2,
104-
}
105-
106-
const $title: TextStyle = {
107-
fontSize: 24,
108-
lineHeight: 30,
109-
fontWeight: 500,
110-
color: 'white',
111-
}
112-
113-
const $subtitle: TextStyle = {
114-
lineHeight: 24,
115-
color: GRAY,
116-
}
28+
export default App

‎example/src/sheets/BasicSheet.tsx renamed to ‎example/src/components/sheets/BasicSheet.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import { forwardRef, useRef, type Ref, useImperativeHandle } from 'react'
22
import { StyleSheet } from 'react-native'
33
import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
44

5-
import { DARK, DARK_BLUE, GRABBER_COLOR, SPACING } from '../utils'
6-
import { Button, DemoContent, Footer, Spacer } from '../components'
5+
import { DARK, DARK_BLUE, GRABBER_COLOR, SPACING } from '../../utils'
6+
import { DemoContent } from '../DemoContent'
7+
import { Footer } from '../Footer'
8+
import { Button } from '../Button'
9+
import { Spacer } from '../Spacer'
710

811
interface BasicSheetProps extends TrueSheetProps {}
912

‎example/src/sheets/BlankSheet.tsx renamed to ‎example/src/components/sheets/BlankSheet.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { forwardRef, type Ref } from 'react'
22
import { StyleSheet, Text } from 'react-native'
33
import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
44

5-
import { $WHITE_TEXT, DARK, SPACING } from '../utils'
5+
import { $WHITE_TEXT, DARK, SPACING } from '../../utils'
66

77
interface BlankSheetProps extends TrueSheetProps {}
88

‎example/src/sheets/FlatListSheet.tsx renamed to ‎example/src/components/sheets/FlatListSheet.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { forwardRef, useRef, type Ref } from 'react'
22
import { FlatList, View, type ViewStyle } from 'react-native'
33
import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
44

5-
import { DARK, DARK_GRAY, INPUT_HEIGHT, SPACING, times } from '../utils'
6-
import { DemoContent, Input } from '../components'
5+
import { DARK, DARK_GRAY, INPUT_HEIGHT, SPACING, times } from '../../utils'
6+
import { Input } from '../Input'
7+
import { DemoContent } from '../DemoContent'
78

89
interface FlatListSheetProps extends TrueSheetProps {}
910

‎example/src/sheets/GestureSheet.tsx renamed to ‎example/src/components/sheets/GestureSheet.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet
44
// import Animated, { useAnimatedStyle, useSharedValue, withDecay } from 'react-native-reanimated'
55
// import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
66

7-
import { DARK, DARK_GRAY, GRABBER_COLOR, SPACING } from '../utils'
8-
import { Button, Footer, Spacer } from '../components'
7+
import { DARK, DARK_GRAY, GRABBER_COLOR, SPACING } from '../../utils'
8+
import { Footer } from '../Footer'
9+
import { Spacer } from '../Spacer'
10+
import { Button } from '../Button'
911

1012
// const BOXES_COUNT = 20
1113
const CONTAINER_HEIGHT = 200

0 commit comments

Comments
 (0)