Skip to content

Commit e6d550c

Browse files
cheeauncheeaun
committed
RootLayout: wrap Stack with ThemeProvider for dark mode nav bar
1 parent 81ab3e8 commit e6d550c

1 file changed

Lines changed: 102 additions & 94 deletions

File tree

‎app/_layout.jsx‎

Lines changed: 102 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
88
import * as Updates from 'expo-updates';
99
import { StatusBar } from 'expo-status-bar';
1010

11-
import { Stack, usePathname } from 'expo-router';
11+
import {
12+
DarkTheme,
13+
DefaultTheme,
14+
Stack,
15+
ThemeProvider,
16+
usePathname,
17+
} from 'expo-router';
1218

1319
import useStore from '../hooks/useStore';
1420
import useTheme from '../hooks/useTheme';
@@ -112,108 +118,110 @@ export default function RootLayout() {
112118
<GestureHandlerRootView style={{ flex: 1 }}>
113119
<StatusBar style="auto" animated />
114120
<SafeAreaProvider>
115-
<Stack
116-
key={reloadKey}
117-
screenOptions={{
118-
contentStyle: { backgroundColor: colors.background },
119-
headerTransparent: true,
120-
headerShadowVisible: false,
121-
headerBackButtonDisplayMode: 'minimal',
122-
headerBackTitle: 'News',
123-
title: '',
124-
}}
125-
>
126-
<Stack.Screen
127-
name="index"
128-
options={{
129-
title: 'HackerWeb',
130-
headerLargeTitle: true,
131-
headerLargeTitleShadowVisible: false,
132-
headerLargeTitleStyle: { color: colors.text },
133-
headerTitleStyle: { color: colors.text },
134-
headerBackTitle: undefined,
135-
headerBackButtonDisplayMode: undefined,
136-
}}
137-
/>
138-
<Stack.Screen
139-
name="story/[id]"
140-
options={{
141-
title: '',
142-
headerTitleStyle: { color: colors.text },
143-
headerTransparent: true,
144-
headerBackButtonDisplayMode: 'minimal',
145-
}}
146-
/>
147-
<Stack.Screen
148-
name="story-modal/[id]"
149-
options={{
150-
headerTitleStyle: { color: colors.text },
151-
presentation: 'modal',
121+
<ThemeProvider value={isDark ? DarkTheme : DefaultTheme}>
122+
<Stack
123+
key={reloadKey}
124+
screenOptions={{
125+
contentStyle: { backgroundColor: colors.background },
152126
headerTransparent: true,
153127
headerShadowVisible: false,
154-
}}
155-
/>
156-
<Stack.Screen
157-
name="comments/[storyID]/[commentID]"
158-
options={{
159-
presentation: 'modal',
160-
headerTransparent: true,
161-
}}
162-
/>
163-
<Stack.Screen
164-
name="user/[id]"
165-
options={{
166-
presentation: 'formSheet',
167-
sheetAllowedDetents: 'fitToContents',
168-
sheetExpandsWhenScrolledToEdge: true,
169-
}}
170-
/>
171-
<Stack.Screen
172-
name="settings"
173-
options={{
174-
title: 'Settings',
175-
presentation: 'modal',
176-
headerTitleStyle: { color: colors.text },
177-
}}
178-
/>
179-
<Stack.Screen
180-
name="logs"
181-
options={{
182128
headerBackButtonDisplayMode: 'minimal',
183-
presentation: 'modal',
184-
headerTransparent: true,
185-
headerShadowVisible: false,
186-
}}
187-
/>
188-
<Stack.Screen
189-
name="web-view"
190-
options={{
191-
presentation: 'modal',
192-
headerStyle: {
193-
backgroundColor: isDark ? '#1C1C1E' : '#F2F2F7',
194-
},
195-
headerTintColor: isDark ? '#FFF' : '#007AFF',
196-
headerTitleStyle: { color: isDark ? '#FFF' : '#000' },
197-
}}
198-
/>
199-
<Stack.Screen
200-
name="thread/[storyID]/[commentID]"
201-
options={{
202-
title: 'Thread',
203-
presentation: 'modal',
204-
headerTitleStyle: { color: colors.text },
129+
headerBackTitle: 'News',
130+
title: '',
205131
}}
206-
/>
207-
{__DEV__ && (
132+
>
133+
<Stack.Screen
134+
name="index"
135+
options={{
136+
title: 'HackerWeb',
137+
headerLargeTitle: true,
138+
headerLargeTitleShadowVisible: false,
139+
headerLargeTitleStyle: { color: colors.text },
140+
headerTitleStyle: { color: colors.text },
141+
headerBackTitle: undefined,
142+
headerBackButtonDisplayMode: undefined,
143+
}}
144+
/>
145+
<Stack.Screen
146+
name="story/[id]"
147+
options={{
148+
title: '',
149+
headerTitleStyle: { color: colors.text },
150+
headerTransparent: true,
151+
headerBackButtonDisplayMode: 'minimal',
152+
}}
153+
/>
154+
<Stack.Screen
155+
name="story-modal/[id]"
156+
options={{
157+
headerTitleStyle: { color: colors.text },
158+
presentation: 'modal',
159+
headerTransparent: true,
160+
headerShadowVisible: false,
161+
}}
162+
/>
163+
<Stack.Screen
164+
name="comments/[storyID]/[commentID]"
165+
options={{
166+
presentation: 'modal',
167+
headerTransparent: true,
168+
}}
169+
/>
170+
<Stack.Screen
171+
name="user/[id]"
172+
options={{
173+
presentation: 'formSheet',
174+
sheetAllowedDetents: 'fitToContents',
175+
sheetExpandsWhenScrolledToEdge: true,
176+
}}
177+
/>
178+
<Stack.Screen
179+
name="settings"
180+
options={{
181+
title: 'Settings',
182+
presentation: 'modal',
183+
headerTitleStyle: { color: colors.text },
184+
}}
185+
/>
186+
<Stack.Screen
187+
name="logs"
188+
options={{
189+
headerBackButtonDisplayMode: 'minimal',
190+
presentation: 'modal',
191+
headerTransparent: true,
192+
headerShadowVisible: false,
193+
}}
194+
/>
195+
<Stack.Screen
196+
name="web-view"
197+
options={{
198+
presentation: 'modal',
199+
headerStyle: {
200+
backgroundColor: isDark ? '#1C1C1E' : '#F2F2F7',
201+
},
202+
headerTintColor: isDark ? '#FFF' : '#007AFF',
203+
headerTitleStyle: { color: isDark ? '#FFF' : '#000' },
204+
}}
205+
/>
208206
<Stack.Screen
209-
name="dev-test"
207+
name="thread/[storyID]/[commentID]"
210208
options={{
211-
title: 'Dev Test',
209+
title: 'Thread',
210+
presentation: 'modal',
212211
headerTitleStyle: { color: colors.text },
213212
}}
214213
/>
215-
)}
216-
</Stack>
214+
{__DEV__ && (
215+
<Stack.Screen
216+
name="dev-test"
217+
options={{
218+
title: 'Dev Test',
219+
headerTitleStyle: { color: colors.text },
220+
}}
221+
/>
222+
)}
223+
</Stack>
224+
</ThemeProvider>
217225
</SafeAreaProvider>
218226
</GestureHandlerRootView>
219227
</View>

0 commit comments

Comments
 (0)