fix: Hot reload in web-example, improve navigation (#6947)

## Summary This PR: - fixes hot reload on web, - improves navigation (uses proper screen title, better back button name (adds space between words)), - fixes web url to navigation state mapping (proper page is displayed on refresh or when navigating to a screen via url change)
software-mansion · Jan 29, 2025 · 5784672 · 5784672
1 parent 210159e
commit 5784672
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 30 deletions.
diff --git a/apps/common-app/src/App.tsx b/apps/common-app/src/App.tsx
@@ -7,7 +7,7 @@ import {
   NavigationContainer,
 } from '@react-navigation/native';
 import { useCallback, useEffect, useState } from 'react';
-import { ActivityIndicator, Linking, Platform, View } from 'react-native';
+import { ActivityIndicator, Linking, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -38,18 +38,23 @@ export default function App() {
               getPathFromState(state, options).replace(/%2F/g, '/'),
             getStateFromPath: (path) => {
               const chunks = path.split('/').filter(Boolean);
-              const routes = chunks.reduce<Array<{ name: string }>>(
-                (result, chunk) => {
-                  const lastRoute = result[result.length - 1];
-                  const route = {
-                    name: lastRoute ? `${lastRoute.name}/${chunk}` : chunk,
-                  };
-                  result.push(route);
-                  return result;
-                },
-                []
-              );
-              return { routes };
+              if (chunks.length === 0) return { routes: [] };
+
+              const drawerRoute = chunks[0];
+              const stackRoutes = chunks.slice(1).map((_, index, array) => ({
+                name: array.slice(0, index + 1).join('/'),
+              }));
+
+              return {
+                routes: [
+                  {
+                    name: drawerRoute,
+                    state: {
+                      routes: stackRoutes,
+                    },
+                  },
+                ],
+              };
             },
             prefixes: [],
           }}
@@ -124,11 +129,7 @@ function useNavigationState() {
       try {
         const initialUrl = await Linking.getInitialURL();
 
-        if (
-          Platform.OS !== 'web' &&
-          Platform.OS !== 'macos' &&
-          initialUrl === null
-        ) {
+        if (!IS_MACOS && !IS_WEB && initialUrl === null) {
           // Only restore state if there's no deep link and we're not on web
           const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
           // Erase the state immediately after fetching it.

diff --git a/apps/common-app/src/apps/css/examples/animations/routes.ts b/apps/common-app/src/apps/css/examples/animations/routes.ts
@@ -159,7 +159,7 @@ const appearanceRoutes = {
         name: 'Color Formats',
         Component: animatedProperties.appearance.colors.ColorFormats,
       },
-      ColorFunctions: {
+      ColorProperties: {
         name: 'Color Properties',
         Component: animatedProperties.appearance.colors.ColorProperties,
       },

diff --git a/apps/common-app/src/apps/css/navigation/Navigator.tsx b/apps/common-app/src/apps/css/navigation/Navigator.tsx
@@ -126,6 +126,7 @@ type StackScreensOptions = {
 
 function createStackScreens(
   routes: Routes,
+  name: string,
   pathChunks: Array<string>,
   reducedMotion: boolean,
   options?: StackScreensOptions
@@ -150,7 +151,7 @@ function createStackScreens(
         options={{
           ...sharedOptions,
           animation: reducedMotion || depth === 0 ? 'none' : 'default',
-          title: pathChunks[pathChunks.length - 1],
+          title: name,
         }}
       />
     ),
@@ -160,6 +161,7 @@ function createStackScreens(
       if (isRouteWithRoutes(value)) {
         return createStackScreens(
           value.routes,
+          value.name,
           [...pathChunks, key],
           reducedMotion,
           {
@@ -177,7 +179,7 @@ function createStackScreens(
           options={{
             ...sharedOptions,
             animation: 'slide_from_right',
-            title: key,
+            title: value.name,
           }}
         />
       );
@@ -211,7 +213,12 @@ function Navigator() {
           statusBarStyle: 'dark',
         }}>
         {Object.entries(tabRoutes).flatMap(([key, value]) =>
-          createStackScreens(value.routes, [key], shouldReduceMotion)
+          createStackScreens(
+            value.routes,
+            value.name,
+            [key],
+            shouldReduceMotion
+          )
         )}
       </Stack.Navigator>
       <BottomTabBar currentRoute={currentRoute} routes={tabRoutesArray} />

diff --git a/apps/common-app/src/apps/css/navigation/utils.ts b/apps/common-app/src/apps/css/navigation/utils.ts
@@ -6,5 +6,6 @@ export function isRouteWithRoutes(route: Route): route is RouteWithRoutes {
 
 export function getScreenTitle(path: string): string {
   const parts = path.split('/');
-  return parts[parts.length - 1] ?? '';
+  const lastPart = parts[parts.length - 1] ?? '';
+  return lastPart.replace(/([A-Z])/g, ' $1').trim();
 }
diff --git a/apps/common-app/src/components/navigation/BackButton.tsx b/apps/common-app/src/components/navigation/BackButton.tsx
@@ -1,7 +1,7 @@
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { useNavigation } from '@react-navigation/native';
-import { memo } from 'react';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { memo, useCallback, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
 import Animated, { FadeInRight } from 'react-native-reanimated';
@@ -13,9 +13,17 @@ import { IS_WEB } from '@/utils';
 
 function BackButton() {
   const navigation = useNavigation();
+  const [prevRouteName, setPrevRouteName] = useState<string | undefined>(() => {
+    const routes = navigation.getState()?.routes;
+    return routes?.[routes.length - 2]?.name;
+  });
 
-  const routes = navigation.getState()?.routes;
-  const prevRouteName = routes?.[routes.length - 2]?.name;
+  useFocusEffect(
+    useCallback(() => {
+      const routes = navigation.getState()?.routes;
+      setPrevRouteName(routes?.[routes.length - 2]?.name);
+    }, [navigation])
+  );
 
   if (!prevRouteName || !navigation.canGoBack()) {
     return null;

diff --git a/apps/web-example/tsconfig.json b/apps/web-example/tsconfig.json
@@ -4,8 +4,8 @@
     "strict": true,
     "baseUrl": "../..",
     "paths": {
-      "@/*": ["./apps/common-app/src/*"]
-      // "react-native-reanimated": ["./packages/react-native-reanimated/src"]
+      "@/*": ["./apps/common-app/src/*"],
+      "react-native-reanimated": ["./packages/react-native-reanimated/src"]
     }
   },
   "include": ["**/*.ts", "**/*.tsx"]

diff --git a/packages/react-native-reanimated/src/css/platform/web/utils.ts b/packages/react-native-reanimated/src/css/platform/web/utils.ts
@@ -41,7 +41,7 @@ export function kebabize<T extends string>(property: T) {
 
 function easingMapper(easing: CSSTimingFunction) {
   if (typeof easing === 'string') {
-    return kebabize(easing);
+    return easing;
   }
 
   if (easing instanceof StepsEasing) {