@idealyst/navigation 1.0.59 → 1.0.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@idealyst/navigation",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.61",
|
|
4
4
|
"description": "Cross-platform navigation library for React and React Native",
|
|
5
5
|
"readme": "README.md",
|
|
6
6
|
"main": "src/index.ts",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"publish:npm": "npm publish"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"@idealyst/components": "^1.0.
|
|
42
|
-
"@idealyst/theme": "^1.0.
|
|
41
|
+
"@idealyst/components": "^1.0.61",
|
|
42
|
+
"@idealyst/theme": "^1.0.61",
|
|
43
43
|
"@react-navigation/bottom-tabs": "^7.0.0",
|
|
44
44
|
"@react-navigation/drawer": "^7.0.0",
|
|
45
45
|
"@react-navigation/native": "^7.0.0",
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { RouteParam } from '../routing';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Button, Screen, Text } from '../../../components/src';
|
|
4
|
+
import { useNavigator } from '../context';
|
|
5
|
+
|
|
6
|
+
const RootScreen = () => {
|
|
7
|
+
|
|
8
|
+
const navigator = useNavigator();
|
|
9
|
+
|
|
10
|
+
return <Screen>
|
|
11
|
+
<Text>Root Screen</Text>
|
|
12
|
+
<Button title="Go to Tab" onPress={() => navigator.navigate({
|
|
13
|
+
path: '/a',
|
|
14
|
+
vars: {},
|
|
15
|
+
})} />
|
|
16
|
+
</Screen>
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const ExampleHybridRouter: RouteParam = {
|
|
20
|
+
path: '/',
|
|
21
|
+
layout: {
|
|
22
|
+
type: 'stack',
|
|
23
|
+
},
|
|
24
|
+
component: RootScreen,
|
|
25
|
+
screenOptions: {
|
|
26
|
+
title: 'Example',
|
|
27
|
+
headerTitle: 'Example Header',
|
|
28
|
+
tabBarLabel: 'Example',
|
|
29
|
+
tabBarIcon: 'example-icon',
|
|
30
|
+
},
|
|
31
|
+
routes: [
|
|
32
|
+
{
|
|
33
|
+
path: 'a',
|
|
34
|
+
component: () => <Text>Nested Tab Example</Text>,
|
|
35
|
+
layout: {
|
|
36
|
+
type: 'tab',
|
|
37
|
+
},
|
|
38
|
+
screenOptions: {
|
|
39
|
+
title: 'Tab Example',
|
|
40
|
+
headerTitle: 'Tab Header',
|
|
41
|
+
tabBarLabel: 'Tab',
|
|
42
|
+
tabBarIcon: 'tab-icon',
|
|
43
|
+
},
|
|
44
|
+
routes: [
|
|
45
|
+
{
|
|
46
|
+
path: 'nested',
|
|
47
|
+
component: () => <Text>Tab 2</Text>,
|
|
48
|
+
screenOptions: {
|
|
49
|
+
title: 'Nested Tab Example',
|
|
50
|
+
headerTitle: 'Nested Tab Header',
|
|
51
|
+
tabBarLabel: 'Nested Tab',
|
|
52
|
+
tabBarIcon: 'nested-tab-icon',
|
|
53
|
+
},
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default ExampleHybridRouter;
|
|
@@ -160,12 +160,7 @@ const SettingsTabScreen = () => {
|
|
|
160
160
|
<View spacing="md">
|
|
161
161
|
<Text size="medium" weight="semibold">Screen Options Used</Text>
|
|
162
162
|
<Text size="small" style={{ fontFamily: 'monospace', backgroundColor: 'rgba(0,0,0,0.05)', padding: 8 }}>
|
|
163
|
-
|
|
164
|
-
title: 'Settings',{"\n"}
|
|
165
|
-
headerTitle: 'App Settings',{"\n"}
|
|
166
|
-
headerLeft: () => <BackButton />,{"\n"}
|
|
167
|
-
headerRight: () => <ActionButtons />
|
|
168
|
-
}}
|
|
163
|
+
Test
|
|
169
164
|
</Text>
|
|
170
165
|
</View>
|
|
171
166
|
|
package/src/examples/index.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default as ExampleStackRouter } from './ExampleStackRouter';
|
|
2
2
|
export { default as ExampleTabRouter } from './ExampleTabRouter';
|
|
3
|
-
export { default as ExampleDrawerRouter } from './ExampleDrawerRouter';
|
|
3
|
+
export { default as ExampleDrawerRouter } from './ExampleDrawerRouter';
|
|
4
|
+
export { default as ExampleHybridRouter } from './ExampleHybridRouter';
|
|
@@ -90,90 +90,103 @@ const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNaviga
|
|
|
90
90
|
const nextPath = (routeParam.path ? path + routeParam.path : path) || '';
|
|
91
91
|
const type = routeParam.layout?.type;
|
|
92
92
|
const screenOptions = convertScreenOptions(routeParam.screenOptions);
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
93
|
+
|
|
94
|
+
function buildComponent() {
|
|
95
|
+
switch (type) {
|
|
96
|
+
case 'stack':
|
|
97
|
+
const Stack = createNativeStackNavigator();
|
|
98
|
+
return (
|
|
99
|
+
<Stack.Navigator
|
|
100
|
+
screenOptions={{
|
|
101
|
+
// Disable screen optimization to ensure theme updates
|
|
102
|
+
freezeOnBlur: false,
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
105
|
+
<Stack.Screen
|
|
106
|
+
name={nextPath}
|
|
107
|
+
component={routeParam.component}
|
|
108
|
+
options={screenOptions}
|
|
109
|
+
/>
|
|
110
|
+
{routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Stack))}
|
|
111
|
+
</Stack.Navigator>
|
|
112
|
+
)
|
|
113
|
+
case 'tab':
|
|
114
|
+
const Tab = createBottomTabNavigator();
|
|
115
|
+
return (
|
|
116
|
+
<Tab.Navigator
|
|
117
|
+
screenOptions={{
|
|
118
|
+
// Disable screen optimization to ensure theme updates
|
|
119
|
+
lazy: false,
|
|
120
|
+
freezeOnBlur: false,
|
|
121
|
+
}}
|
|
122
|
+
>
|
|
123
|
+
<Tab.Screen
|
|
124
|
+
name={nextPath}
|
|
125
|
+
component={routeParam.component}
|
|
126
|
+
options={screenOptions}
|
|
127
|
+
/>
|
|
128
|
+
{routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Tab))}
|
|
129
|
+
</Tab.Navigator>
|
|
130
|
+
)
|
|
131
|
+
case 'drawer':
|
|
132
|
+
const Drawer = createDrawerNavigator();
|
|
133
|
+
return (
|
|
134
|
+
<Drawer.Navigator
|
|
135
|
+
screenOptions={{
|
|
136
|
+
// Disable screen optimization to ensure theme updates
|
|
137
|
+
lazy: false,
|
|
138
|
+
freezeOnBlur: false,
|
|
139
|
+
}}
|
|
140
|
+
>
|
|
141
|
+
<Drawer.Screen
|
|
142
|
+
name={nextPath}
|
|
143
|
+
component={routeParam.component}
|
|
144
|
+
options={screenOptions}
|
|
145
|
+
/>
|
|
146
|
+
{routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Drawer))}
|
|
147
|
+
</Drawer.Navigator>
|
|
148
|
+
)
|
|
149
|
+
case 'modal':
|
|
150
|
+
if (!LastNavigator) {
|
|
151
|
+
throw new Error('LastNavigator is required for modal layout');
|
|
152
|
+
}
|
|
153
|
+
return (
|
|
154
|
+
<>
|
|
155
|
+
<LastNavigator.Screen
|
|
156
|
+
options={{ headerShown: false, presentation: 'modal', ...screenOptions }}
|
|
157
|
+
name={nextPath}
|
|
158
|
+
component={routeParam.component}
|
|
159
|
+
/>
|
|
160
|
+
{routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
|
|
161
|
+
</>
|
|
162
|
+
)
|
|
163
|
+
case undefined:
|
|
164
|
+
if (!LastNavigator) {
|
|
165
|
+
throw new Error('LastNavigator is required for undefined layout - ' + routeParam.path);
|
|
166
|
+
}
|
|
167
|
+
return (
|
|
168
|
+
<>
|
|
169
|
+
<LastNavigator.Screen
|
|
170
|
+
name={nextPath}
|
|
171
|
+
component={routeParam.component}
|
|
172
|
+
options={screenOptions}
|
|
173
|
+
/>
|
|
174
|
+
{routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
|
|
175
|
+
</>
|
|
176
|
+
)
|
|
177
|
+
default:
|
|
178
|
+
throw new Error(`Unknown layout type: ${type}`);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
const Component = buildComponent();
|
|
182
|
+
if (LastNavigator) {
|
|
183
|
+
return (
|
|
184
|
+
<LastNavigator.Screen
|
|
185
|
+
name={nextPath}
|
|
186
|
+
component={() => Component}
|
|
187
|
+
options={screenOptions}
|
|
188
|
+
/>
|
|
189
|
+
);
|
|
178
190
|
}
|
|
191
|
+
return Component;
|
|
179
192
|
}
|