fix example on web

Author: EvanBacon

apps/example/src/app/+html.tsx

@@ -1,9 +1,7 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
 import { SplashScreen, Stack } from 'expo-router';
 import { useEffect } from 'react';
-import { useColorScheme } from 'react-native';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -15,6 +13,10 @@ import DevToolsPluginsContainer from '@/components/DevToolsPluginsContainer';
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
+export const unstable_settings = {
+  initialRouteName: 'index',
+};
+
 export default function RootLayout() {
   const [loaded, error] = useFonts({
     SpaceMono: require('../../assets/fonts/SpaceMono-Regular.ttf'),
@@ -40,13 +42,9 @@ export default function RootLayout() {
 }
 
 function RootLayoutNav() {
-  const colorScheme = useColorScheme();
-
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <DevToolsPluginsContainer>
-        <Stack />
-      </DevToolsPluginsContainer>
-    </ThemeProvider>
+    <DevToolsPluginsContainer>
+      <Stack />
+    </DevToolsPluginsContainer>
   );
 }

apps/example/src/app/_layout.tsx

@@ -1,10 +1,8 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { Link, Stack, type LinkProps } from 'expo-router';
-import { Pressable, StyleSheet } from 'react-native';
+import { Text, View, Pressable, StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { Text, View } from '@/components/Themed';
-
 export default function TesterScreen() {
   return (
     <SafeAreaView style={styles.outerContainer}>

apps/example/src/app/index.tsx

@@ -1,31 +1,29 @@
-import * as React from 'react';
-import { View, RefreshControl, StyleSheet, ScrollView } from 'react-native';
-import { Title, Paragraph } from 'react-native-paper';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { RouteProp } from '@react-navigation/native';
-import { useQuery } from '@tanstack/react-query';
-
-import { LoadingIndicator } from '@/react-query/components/LoadingIndicator';
 import { ErrorMessage } from '@/react-query/components/ErrorMessage';
+import { LoadingIndicator } from '@/react-query/components/LoadingIndicator';
 import { useRefreshByUser } from '@/react-query/hooks/useRefreshByUser';
 import { fetchMovie, MovieDetails } from '@/react-query/lib/api';
-import type { MoviesStackNavigator } from '@/react-query/types';
+import { useQuery } from '@tanstack/react-query';
+import { Stack, useLocalSearchParams } from 'expo-router';
+import * as React from 'react';
+import { RefreshControl, ScrollView, StyleSheet, View } from 'react-native';
+import { Paragraph, Title } from 'react-native-paper';
 
-type MoviesDetailsScreenNavigationProp = NativeStackNavigationProp<
-  MoviesStackNavigator,
-  'MovieDetails'
->;
+export default function MovieDetailsScreen() {
+  const { movie } = useLocalSearchParams<{ movie: string }>();
 
-type Props = {
-  navigation: MoviesDetailsScreenNavigationProp;
-  route: RouteProp<MoviesStackNavigator, 'MovieDetails'>;
-};
+  return (
+    <>
+      <Stack.Screen options={{ title: movie }} />
+      <MovieDetailsInfo movie={movie} />
+    </>
+  );
+}
 
-export default function MovieDetailsScreen({ route }: Props) {
+function MovieDetailsInfo({ movie }: { movie: string }) {
   const { isPending, error, data, refetch } = useQuery<MovieDetails, Error>({
-    queryKey: ['movie', route.params.movie.title],
-    queryFn: () => fetchMovie(route.params.movie.title),
-    initialData: route.params.movie as MovieDetails,
+    queryKey: ['movie', movie],
+    queryFn: () => fetchMovie(movie),
+    initialData: { title: movie } as MovieDetails,
   });
 
   const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch);

apps/example/src/app/react-query/MovieDetailsScreen.tsx apps/example/src/app/react-query/[movie].tsx

@@ -1,4 +1,4 @@
-import { Slot } from 'expo-router';
+import { Stack } from 'expo-router';
 import { AppStateStatus, Platform } from 'react-native';
 import { useReactQueryDevTools } from '@dev-plugins/react-query';
 import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query';
@@ -17,14 +17,18 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: 2 } },
 });
 
+export const unstable_settings = {
+  initialRouteName: 'index',
+};
+
 export default function Layout() {
   useAppState(onAppStateChange);
   useOnlineManager();
   useReactQueryDevTools(queryClient);
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Slot />
+      <Stack />
     </QueryClientProvider>
   );
 }

apps/example/src/app/react-query/_layout.tsx

@@ -1,25 +1,16 @@
 import * as React from 'react';
 import { FlatList, RefreshControl, StyleSheet, View } from 'react-native';
-import { Stack } from 'expo-router';
+import { Stack, useNavigation } from 'expo-router';
 import { useQuery } from '@tanstack/react-query';
 
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { LoadingIndicator } from '@/react-query/components/LoadingIndicator';
-import { ErrorMessage } from '@/react-query/components/ErrorMessage';
 import { Divider } from '@/react-query/components/Divider';
 import { ListItem } from '@/react-query/components/ListItem';
 import { useRefreshByUser } from '@/react-query/hooks/useRefreshByUser';
 import { useRefreshOnFocus } from '@/react-query/hooks/useRefreshOnFocus';
 import { fetchMovies, Movie } from '@/react-query/lib/api';
-import { MoviesStackNavigator } from '@/react-query/types';
 
-type MoviesListScreenNavigationProp = NativeStackNavigationProp<MoviesStackNavigator, 'MoviesList'>;
-
-type Props = {
-  navigation: MoviesListScreenNavigationProp;
-};
-
-export default function MoviesListScreen({ navigation }: Props) {
+export default function MoviesListScreen() {
+  const navigation = useNavigation();
   const { isPending, error, data, refetch } = useQuery<Movie[], Error>({
     queryKey: ['movies'],
     queryFn: fetchMovies,
@@ -29,8 +20,10 @@ export default function MoviesListScreen({ navigation }: Props) {
 
   const onListItemPress = React.useCallback(
     (movie: any) => {
-      navigation.navigate('MovieDetails', {
-        movie,
+      console.log('movie:', movie);
+      // @ts-expect-error: untyped
+      navigation.navigate('[movie]', {
+        movie: movie.title,
       });
     },
     [navigation]
@@ -53,7 +46,8 @@ export default function MoviesListScreen({ navigation }: Props) {
         ItemSeparatorComponent={() => <Divider />}
         refreshControl={
           <RefreshControl refreshing={isRefetchingByUser} onRefresh={refetchByUser} />
-        }></FlatList>
+        }
+      />
     </View>
   );
 }