fix: example web demo

README.md

@@ -13,7 +13,7 @@ control over the navigation!
 
 ## Features
 
-- New architecture (Fabric) ready
+- New architecture
 - Simple api
 - 100% Type safety (routes, params, bottom tabs)
 - Bundle splitting (lazy loading, smart prefetching)
@@ -27,6 +27,23 @@ control over the navigation!
 - A lot of control over the web layout
 - Universal links (already works, but docs need work)
 - PWA documentation (already works, but docs need work)
+- Expo support
+- Metro bundling on web
+
+
+## Expo
+If you use bundling with metro add this to your index.js file
+```tsx
+import '@expo/metro-runtime';
+```
+Customize index.html by pressing space on the web/index.html item + enter
+```shell
+npx expo  customize:web
+
+```
+Change in your index.html in body css
+```overflow-y:hidden``` to ```overflow: hidden```
+Because otherwise scrolling works very bad on iOS safari.
 
 ## Example
 
@@ -137,26 +154,25 @@ module.exports = function androidMaterialYouBottomBarPlugin(config) {
 
 ## Usage
 
+NavigationRoots.tsx
 ```tsx
-import {
-  createNormalRoot,
-  createNavigation,
-  createBottomTabsRoot,
-  createScreens,
-  defaultTheme,
-} from 'react-native-ridge-navigation';
 
-export const NavigationRoots = {
+
+const NavigationRoots = {
   RootHome: 'home',
   RootAuth: 'auth',
 };
+export default NavigationRoots;
+```
 
+BottomRoots.tsx
+```ts
 // svg to png
 // https://webkul.github.io/myscale/
 //
 // tab icon
 // http://nsimage.brosteins.com/Home
-export const BottomRoots = {
+const BottomRoots = {
   Posts: {
     path: '/post',
     title: () => 'Posts',
@@ -172,7 +188,7 @@ export const BottomRoots = {
     child: routes.AccountScreen,
   },
 };
-
+export default BottomRoots;
 ```
 
 ```tsx
@@ -193,12 +209,13 @@ import AsyncBoundaryScreen from './helpers/AsyncBoundaryScreen';
 const navigationRoot = {
   [NavigationRoots.RootHome]: createBottomTabsRoot(
     [BottomRoot.Home, BottomRoot.Posts, BottomRoot.Account],
-    {
-      breakingPointWidth: 500,
-      components: {
-        override: HeaderWeb,
-      },
-    }
+    // if you want to override web layout
+    // {
+    //   breakingPointWidth: 500,
+    //   components: {
+    //     override: WebLayout,
+    //   },
+    // }
   ),
   [NavigationRoots.RootAuth]: createNormalRoot(routes.AuthScreen),
 };
@@ -217,7 +234,7 @@ export default function App() {
 
 ```
 
-See example code for the asyncboundary stuff :)
+See example code for the async-boundary stuff :)
 
 ## New screen
 

example/.env

@@ -0,0 +1,2 @@
+EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH=1
+EXPO_UNSTABLE_TREE_SHAKING=1

example/app.json

