Supported function props in rsc, e.g., shared els

grahammendick · grahammendick · commit 780c08e3afb2 · 2025-05-24T22:44:40.000+01:00
Can't pass a function from a server component (App) to a client component, so lots of NavigationStack props didn't work, e.g., shared elements. Moved the NavigationStack out of server component (App) into client component (RootProvider) so all props work, including the function ones like shared elements
diff --git a/NavigationReactMobile/sample/rsc/src/App.tsx b/NavigationReactMobile/sample/rsc/src/App.tsx
@@ -1,6 +1,6 @@
 'use server-entry';
 import './client';
-import { NavigationStack, Scene } from 'navigation-react-mobile';
+import { Scene } from 'navigation-react-mobile';
 import RootProvider from './RootProvider';
 import People from './People';
 import Person from './Person';
@@ -13,22 +13,12 @@ const App = async ({url}: any) => {
       </head>
       <body>
         <RootProvider url={url}>
-          <NavigationStack
-            unmountStyle={[{transform: 'translateX(100%)'}, {transform: 'translateX(0)'}]}
-            crumbStyle={[{transform: 'translateX(5%) scale(0.9)', opacity: 0},{transform: 'translateX(0) scale(1)', opacity: 1}]}
-            style={{
-              position: 'fixed',
-              left: '0',
-              right: '0',
-              top: '0',
-              bottom: '0',
-              overflow: 'auto',
-              backgroundColor: '#fff',
-              margin: '8px',
-            }}>
-            <Scene stateKey="people"><People /></Scene>
-            <Scene stateKey="person" dataKeyDeps={['id']}><Person /></Scene>
-          </NavigationStack>
+          <Scene stateKey="people">
+            <People />
+          </Scene>
+          <Scene stateKey="person" dataKeyDeps={['id']}>
+            <Person />
+          </Scene>
         </RootProvider>
       </body>
     </html>
diff --git a/NavigationReactMobile/sample/rsc/src/RootProvider.tsx b/NavigationReactMobile/sample/rsc/src/RootProvider.tsx
@@ -3,7 +3,7 @@ import { useMemo, useContext, useEffect } from "react";
 import { fetchRSC } from '@parcel/rsc/client';
 import { StateNavigator } from 'navigation';
 import { NavigationHandler } from "navigation-react";
-import { MobileHistoryManager } from 'navigation-react-mobile';
+import { NavigationStack, MobileHistoryManager } from 'navigation-react-mobile';
 import stateNavigator from "./stateNavigator";
 import HmrContext from "./HmrContext";
 
@@ -42,7 +42,21 @@ const RootProvider = ({url, children}: any) => {
   });
   return (
     <NavigationHandler stateNavigator={clientNavigator} fetchRSC={fetchRSC}>
-      {children}
+      <NavigationStack
+        unmountStyle={[{transform: 'translateX(100%)'}, {transform: 'translateX(0)'}]}
+        crumbStyle={[{transform: 'translateX(5%) scale(0.9)', opacity: 0},{transform: 'translateX(0) scale(1)', opacity: 1}]}
+        style={{
+          position: 'fixed',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          overflow: 'auto',
+          backgroundColor: '#fff',
+          margin: '8px',
+        }}>
+        {children}
+      </NavigationStack>
     </NavigationHandler>
   )
 }
