Skip to content

Commit 4ae6f71

Browse files
dannyhwdannyhw
committed
feat: static react navigation config
fix fix fix fix: unistyles warning feat: use rnn theme together with unistyles theme remove file
1 parent 1198f6f commit 4ae6f71

File tree

9 files changed

+175
-257
lines changed

9 files changed

+175
-257
lines changed

‎.changeset/two-points-cover.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'create-expo-stack': patch
3+
'rn-new': patch
4+
---
5+
6+
Updates react navigation templates to use static configuration

‎cli/__tests__/__snapshots__/cli-integration.test.ts.snap

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -864,7 +864,6 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --s
864864
"./myTestProject/lib/useHeaderSearchBar.tsx",
865865
"./myTestProject/metro.config.js",
866866
"./myTestProject/nativewind-env.d.ts",
867-
"./myTestProject/package-lock.json",
868867
"./myTestProject/package.json",
869868
"./myTestProject/prettier.config.js",
870869
"./myTestProject/tailwind.config.js",
@@ -1014,7 +1013,6 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --e
10141013
"./myTestProject/lib/useHeaderSearchBar.tsx",
10151014
"./myTestProject/metro.config.js",
10161015
"./myTestProject/nativewind-env.d.ts",
1017-
"./myTestProject/package-lock.json",
10181016
"./myTestProject/package.json",
10191017
"./myTestProject/prettier.config.js",
10201018
"./myTestProject/tailwind.config.js",