@@ -25,7 +25,9 @@
       "package": "ridgenavigation.example"
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+
     },
     "plugins": [
       "./expo-plugin-android-material-you-bottom-bar"

example/index.js

@@ -1,3 +1,5 @@
+import '@expo/metro-runtime';
+
 import { registerRootComponent } from 'expo';
 
 import App from './src/App';

example/metro.config.js

@@ -11,8 +11,17 @@ const root = path.resolve(__dirname, '..');
  *
  * @type {import('metro-config').MetroConfig}
  */
-module.exports = getConfig(getDefaultConfig(__dirname), {
+const config = getConfig(getDefaultConfig(__dirname), {
   root,
   pkg,
   project: __dirname,
 });
+
+config.transformer.getTransformOptions = async () => ({
+  transform: {
+    experimentalImportSupport: true,
+    inlineRequires: true,
+  },
+});
+
+module.exports = config;

example/package.json

@@ -6,30 +6,33 @@
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "postinstall": "rm -rf node_modules/@expo/vector-icons && rm -rf node_modules/react-native-vector-icons"
   },
   "dependencies": {
     "@expo/metro-runtime": "~4.0.0",
-    "@shopify/flash-list": "^1.7.2",
+    "@shopify/flash-list": "1.7.1",
     "@tanstack/react-query": "^4.29.1",
     "expo": "~52.0.23",
     "expo-linking": "^7.0.3",
     "expo-status-bar": "~2.0.0",
     "expo-system-ui": "~4.0.6",
     "navigation-react-native": "9.26.0",
+    "postinstall-postinstall": "^2.1.0",
     "qs": "^6.13.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.5",
     "react-native-mmkv": "^3.2.0",
     "react-native-paper": "https://github.com/web-ridge/react-native-paper#dev",
-    "react-native-safe-area-context": "^5.0.0",
+    "react-native-safe-area-context": "4.12.0",
     "react-native-use-form": "^0.10.4",
     "react-native-web": "~0.19.13",
     "zustand": "^4.3.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "expo-atlas": "^0.4.0",
     "react-native-builder-bob": "^0.35.2"
   },
   "private": true

example/src/AccountScreen.tsx

@@ -10,11 +10,11 @@ import {
   BottomTabLink,
 } from 'react-native-ridge-navigation';
 import { View, ScrollView, Modal } from 'react-native';
-import { BottomRoot } from './Navigator';
 import Header from './Header';
 import { useRenderLog } from './helpers/utils';
 import routes from './Routes';
 import ButtonLink from './ButtonLink';
+import BottomRoots from './BottomRoots';
 
 function AccountScreen() {
   useRenderLog('AccountScreen');
@@ -42,7 +42,7 @@ function AccountScreen() {
             style={{ marginTop: 12 }}
             mode="outlined"
             onPress={() => {
-              updateBadge(BottomRoot.Posts, 10000);
+              updateBadge(BottomRoots.Posts, 10000);
             }}
           >
             +1 bottom-tab post badge
@@ -51,12 +51,12 @@ function AccountScreen() {
             style={{ marginTop: 12 }}
             mode="outlined"
             onPress={() => {
-              switchToTab(BottomRoot.Posts);
+              switchToTab(BottomRoots.Posts);
             }}
           >
             Go to posts tab
           </Button>
-          <BottomTabLink to={BottomRoot.Posts} params={{}}>
+          <BottomTabLink to={BottomRoots.Posts} params={{}}>
             {(linkProps) => (
               <Button style={{ marginTop: 12 }} mode="outlined" {...linkProps}>
                 Go to posts tab (route)

example/src/App.tsx

@@ -20,14 +20,18 @@ import queryClient from './queryClient';
 import {
   createBottomTabsRoot,
   createNormalRoot,
+  createScreens,
   createSimpleTheme,
   NavigationProvider,
 } from 'react-native-ridge-navigation';
-// import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-
-import { BottomRoot, NavigationRoots, screens } from './Navigator';
 import routes from './Routes';
+
 import AsyncBoundaryScreen from './helpers/AsyncBoundaryScreen';
+import NavigationRoots from './NavigationRoots';
+import BottomRoots from './BottomRoots';
+
+const screens = createScreens(routes);
+
 function getTheme(colorScheme: ColorSchemeName): typeof MD3LightTheme {
   const isDark = colorScheme === 'dark';
   const baseTheme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme;
@@ -88,7 +92,7 @@ let theme = createSimpleTheme({
 
 const navigationRoot = {
   [NavigationRoots.RootHome]: createBottomTabsRoot(
-    [BottomRoot.Home, BottomRoot.Posts, BottomRoot.Account],
+    [BottomRoots.Home, BottomRoots.Posts, BottomRoots.Account],
     {
       breakingPointWidth: 600,
       components: {
@@ -110,9 +114,9 @@ const navigationRoot = {
             >
               <Image
                 source={{
-                  uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2008px-Google_%22G%22_Logo.svg.png',
+                  uri: 'https://webridge-assets.s3.eu-central-1.amazonaws.com/half5-logo.png',
                 }}
-                style={{ width: 50, height: 50 }}
+                style={{ height: 60, width: 186 }}
               />
             </View>
           );

example/src/AuthScreen.tsx

@@ -8,9 +8,9 @@ import PaddingView from './helpers/PaddingView';
 import Spacer from './helpers/Spacer';
 import ScreenWrapper from './helpers/ScreenWrapper';
 import { SwitchRoot } from 'react-native-ridge-navigation';
-import { NavigationRoots } from './Navigator';
 import { fetchAndSaveProfileForToken } from './useAuthState';
 import Introduction from './Introduction';
+import NavigationRoots from './NavigationRoots';
 
 interface SignInFormState {
   username: string;

example/src/Authorization.tsx

@@ -1,6 +1,6 @@
 import { SwitchRoot } from 'react-native-ridge-navigation';
-import { NavigationRoots } from './Navigator';
 import useAuthState from './useAuthState';
+import NavigationRoots from './NavigationRoots';
 
 export function RequireAuthHOC<T>(WrappedComponent: any) {
   let func = function (props: T) {

example/src/Navigator.ts → example/src/BottomRoots.tsx

@@ -1,13 +1,6 @@
 import * as routes from './NavigatorScreens';
-import { createScreens } from 'react-native-ridge-navigation';
 
-export const NavigationRoots = {
-  RootHome: 'app',
-  RootAuth: 'auth',
-  RootExample: 'example',
-};
-
-export const BottomRoot = {
+const BottomRoots = {
   Home: {
     path: '/home',
     title: () => 'Home',
@@ -30,5 +23,4 @@ export const BottomRoot = {
     child: routes.AccountScreen,
   },
 };
-
-export const screens = createScreens(routes);
+export default BottomRoots;

example/src/HomeScreen.tsx

@@ -9,8 +9,9 @@ import {
   fluentScreen,
   useNavigation,
 } from 'react-native-ridge-navigation';
-import { BottomRoot, NavigationRoots } from './Navigator';
 import Routes from './Routes';
+import NavigationRoots from './NavigationRoots';
+import BottomRoots from './BottomRoots';
 
 function HomeScreen() {
   useRenderLog('HomeScreen');
@@ -60,7 +61,7 @@ function FluentButton() {
       <Button
         onPress={() => {
           fluent(
-            fluentRootBottomTabs(NavigationRoots.RootHome, BottomRoot.Account),
+            fluentRootBottomTabs(NavigationRoots.RootHome, BottomRoots.Account),
             fluentScreen(Routes.HomeScreen, {}),
             fluentScreen(Routes.PostScreen, { id: '10' }),
             fluentScreen(Routes.PostScreen, { id: '20' }),

example/src/NavigationRoots.ts

@@ -0,0 +1,6 @@
+const NavigationRoots = {
+  RootHome: 'app',
+  RootAuth: 'auth',
+  RootExample: 'example',
+};
+export default NavigationRoots;