fix: add support for easy title + descriptions on web :)

.husky/commit-msg

@@ -0,0 +1,37 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+if [ -t 1 ] ; then
+  exec < /dev/tty ; # <- enables interactive shell
+fi
+
+dir="$(git rev-parse --show-toplevel)"
+
+call_lefthook()
+{
+  if lefthook -h >/dev/null 2>&1
+  then
+    eval lefthook $@
+  elif test -f "$dir/node_modules/@arkweid/lefthook/bin/lefthook"
+  then
+    eval "$dir/node_modules/@arkweid/lefthook/bin/lefthook $@"
+  elif bundle exec lefthook -h >/dev/null 2>&1
+  then
+    bundle exec lefthook $@
+  elif npx @arkweid/lefthook -h >/dev/null 2>&1
+  then
+    npx @arkweid/lefthook $@
+  elif yarn lefthook -h >/dev/null 2>&1
+  then
+    yarn lefthook $@
+  else
+    echo "Can't find lefthook in PATH"
+  fi
+}
+
+
+
+call_lefthook "run commit-msg $@"

.husky/pre-commit

@@ -0,0 +1,37 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+if [ -t 1 ] ; then
+  exec < /dev/tty ; # <- enables interactive shell
+fi
+
+dir="$(git rev-parse --show-toplevel)"
+
+call_lefthook()
+{
+  if lefthook -h >/dev/null 2>&1
+  then
+    eval lefthook $@
+  elif test -f "$dir/node_modules/@arkweid/lefthook/bin/lefthook"
+  then
+    eval "$dir/node_modules/@arkweid/lefthook/bin/lefthook $@"
+  elif bundle exec lefthook -h >/dev/null 2>&1
+  then
+    bundle exec lefthook $@
+  elif npx @arkweid/lefthook -h >/dev/null 2>&1
+  then
+    npx @arkweid/lefthook $@
+  elif yarn lefthook -h >/dev/null 2>&1
+  then
+    yarn lefthook $@
+  else
+    echo "Can't find lefthook in PATH"
+  fi
+}
+
+
+
+call_lefthook "run pre-commit $@"

.husky/prepare-commit-msg

@@ -0,0 +1,39 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+if [ -t 1 ] ; then
+  exec < /dev/tty ; # <- enables interactive shell
+fi
+
+dir="$(git rev-parse --show-toplevel)"
+
+call_lefthook()
+{
+  if lefthook -h >/dev/null 2>&1
+  then
+    eval lefthook $@
+  elif test -f "$dir/node_modules/@arkweid/lefthook/bin/lefthook"
+  then
+    eval "$dir/node_modules/@arkweid/lefthook/bin/lefthook $@"
+  elif bundle exec lefthook -h >/dev/null 2>&1
+  then
+    bundle exec lefthook $@
+  elif npx @arkweid/lefthook -h >/dev/null 2>&1
+  then
+    npx @arkweid/lefthook $@
+  elif yarn lefthook -h >/dev/null 2>&1
+  then
+    yarn lefthook $@
+  else
+    echo "Can't find lefthook in PATH"
+  fi
+}
+
+# lefthook_version: 9df6c1f1f0b607d16db43f25a405e842
+
+call_lefthook "install"
+
+call_lefthook "run prepare-commit-msg $@"

example/app.json

@@ -31,7 +31,9 @@
       "package": "com.webridge.navigation"
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/favicon.png",
+      "name": "Navigation",
+      "description": "Navigation"
     },
     "plugins": [
       "./expo-plugin-android-material-you-bottom-bar",

example/src/NavigatorScreens.tsx

@@ -12,17 +12,29 @@ import {
 export const AuthScreen = registerScreen(
   '/auth',
   lazy(() => import('./AuthScreen')),
-  () => {}
+  () => {},
+  {
+    title: 'Login',
+    description: 'Login to your account',
+  }
 );
 export const HomeScreen = registerScreen(
   '/home',
   lazy(() => import('./HomeScreen')),
-  () => {}
+  () => {},
+  {
+    title: 'Home',
+    description: 'Home is where the heart is',
+  }
 );
 export const AccountScreen = registerScreen(
   '/account',
   RequireAuthHOC(lazy(() => import('./AccountScreen'))),
-  () => {}
+  () => {},
+  {
+    title: 'Account',
+    description: 'Your account',
+  }
 );
 
 export const PostsScreen = registerScreen(
@@ -33,6 +45,10 @@ export const PostsScreen = registerScreen(
       staleTime: 3000,
     });
     return 'testQueryReference';
+  },
+  {
+    title: 'Posts',
+    description: 'All posts',
   }
 );
 
@@ -47,5 +63,9 @@ export const PostScreen = registerScreen(
       { staleTime: 3000 }
     );
     return 'testQueryReference';