‎cli/__tests__/cli-integration.test.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,14 @@ test(`outputs help`, async () => {
6363

6464
// we could later generate all combinations and have a "run everything" option that only runs very rarely
6565
const popularCombinations = [
66+
// for reference, these are the react-navigation combinations
67+
// ['--react-navigation', '--tabs', '--stylesheet'],
68+
// ['--react-navigation', '--tabs+drawer', '--stylesheet'],
69+
// ['--react-navigation', '--stack', '--stylesheet'],
70+
// ['--react-navigation', '--tabs', '--unistyles'],
71+
// ['--react-navigation', '--tabs+drawer', '--unistyles'],
72+
// ['--react-navigation', '--stack', '--unistyles'],
73+
6674
['--expo-router', '--nativewind'],
6775
['--expo-router', '--stylesheet'],
6876
['--expo-router', '--tabs', '--nativewind'],

‎cli/src/templates/packages/react-navigation/App.tsx.ejs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<% } %>
77
<% if (props.stylingPackage?.name === "unistyles") { %>
88
import './unistyles';
9+
import { DefaultTheme } from '@react-navigation/native';
10+
import { useUnistyles } from 'react-native-unistyles';
911
<% } %>
1012
<% if (props.internalizationPackage?.name === "i18next") { %>
1113
import './translation';
@@ -63,6 +65,24 @@ export default function App() {
6365
<RootStack />
6466
</ThemeProvider>
6567
);
68+
<% } else if (props.stylingPackage?.name === "unistyles") { %>
69+
const { theme, rt } = useUnistyles();
70+
71+
const mergedTheme = {
72+
...DefaultTheme,
73+
colors: {
74+
background: theme.colors.background,
75+
text: theme.colors.typography,
76+
primary: theme.colors.astral,
77+
secondary: theme.colors.cornflowerBlue,
78+
border: theme.colors.limedSpruce,
79+
card: theme.colors.background,
80+
notification: theme.colors.astral,
81+
},
82+
dark: rt.colorScheme === 'dark',
83+
};
84+
85+
return <RootStack theme={mergedTheme} />;
6686
<% } else { %>
6787
return <RootStack />;
6888
<% } %>

‎cli/src/templates/packages/react-navigation/navigation/drawer-navigator.tsx.ejs

Lines changed: 20 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,31 @@
11
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
22
import { createDrawerNavigator } from '@react-navigation/drawer';
3-
import { StackScreenProps } from '@react-navigation/stack';
43
import { HeaderButton } from 'components/HeaderButton';
5-
<% if (props.stylingPackage?.name === "unistyles") { %>
6-
import { useUnistyles } from 'react-native-unistyles';
7-
<% } %>
8-
9-
import { RootStackParamList } from '.';
104
import TabNavigator from './tab-navigator';
115
import Home from '../screens/home';
126

13-
type Props = StackScreenProps<RootStackParamList, 'DrawerNavigator'>;
14-
15-
const Drawer = createDrawerNavigator();
167

17-
export default function DrawerNavigator({ navigation }: Props) {
18-
<% if (props.stylingPackage?.name === "unistyles") { %>
19-
const { theme } = useUnistyles();
20-
<% } %>
21-
22-
return (
23-
<% if (props.stylingPackage?.name === "unistyles") { %>
24-
<Drawer.Navigator
25-
screenOptions={{
26-
headerStyle: {
27-
backgroundColor: theme.colors.background,
28-
},
29-
headerTitleStyle: {
30-
color: theme.colors.typography,
31-
},
32-
headerTintColor: theme.colors.typography,
33-
drawerStyle: {
34-
backgroundColor: theme.colors.background,
35-
},
36-
drawerLabelStyle: {
37-
color: theme.colors.typography,
38-
},
39-
drawerInactiveTintColor: theme.colors.typography,
40-
}}
41-
>
42-
<% } else { %>
43-
<Drawer.Navigator>
44-
<% } %>
45-
<Drawer.Screen
46-
name="Home"
47-
component={Home}
48-
options={{
49-
drawerIcon: ({ size, color }) => (
50-
<Ionicons name="home-outline" size={size} color={color} />
51-
),
52-
}}
53-
/>
54-
<Drawer.Screen
55-
name="Tabs"
56-
component={TabNavigator}
57-
options={{
8+
const Drawer = createDrawerNavigator({
9+
screens: {
10+
Home: {
11+
screen: Home,
12+
options: {
13+
drawerIcon: ({ size, color }) => (
14+
<Ionicons name="home-outline" size={size} color={color} />
15+
),
16+
}
17+
},
18+
Tabs: {
19+
screen: TabNavigator,
20+
options: ({ navigation })=> ({
5821
headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
5922
drawerIcon: ({ size, color }) => (
6023
<MaterialIcons name="border-bottom" size={size} color={color} />
6124
),
62-
}}
63-
/>
64-
</Drawer.Navigator>
65-
);
66-
}
25+
})
26+
},
27+
}
28+
});
29+
30+
export default Drawer;
31+

‎cli/src/templates/packages/react-navigation/navigation/index.tsx.ejs

Lines changed: 84 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,105 @@
11
<% if (props.navigationPackage?.options.type === 'stack') { %>
2-
import { NavigationContainer } from "@react-navigation/native";
3-
import { createStackNavigator } from "@react-navigation/stack";
4-
5-
<% if (props.stylingPackage?.name === "unistyles") { %>
6-
import { useUnistyles } from 'react-native-unistyles';
7-
<% } %>
8-
2+
import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
3+
import { createStackNavigator } from '@react-navigation/stack';
94
import Overview from "../screens/overview";
105
import Details from "../screens/details";
11-
import { BackButton } from '../components/BackButton';
6+
import { BackButton } from '../components/BackButton';
127
13-
export type RootStackParamList = {
14-
Overview: undefined;
15-
Details: { name: string };
16-
};
8+
const Stack = createStackNavigator({
9+
screens: {
10+
Overview: {
11+
screen: Overview,
12+
},
13+
Details: {
14+
screen: Details,
15+
options: ({ navigation }) => ({
16+
headerLeft: () => <BackButton onPress={navigation.goBack} />,
17+
})
18+
},
19+
}
20+
});
1721
18-
const Stack = createStackNavigator<RootStackParamList>();
22+
type RootStackParamList = StaticParamList<typeof Stack>;
1923
20-
export default function RootStack() {
21-
<% if (props.stylingPackage?.name === "unistyles") { %>
22-
const { theme } = useUnistyles();
23-
<% } %>
24-
return (
25-
<NavigationContainer>
26-
<Stack.Navigator
27-
initialRouteName="Overview"
28-
<% if (props.stylingPackage?.name === "unistyles") { %>
29-
screenOptions={{
30-
headerStyle: {
31-
backgroundColor: theme.colors.background,
32-
},
33-
headerTitleStyle: {
34-
color: theme.colors.typography,
35-
},
36-
headerTintColor: theme.colors.typography,
37-
}}
38-
<% } %>
39-
>
40-
<Stack.Screen name="Overview" component={Overview} />
41-
<Stack.Screen
42-
name="Details"
43-
component={Details}
44-
options={({ navigation }) => ({
45-
headerLeft: () => <BackButton onPress={navigation.goBack} />,
46-
})}
47-
/>
48-
</Stack.Navigator>
49-
</NavigationContainer>
50-
);
51-
}
24+
declare global {
25+
namespace ReactNavigation {
26+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
27+
interface RootParamList extends RootStackParamList {}
28+
}
29+
}
30+
31+
export default createStaticNavigation(Stack);
5232
5333
<% } else if (props.navigationPackage?.options.type === 'tabs') { %>
54-
import { NavigationContainer } from "@react-navigation/native";
34+
import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
5535
import { createStackNavigator } from "@react-navigation/stack";
56-
<% if (props.stylingPackage?.name === "unistyles") { %>
57-
import { useUnistyles } from 'react-native-unistyles';
58-
<% } %>
59-
6036
import Modal from "../screens/modal";
6137
import TabNavigator from "./tab-navigator";
6238
63-
export type RootStackParamList = {
64-
TabNavigator: undefined;
65-
Modal: undefined;
66-
};
6739
68-
const Stack = createStackNavigator<RootStackParamList>();
40+
const Stack = createStackNavigator({
41+
screens: {
42+
TabNavigator: {
43+
screen: TabNavigator,
44+
options: {
45+
headerShown: false,
46+
},
47+
},
48+
Modal: {
49+
screen: Modal,
50+
options: {
51+
presentation: "modal",
52+
headerLeft: () => null,
53+
},
54+
},
55+
}
56+
});
6957
70-
export default function RootStack() {
71-
<% if (props.stylingPackage?.name === "unistyles") { %>
72-
const { theme } = useUnistyles();
73-
<% } %>
74-
return (
75-
<NavigationContainer>
76-
<Stack.Navigator
77-
initialRouteName="TabNavigator"
78-
<% if (props.stylingPackage?.name === "unistyles") { %>
79-
screenOptions={{
80-
headerStyle: {
81-
backgroundColor: theme.colors.background,
82-
},
83-
headerTitleStyle: {
84-
color: theme.colors.typography,
85-
},
86-
headerTintColor: theme.colors.typography,
87-
}}
88-
<% } %>
89-
>
90-
<Stack.Screen
91-
name="TabNavigator"
92-
component={TabNavigator}
93-
options={{ headerShown: false }}
94-
/>
95-
<Stack.Screen
96-
name="Modal"
97-
component={Modal}
98-
options={{ presentation: "modal", headerLeft: () => null }}
99-
/>
100-
</Stack.Navigator>
101-
</NavigationContainer>
102-
);
103-
}
104-
<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
105-
import { NavigationContainer } from "@react-navigation/native";
106-
import { createStackNavigator } from '@react-navigation/stack';
107-
<% if (props.stylingPackage?.name === "unistyles") { %>
108-
import { useUnistyles } from 'react-native-unistyles';
109-
<% } %>
58+
type RootStackParamList = StaticParamList<typeof Stack>;
59+
60+
declare global {
61+
namespace ReactNavigation {
62+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
63+
interface RootParamList extends RootStackParamList {}
64+
}
65+
}
66+
67+
export default createStaticNavigation(Stack);
11068
69+
<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
70+
import { createStaticNavigation, StaticParamList } from '@react-navigation/native';
71+
import { createStackNavigator } from '@react-navigation/stack';
11172
import Modal from "../screens/modal";
11273
import DrawerNavigator from "./drawer-navigator";
11374
114-
export type RootStackParamList = {
115-
DrawerNavigator: undefined;
116-
Modal: undefined;
117-
TabNavigator: undefined;
118-
};
75+
76+
const Stack = createStackNavigator({
77+
screens: {
78+
DrawerNavigator: {
79+
screen: DrawerNavigator,
80+
options: {
81+
headerShown: false,
82+
},
83+
},
84+
Modal: {
85+
screen: Modal,
86+
options: {
87+
presentation: "modal",
88+
headerLeft: () => null,
89+
},
90+
},
91+
}
92+
});
93+
94+
type RootStackParamList = StaticParamList<typeof Stack>;
11995
120-
const Stack = createStackNavigator<RootStackParamList>();
96+
declare global {
97+
namespace ReactNavigation {
98+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
99+
interface RootParamList extends RootStackParamList {}
100+
}
101+
}
121102
122-
export default function RootStack() {
123-
<% if (props.stylingPackage?.name === "unistyles") { %>
124-
const { theme } = useUnistyles();
125-
<% } %>
126-
return (
127-
<NavigationContainer>
128-
<Stack.Navigator
129-
initialRouteName="DrawerNavigator"
130-
<% if (props.stylingPackage?.name === "unistyles") { %>
131-
screenOptions={{
132-
headerStyle: {
133-
backgroundColor: theme.colors.background,
134-
},
135-
headerTitleStyle: {
136-
color: theme.colors.typography,
137-
},
138-
headerTintColor: theme.colors.typography,
139-
}}
140-
<% } %>
141-
>
142-
<Stack.Screen
143-
name="DrawerNavigator"
144-
component={DrawerNavigator}
145-
options={{ headerShown: false }}
146-
/>
147-
<Stack.Screen
148-
name="Modal"
149-
component={Modal}
150-
options={{ presentation: "modal", headerLeft: () => null }}
151-
/>
152-
</Stack.Navigator>
153-
</NavigationContainer>
154-
);
155-
}
103+
export default createStaticNavigation(Stack);
104+
156105
<% } %>

0 commit comments

Comments
 (0)