docs: Add Expo instructions to installation guide

reactive · Jun 20, 2024 · dc3d460 · dc3d460
1 parent 2ff0092
commit dc3d460
Show file tree

Hide file tree

Showing 4 changed files with 222 additions and 90 deletions.
diff --git a/docs/core/api/LogoutManager.md b/docs/core/api/LogoutManager.md
@@ -22,37 +22,23 @@ Logs out based on fetch responses. By default this is triggered by [401 (Unautho
 ## Usage
 
 <Tabs
-defaultValue="18-web"
+defaultValue="web"
 groupId="platform"
 values={[
-{ label: 'React Web 18+', value: '18-web' },
+{ label: 'Web', value: 'web' },
 { label: 'React Native', value: 'native' },
 { label: 'NextJS', value: 'nextjs' },
-{ label: 'React Web 16+', value: 'web' },
+{ label: 'Expo', value: 'expo' },
 ]}>
-<TabItem value="web">
-
-```tsx title="/index.tsx"
-import { DataProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
-import ReactDOM from 'react-dom';
-
-// highlight-next-line
-const managers = [new LogoutManager(), ...getDefaultManagers()];
-
-ReactDOM.render(
-  <DataProvider managers={managers}>
-    <App />
-  </DataProvider>,
-  document.body,
-);
-```
-
-</TabItem>
 
-<TabItem value="18-web">
+<TabItem value="web">
 
 ```tsx title="/index.tsx"
-import { DataProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
+import {
+  DataProvider,
+  LogoutManager,
+  getDefaultManagers,
+} from '@data-client/react';
 import ReactDOM from 'react-dom';
 
 // highlight-next-line
@@ -70,7 +56,11 @@ ReactDOM.createRoot(document.body).render(
 <TabItem value="native">
 
 ```tsx title="/index.tsx"
-import { DataProvider, LogoutManager, getDefaultManagers } from '@data-client/react';
+import {
+  DataProvider,
+  LogoutManager,
+  getDefaultManagers,
+} from '@data-client/react';
 import { AppRegistry } from 'react-native';
 
 // highlight-next-line
@@ -88,32 +78,94 @@ AppRegistry.registerComponent('MyApp', () => Root);
 
 <TabItem value="nextjs">
 
+```tsx title="app/Provider.tsx"
+'use client';
+import { LogoutManager, getDefaultManagers } from '@data-client/react';
+import { DataProvider } from '@data-client/react/nextjs';
+
+// highlight-next-line
+const managers = [new LogoutManager(), ...getDefaultManagers()];
+
+export default function Provider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <DataProvider managers={managers}>{children}</DataProvider>;
+}
+```
+
 ```tsx title="app/_layout.tsx"
 import Provider from './Provider';
 
 export default function RootLayout({ children }) {
   return (
     <html>
       <body>
-        <Provider>
-          {children}
-        </Provider>
+        <Provider>{children}</Provider>
       </body>
     </html>
   );
 }
 ```
 
+</TabItem>
+<TabItem value="expo">
+
 ```tsx title="app/Provider.tsx"
-'use client';
-import { LogoutManager, getDefaultManagers } from '@data-client/react';
-import { DataProvider } from '@data-client/react/nextjs';
+import {
+  LogoutManager,
+  getDefaultManagers,
+  DataProvider,
+} from '@data-client/react';
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from '@react-navigation/native';
+import { useColorScheme } from '@/hooks/useColorScheme';
 
 // highlight-next-line
 const managers = [new LogoutManager(), ...getDefaultManagers()];
 
-export default function Provider({ children }: { children: React.ReactNode }) {
-  return <DataProvider managers={managers}>{children}</DataProvider>;
+export default function Provider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const colorScheme = useColorScheme();
+
+  return (
+    <ThemeProvider
+      value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
+    >
+      // highlight-next-line
+      <DataProvider managers={managers}>{children}</DataProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+```tsx title="app/_layout.tsx"
+import { Stack } from 'expo-router';
+import 'react-native-reanimated';
+
+// highlight-next-line
+import Provider from './Provider';
+
+export default function RootLayout() {
+  return (
+    // highlight-start
+    <Provider>
+      // highlight-end
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      // highlight-start
+    </Provider>
+    // highlight-end
+  );
 }
 ```
 
@@ -155,7 +207,7 @@ const managers = [
       unAuth();
       // still reset the store
       // highlight-next-line
-      controller.invalidateAll({ testKey })
+      controller.invalidateAll({ testKey });
     },
   }),
   ...getDefaultManagers(),

diff --git a/docs/core/api/Manager.md b/docs/core/api/Manager.md
@@ -75,33 +75,16 @@ sure to hoist to module level or wrap in a useMemo() to ensure they are not recr
 have internal state, so it is important to not constantly recreate them.
 
 <Tabs
-defaultValue="18-web"
+defaultValue="web"
 groupId="platform"
 values={[
-{ label: 'React Web 16+', value: 'web' },
-{ label: 'React Web 18+', value: '18-web' },
+{ label: 'Web', value: 'web' },
 { label: 'React Native', value: 'native' },
 { label: 'NextJS', value: 'nextjs' },
+{ label: 'Expo', value: 'expo' },
 ]}>
-<TabItem value="web">
-
-```tsx title="/index.tsx"
-import { DataProvider, getDefaultManagers } from '@data-client/react';
-import ReactDOM from 'react-dom';
-
-const managers = [...getDefaultManagers(), new MyManager()];
-
-ReactDOM.render(
-  <DataProvider managers={managers}>
-    <App />
-  </DataProvider>,
-  document.body,
-);
-```
-
-</TabItem>
 
-<TabItem value="18-web">
+<TabItem value="web">
 
 ```tsx title="/index.tsx"
 import { DataProvider, getDefaultManagers } from '@data-client/react';
@@ -138,18 +121,89 @@ AppRegistry.registerComponent('MyApp', () => Root);
 
 <TabItem value="nextjs">
 
-```tsx title="pages/_app.tsx"
-import { DataProvider, getDefaultManagers } from '@data-client/react';
-import { AppDataProvider } from '@data-client/ssr/nextjs';
-import type { AppProps } from 'next/app';
+```tsx title="app/Provider.tsx"
+'use client';
+import { getDefaultManagers } from '@data-client/react';
+import { DataProvider } from '@data-client/react/nextjs';
 
+// highlight-next-line
 const managers = [...getDefaultManagers(), new MyManager()];
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function Provider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <DataProvider managers={managers}>{children}</DataProvider>;
+}
+```
+
+```tsx title="app/_layout.tsx"
+import Provider from './Provider';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  );
+}
+```
+
+</TabItem>
+<TabItem value="expo">
+
+```tsx title="app/Provider.tsx"
+import { getDefaultManagers, DataProvider } from '@data-client/react';
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from '@react-navigation/native';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+// highlight-next-line
+const managers = [...getDefaultManagers(), new MyManager()];
+
+export default function Provider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const colorScheme = useColorScheme();
+
   return (
-    <AppDataProvider managers={managers}>
-      <Component {...pageProps} />
-    </AppDataProvider>
+    <ThemeProvider
+      value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
+    >
+      // highlight-next-line
+      <DataProvider managers={managers}>{children}</DataProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+```tsx title="app/_layout.tsx"
+import { Stack } from 'expo-router';
+import 'react-native-reanimated';
+
+// highlight-next-line
+import Provider from './Provider';
+
+export default function RootLayout() {
+  return (
+    // highlight-start
+    <Provider>
+      // highlight-end
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      // highlight-start
+    </Provider>
+    // highlight-end
   );
 }
 ```
@@ -163,8 +217,8 @@ Managers live in the DataProvider centralized store. They orchestrate complex co
 via intercepting and dispatching actions, as well as reading the internal state.
 
 <ThemedImage
-  alt="Manager flux flow"
-  sources={{
+alt="Manager flux flow"
+sources={{
     light: useBaseUrl('/img/flux-full.png'),
     dark: useBaseUrl('/img/flux-full-dark.png'),
   }}
@@ -215,7 +269,11 @@ export default class StreamManager implements Manager {
         try {
           const msg = JSON.parse(event.data);
           if (msg.type in this.endpoints)
-            controller.setResponse(this.endpoints[msg.type], ...msg.args, msg.data);
+            controller.setResponse(
+              this.endpoints[msg.type],
+              ...msg.args,
+              msg.data,
+            );
         } catch (e) {
           console.error('Failed to handle message');
           console.error(e);

diff --git a/docs/core/getting-started/installation.md b/docs/core/getting-started/installation.md
@@ -63,9 +63,9 @@ follow the instructions to [add legacy browser support to packages](../guides/le
 <summary><b>ReactJS 16+ and React Native</b></summary>
 
 ReactJS 16.2 and above is supported (the one with hooks!). React 18 provides improved [Suspense](../api/useSuspense.md)
-support and features. Both React Native and React Navigation are supported.
+support and features. Both React Native, [React Navigation](https://reactnavigation.org/) and [Expo](https://docs.expo.dev) are supported.
 
-Other native frameworks like Expo should work, but have not been verified. If you have a working project using other
+If you have a working project using other
 React libraries, [feel free to share with others](https://github.com/reactive/data-client/discussions/2422) in our
 discussions.