+  },
+  {
+    title: 'Post',
+    description: 'A post',
   }
 );

package.json

@@ -64,6 +64,7 @@
     "@types/color": "^3.0.3",
     "@types/jest": "^29.2.4",
     "@types/react": "^18.0.28",
+    "@types/react-helmet": "^6.1.6",
     "@types/react-native": "^0.71.3",
     "color": "^4.2.3",
     "commitlint": "^17.0.2",
@@ -177,6 +178,6 @@
   },
   "dependencies": {
     "expo-status-bar": "^1.4.4",
-    "react-helmet-async": "^1.3.0"
+    "react-helmet": "^6.1.0"
   }
 }

src/Head.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Helmet } from 'react-helmet-async';
+import { Helmet } from 'react-helmet';
 
 export function Head({ children }: { children: any }) {
   return <Helmet>{children}</Helmet>;

src/StatusBar.web.tsx

@@ -1,12 +1,27 @@
 import * as React from 'react';
 import type { StatusBarProps } from 'expo-status-bar';
-
+const getElement = () => document.querySelector('meta[name=theme-color]');
 function StatusBar({ backgroundColor }: StatusBarProps) {
+  const originalColor = React.useRef<string | null>(
+    getElement()?.getAttribute('content') || null
+  );
+
   React.useEffect(() => {
     if (backgroundColor && typeof backgroundColor === 'string') {
-      const themeColor = document.querySelector('meta[name=theme-color]');
+      const themeColor = getElement();
       themeColor?.setAttribute('content', backgroundColor);
+
+      const orgColor = originalColor.current;
+      return () => {
+        if (orgColor) {
+          themeColor?.setAttribute('content', orgColor);
+        } else {
+          themeColor?.remove();
+        }
+      };
     }
+    return undefined;
   }, [backgroundColor]);
+  return null;
 }
-export default StatusBar;
+export default React.memo(StatusBar);

src/navigation/NavigationStack.web.tsx

@@ -4,34 +4,48 @@ import { NavigationMotion } from 'navigation-react-mobile';
 import OptimizedContext, {
   OptimizedContextProvider,
 } from '../contexts/OptimizedContext';
+import { Head } from '../Head';
+import type { BaseScreen } from 'react-native-ridge-navigation';
 
 function NavigationStack({ renderWeb }: { renderWeb?: (key: string) => any }) {
   const { theme } = React.useContext(OptimizedContext);
   return (
     <NavigationMotion
       duration={0}
-      renderMotion={(_, scene, key, ___, state, data) => (
-        <div
-          key={key}
-          style={{
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-            overflow: 'hidden',
-            display: 'flex',
-            flex: 1,
-            flexDirection: 'column',
-            // opacity: 1,
-            backgroundColor: theme.layout.backgroundColor as any,
-          }}
-        >
-          <OptimizedContextProvider state={state} data={data}>
-            {renderWeb?.(state.key) || scene}
-          </OptimizedContextProvider>
-        </div>
-      )}
+      renderMotion={(_, scene, key, active, state, data) => {
+        const screen = state.screen as BaseScreen;
+        const screenOptions = screen?.options;
+        const title = screenOptions?.title;
+        const description = screenOptions?.description;
+        return (
+          <div
+            key={key}
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              overflow: 'hidden',
+              display: 'flex',
+              flex: 1,
+              flexDirection: 'column',
+              // opacity: 1,
+              backgroundColor: theme.layout.backgroundColor as any,
+            }}
+          >
+            {active && (
+              <Head>
+                <title>{title || ''}</title>
+                <meta name="description" content={description || ''} />
+              </Head>
+            )}
+            <OptimizedContextProvider state={state} data={data}>
+              {renderWeb?.(state.key) || scene}
+            </OptimizedContextProvider>
+          </div>
+        );
+      }}
     />
   );
 }

src/navigationUtils.ts

@@ -18,6 +18,7 @@ export interface BaseScreen {
   path: string;
   element: ComponentType;
   preload: (params: any) => any;
+  options?: ScreenOptions;
 }
 
 export interface FluentParams {
@@ -101,15 +102,20 @@ export function createNormalRoot(child: BaseScreen): RootChildNormal {
 export type RootValue = RootChildNormal | RootChildBottomTabs;
 export type Root = Record<string, RootValue>;
 
+export type ScreenOptions = {
+  title?: string;
+  description?: string;
+};
 export function registerScreen<
   Path extends string,
   E extends ComponentType,
   Preload extends (params: ExtractRouteParams<Path>) => void
->(path: Path, element: E, preload: Preload) {
+>(path: Path, element: E, preload: Preload, options?: ScreenOptions) {
   return {
     path,
     element,
     preload,
+    options,
   };
 }