Upgrading dependencies and running apps/discovery

.eslintrc.js

@@ -1,15 +1,13 @@
 module.exports = {
   root: true,
-  extends: ['@react-native-community'],
+  extends: ['@react-native'],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
+  plugins: ['@react-native'],
   ignorePatterns: ['lib/', 'types/'],
   rules: {
-    'comma-dangle': ['error', 'never'],
     '@typescript-eslint/no-unused-vars': [
       'error',
       { vars: 'all', args: 'after-used', ignoreRestSiblings: true }
-    ],
-    'no-eval': 'off'
+    ]
   }
 };

apps/benchmarking/package.json

@@ -9,21 +9,21 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^43.0.0",
-    "expo-keep-awake": "~10.0.0",
-    "expo-status-bar": "~1.1.0",
-    "ramda": "^0.27.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "^0.82.0",
+    "expo": "^54.0.15",
+    "expo-keep-awake": "~15.0.7",
+    "expo-status-bar": "~3.0.8",
+    "ramda": "^0.32.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-render-html": "workspace:*",
     "react-native-render-html-v5": "npm:react-native-render-html@^5.0.0",
-    "react-native-safe-area-context": "3.3.2",
-    "react-native-web": "0.17.1",
-    "react-states": "^5.4.0"
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-web": "^0.21.2",
+    "react-states": "^8.3.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.28.4"
   },
   "private": true,
   "installConfig": {

apps/discovery/.eslintrc.js

@@ -0,0 +1,10 @@
+const defaultConf = require('../../.eslintrc.js');
+module.exports = {
+  ...defaultConf,
+  rules: {
+    ...defaultConf.rules,
+    '@typescript-eslint/no-shadow': 'off',
+    'react-native/no-inline-styles': 'off',
+    'react/no-unstable-nested-components': 'off',
+  }
+};

apps/discovery/App.tsx

@@ -1,43 +1,43 @@
-import { enableScreens } from 'react-native-screens';
+import { StacksProvider } from '@mobily/stacks';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
+import { useColorScheme, useWindowDimensions } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { enableScreens } from 'react-native-screens';
 import useCachedResources from './src/hooks/useCachedResources';
 import Navigation from './src/navigation';
 import ThemeProvider from './src/theme/ThemeProvider';
 import ColorSchemeProvider from './src/state/ColorSchemeProvider';
-import { useColorScheme, useWindowDimensions } from 'react-native';
 import UILinkPressDisplayMolecule from './src/components/UILinkPressDisplayMolecule';
-import { StacksProvider } from '@mobily/stacks';
 import contentWidthContextNucleon from './src/components/nucleons/contentWidthContextNucleon';
 import PageToolkitProvider from './src/providers/PageToolkitProvider';
 
 enableScreens();
 
 export default function App() {
   const isLoadingComplete = useCachedResources();
-  const initialColorScheme = useColorScheme() || 'light';
+  const initialColorScheme = useColorScheme();
   const contentWidth = useWindowDimensions().width;
-  if (!isLoadingComplete) {
-    return null;
-  } else {
-    return (
-      <contentWidthContextNucleon.Provider value={contentWidth}>
-        <PageToolkitProvider>
-          <StacksProvider spacing={5}>
-            <SafeAreaProvider>
-              <ColorSchemeProvider initialColorScheme={initialColorScheme}>
-                <ThemeProvider>
-                  <UILinkPressDisplayMolecule>
-                    <Navigation />
-                    <StatusBar style="light" />
-                  </UILinkPressDisplayMolecule>
-                </ThemeProvider>
-              </ColorSchemeProvider>
-            </SafeAreaProvider>
-          </StacksProvider>
-        </PageToolkitProvider>
-      </contentWidthContextNucleon.Provider>
-    );
-  }
+
+  if (!isLoadingComplete) return;
+
+  return (
+    <contentWidthContextNucleon.Provider value={contentWidth}>
+      <PageToolkitProvider>
+        <StacksProvider spacing={5}>
+          <SafeAreaProvider>
+            <ColorSchemeProvider
+              initialColorScheme={initialColorScheme ?? 'light'}>
+              <ThemeProvider>
+                <UILinkPressDisplayMolecule>
+                  <Navigation />
+                  <StatusBar style="light" />
+                </UILinkPressDisplayMolecule>
+              </ThemeProvider>
+            </ColorSchemeProvider>
+          </SafeAreaProvider>
+        </StacksProvider>
+      </PageToolkitProvider>
+    </contentWidthContextNucleon.Provider>
+  );
 }

apps/discovery/app.config.js

@@ -1,11 +1,10 @@
-const version = require('./version').demo;
 module.exports = {
   expo: {
     name: 'RNRH Discovery',
     slug: 'react-native-render-html-discovery',
     description:
       'An App to discover React Native Render HTML features and API!',
-    version: version,
+    version: require('./version').demo,
     primaryColor: '#6767e2',
     orientation: 'default',
     icon: './assets/images/icon.png',

apps/discovery/babel.config.js

@@ -1,7 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
-    plugins: ['react-native-reanimated/plugin']
+    presets: ['babel-preset-expo']
   };
 };

apps/discovery/metro.config.js

@@ -1,62 +1,57 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
 const path = require('path');
 const fs = require('fs');
-const { getDefaultConfig } = require('expo/metro-config');
 
-const packagesRoot = path.resolve(__dirname, '../../packages');
-const docToolsRoot = path.resolve(__dirname, '../../doc-tools');
+const projectRoot = __dirname;
+const packagesRoot = path.resolve(projectRoot, '../../packages');
+const docToolsRoot = path.resolve(projectRoot, '../../doc-tools');
 
-const localPkgs = fs.readdirSync(packagesRoot);
-const docToolksPkgs = fs.readdirSync(docToolsRoot);
+const packagesDirs = fs.readdirSync(packagesRoot);
+const docToolsDirs = fs.readdirSync(docToolsRoot);
 
-const watchFolders = localPkgs
-  .map((f) => path.join(packagesRoot, f))
-  .concat(docToolksPkgs.map((f) => path.join(docToolsRoot, f)));
+const config = getDefaultConfig(projectRoot);
 
-module.exports = (async () => {
-  const {
-    resolver: { assetExts, sourceExts },
-    transformer,
-    ...other
-  } = await getDefaultConfig(__dirname);
-  return {
-    ...other,
-    watchFolders,
-    transformer: {
-      ...transformer,
-      minifierConfig: {
-        keep_classnames: true,
-        // Need this for source mapping in @doc/pages to work.
-        keep_fnames: true,
-        mangle: {
-          keep_classnames: true,
-          // Need this for source mapping in @doc/pages to work.
-          keep_fnames: true
-        },
-        output: {
-          ascii_only: true,
-          quote_style: 3,
-          wrap_iife: true
-        },
-        sourceMap: {
-          includeSources: false
-        },
-        toplevel: false,
-        compress: {
-          // reduce_funcs inlines single-use functions, which cause perf regressions.
-          reduce_funcs: false
-        }
-      },
-      babelTransformerPath: require.resolve('react-native-svg-transformer')
+config.transformer = {
+  ...config.transformer,
+  minifierConfig: {
+    keep_classnames: true,
+    // Need this for source mapping in @doc/pages to work.
+    keep_fnames: true,
+    mangle: {
+      keep_classnames: true,
+      // Need this for source mapping in @doc/pages to work.
+      keep_fnames: true
     },
-    resolver: {
-      assetExts: assetExts.filter((ext) => ext !== 'svg'),
-      sourceExts: [...sourceExts, 'svg'],
-      extraNodeModules: new Proxy(
-        {},
-        {
-          get: (target, name) => path.join(__dirname, `node_modules/${name}`)
-        }
-      )
+    output: {
+      ascii_only: true,
+      quote_style: 3,
+      wrap_iife: true
+    },
+    sourceMap: {
+      includeSources: false
+    },
+    toplevel: false,
+    compress: {
+      // reduce_funcs inlines single-use functions, which cause perf regressions.
+      reduce_funcs: false
     }
-  };
-})();
+  },
+  babelTransformerPath: require.resolve('react-native-svg-transformer')
+};
+config.resolver = {
+  ...config.resolver,
+  assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
+  sourceExts: [...config.resolver.sourceExts, 'svg'],
+  nodeModulesPaths: [
+    ...config.resolver.nodeModulesPaths,
+    ...packagesDirs.map((d) =>
+      path.resolve(packagesRoot, d, 'node_modules')
+    ),
+    ...docToolsDirs.map((d) =>
+      path.resolve(docToolsRoot, d, 'node_modules')
+    )
+  ]
+};
+
+module.exports = config;