feat: Upgrade all versions

.eslintrc.js

@@ -2,13 +2,26 @@ module.exports = {
   root: true,
   extends: ['@react-native-community', 'plugin:compat/recommended'],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc'],
+  plugins: ['eslint-plugin-tsdoc'],
   rules: {
     'comma-dangle': ['error', 'never'],
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      { vars: 'all', args: 'after-used', ignoreRestSiblings: true }
-    ],
     'no-eval': 'off'
-  }
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            vars: 'all',
+            args: 'after-used',
+            ignoreRestSiblings: true,
+            varsIgnorePattern: '^_',
+            argsIgnorePattern: '^_'
+          }
+        ]
+      }
+    }
+  ]
 };

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -36,4 +36,4 @@ jobs:
     - uses: codecov/codecov-action@v1
       with:
         file: packages/webshell/coverage/clover.xml
-        fail_ci_if_error: true
+        fail_ci_if_error: false

.gitignore

@@ -78,3 +78,6 @@ buck-out/
 
 # Todos
 *.todo
+
+# Claude
+.claude

.husky/commit-msg

@@ -0,0 +1,2 @@
+#\!/bin/sh
+commitlint --edit "$1"

.yarnrc.yml

@@ -2,8 +2,4 @@ enableGlobalCache: true
 
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-2.3.2.cjs
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

apps/example/metro.config.js

@@ -1,25 +1,23 @@
 const path = require('path');
 const fs = require('fs');
-const { getDefaultConfig } = require('metro-config');
+const { getDefaultConfig } = require('expo/metro-config');
 
 const packagesRoot = path.resolve(__dirname, '../../packages');
 
 const localPkgs = fs.readdirSync(packagesRoot);
 
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts }
-  } = await getDefaultConfig();
-  return {
-    watchFolders: localPkgs.map((f) => path.join(packagesRoot, f)),
-    resolver: {
-      sourceExts: [...sourceExts, 'webjs', 'html'],
-      extraNodeModules: new Proxy(
-        {},
-        {
-          get: (target, name) => path.join(__dirname, `node_modules/${name}`)
-        }
-      )
-    }
-  };
-})();
+const config = getDefaultConfig(__dirname);
+
+config.watchFolders = [
+  ...(config.watchFolders || []),
+  ...localPkgs.map((f) => path.join(packagesRoot, f))
+];
+config.resolver.sourceExts = [...config.resolver.sourceExts, 'webjs', 'html'];
+config.resolver.extraNodeModules = new Proxy(
+  {},
+  {
+    get: (target, name) => path.join(__dirname, `node_modules/${name}`)
+  }
+);
+
+module.exports = config;

apps/example/package.json

@@ -8,37 +8,37 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "start": "expo start",
-    "test": "jest"
+    "start": "expo start"
   },
   "dependencies": {
     "@formidable-webview/webshell": "workspace:*",
-    "@react-native-community/masked-view": "0.1.10",
-    "@react-native-community/picker": "1.6.6",
-    "@react-navigation/native": "^5.7.4",
-    "@react-navigation/stack": "^5.9.1",
-    "@rnhooks/device-orientation": "^0.0.1",
-    "expo": "^39.0.3",
-    "expo-splash-screen": "~0.6.1",
-    "expo-status-bar": "~1.0.2",
-    "expo-web-browser": "~8.5.0",
-    "react": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",
-    "react-native-gesture-handler": "~1.7.0",
-    "react-native-paper": "^4.2.0",
-    "react-native-picker-select": "^8.0.0",
-    "react-native-reanimated": "~1.13.0",
-    "react-native-safe-area-context": "3.1.4",
-    "react-native-screens": "~2.10.1",
-    "react-native-vector-icons": "^7.1.0",
-    "react-native-webview": "10.7.0"
+    "@react-native-masked-view/masked-view": "0.3.2",
+    "@react-native-picker/picker": "^2.11.4",
+    "@react-navigation/native": "^7.2.0",
+    "@react-navigation/stack": "^7.8.7",
+    "@rnhooks/device-orientation": "^0.0.2",
+    "expo": "^55.0.8",
+    "expo-splash-screen": "^55.0.12",
+    "expo-status-bar": "^55.0.4",
+    "expo-web-browser": "^55.0.10",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-paper": "^5.15.0",
+    "react-native-picker-select": "^9.3.1",
+    "react-native-reanimated": "4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "react-native-vector-icons": "^10.3.0",
+    "react-native-webview": "13.16.0",
+    "react-native-worklets": "0.7.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
+    "@babel/core": "^7.29.0",
+    "@babel/runtime": "^7.29.2",
     "babel-plugin-inline-import": "^3.0.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "8.3.0"
+    "babel-plugin-module-resolver": "^5.0.3",
+    "babel-preset-expo": "55.0.12"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

apps/example/src/App.tsx

@@ -30,15 +30,13 @@ export default function App() {
               <Stack.Screen
                 options={{
                   headerShown: false,
-                  safeAreaInsets: StyleSheet.absoluteFillObject
                 }}
                 name="Home"
                 component={HomeScreen}
               />
               <Stack.Screen
                 options={{
                   headerShown: true,
-                  safeAreaInsets: { top: 0, bottom: 0 }
                 }}
                 name="Options"
                 component={OptionsScreen}

apps/example/src/AppControls.tsx

@@ -4,14 +4,14 @@ import { Appbar, useTheme } from 'react-native-paper';
 import { APPBAR_HEIGHT } from './styles';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useStore } from './Provider';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, type NavigationProp, type ParamListBase } from '@react-navigation/native';
 
 interface Props {
-  scrollViewRef: RefObject<ScrollView>;
+  scrollViewRef: RefObject<ScrollView | null>;
 }
 
 const AppControls = memo(function AppControls({ scrollViewRef }: Props) {
-  const navigation = useNavigation();
+  const navigation = useNavigation<NavigationProp<ParamListBase>>();
   const {
     showConsole,
     showEvidence,
@@ -22,7 +22,7 @@ const AppControls = memo(function AppControls({ scrollViewRef }: Props) {
     forceRerender
   } = useStore();
   const {
-    colors: { accent }
+    colors: { secondary }
   } = useTheme();
   const { left, right } = useSafeAreaInsets();
   const goToOptions = useCallback(() => navigation.navigate('Options'), [
@@ -52,24 +52,24 @@ const AppControls = memo(function AppControls({ scrollViewRef }: Props) {
         <Appbar.Action size={20} icon="chevron-down" onPress={scrollToEnd} />
         <Appbar.Content title="" />
         <Appbar.Action
-          color={showConsole ? accent : undefined}
+          color={showConsole ? secondary : undefined}
           size={20}
           icon="console-line"
           onPress={toggleConsole}
         />
         <Appbar.Action
-          color={showEvidence ? accent : undefined}
+          color={showEvidence ? secondary : undefined}
           size={20}
           icon="foot-print"
           onPress={toggleEvidence}
         />
         <Appbar.Action
-          color={paddingHz ? accent : undefined}
+          color={paddingHz ? secondary : undefined}
           size={20}
           icon="arrow-left-right"
           onPress={togglePadding}
         />
-        <Appbar.Action size={20} icon={'settings'} onPress={goToOptions} />
+        <Appbar.Action size={20} icon={'cog'} onPress={goToOptions} />
       </Appbar>
     </View>
   );

apps/example/src/Evidence.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { Card, Paragraph, Avatar } from 'react-native-paper';
+import { Card, Text, Avatar } from 'react-native-paper';
 import { TOP_TEXT_HEIGHT } from './styles';
 
 const LeftContent = (props) => <Avatar.Icon {...props} icon="foot-print" />;
@@ -12,10 +12,10 @@ export const Evidence = ({
   <Card style={styles.card}>
     <Card.Title title="Evidence" left={LeftContent} />
     <Card.Content>
-      <Paragraph>
+      <Text variant="bodyMedium">
         This is a React Native element acting as evidence that the{' '}
         {webshellPosition} WebView height is automatic.
-      </Paragraph>
+      </Text>
     </Card.Content>
   </Card>
 );

apps/example/src/HomeScreen.tsx

@@ -26,8 +26,7 @@ const sourceMap: Record<string, WebViewSource> = {
   welcome: { html: introduction },
   wikipedia: { uri: 'https://en.wikipedia.org/wiki/React_Native' },
   firefox: {
-    uri:
-      'https://support.mozilla.org/en-US/kb/get-started-firefox-overview-main-features'
+    uri: 'https://support.mozilla.org/en-US/kb/get-started-firefox-overview-main-features'
   },
   expo: { uri: 'https://docs.expo.io/' },
   washington: { uri: 'https://www.washingtonpost.com/' },

apps/example/src/OptionsScreen.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unstable-nested-components */
 import { default as React, useMemo } from 'react';
 import { StyleSheet, View, useWindowDimensions } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -54,8 +55,10 @@ export const OptionsScreen = () => {
     [theme.colors]
   );
   return (
-    <ScrollView style={{ flexGrow: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-      <Surface style={{ flexGrow: 1 }}>
+    <ScrollView
+      style={styles.scrollViewStyle}
+      contentContainerStyle={styles.scrollViewContainerStyle}>
+      <Surface style={styles.wrapperStyle}>
         <View style={styles.bottomSheet}>
           <View style={{ width: Math.min(500, windowDimensions.width) }}>
             <List.Section title="Page">
@@ -175,5 +178,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     padding: 5
-  }
+  },
+  wrapperStyle: { flexGrow: 1 },
+  scrollViewStyle: { flexGrow: 1 },
+  scrollViewContainerStyle: { flexGrow: 1 }
 });

apps/example/src/Root.tsx

@@ -10,7 +10,7 @@ const theme: typeof DefaultTheme = {
   ...DefaultTheme,
   colors: {
     ...DefaultTheme.colors,
-    accent: '#0f9ec5',
+    secondary: '#0f9ec5',
     primary: '#2f3745'
   }
 };

apps/example/src/Stats.tsx

@@ -7,7 +7,10 @@ import {
   View
 } from 'react-native';
 import { BACKGROUND, STAT_HEIGHT } from './styles';
-import { WebViewSource } from 'react-native-webview/lib/WebViewTypes';
+import {
+  WebViewSource,
+  WebViewSourceUri
+} from 'react-native-webview/lib/WebViewTypes';
 import {
   HTMLDimensionsImplementation,
   DOMRectSize
@@ -31,10 +34,10 @@ function getResizeName(
   return resizeImplementation === 'mutation'
     ? 'MutationObserver'
     : resizeImplementation === 'polling'
-    ? 'Polling (200ms)'
-    : resizeImplementation === 'resize'
-    ? 'ResizeObserver'
-    : 'undetermined';
+      ? 'Polling (200ms)'
+      : resizeImplementation === 'resize'
+        ? 'ResizeObserver'
+        : 'undetermined';
 }
 
 export const Stats = memo(
@@ -48,21 +51,19 @@ export const Stats = memo(
   }: StatsProps) => {
     const { colors } = useTheme();
     const textStyle = [styles.text, { color: '#aaaaaa' }];
-    const entryStyle = [styles.entryName, { color: colors.accent }];
+    const entryStyle = [styles.entryName, { color: colors.secondary }];
     const { left, right } = useSafeAreaInsets();
     return display ? (
       <Surface
         style={[
           styles.stats,
           { paddingLeft: left + 10, paddingRight: right + 10 }
         ]}>
-        <ScrollView
-          horizontal
-          contentContainerStyle={{ flexDirection: 'column' }}>
+        <ScrollView horizontal contentContainerStyle={styles.scrollViewStyles}>
           <Text selectable style={textStyle}>
-            {source['uri'] || 'about:blank'}
+            {(source as WebViewSourceUri).uri || 'about:blank'}
           </Text>
-          <View style={{ flexDirection: 'row' }}>
+          <View style={styles.contentWrapper}>
             <View>
               <Text selectable={false} style={textStyle}>
                 <Text style={entryStyle}>content</Text>
@@ -82,7 +83,7 @@ export const Stats = memo(
                 H: {layout == null ? 'unset' : Math.round(layout.height)}
               </Text>
             </View>
-            <View style={{ marginLeft: 20 }}>
+            <View style={styles.footer}>
               <Text selectable={false} style={textStyle}>
                 <Text style={entryStyle}>impl. </Text>
                 {getResizeName(resizeImplementation)}
@@ -115,5 +116,8 @@ const styles = StyleSheet.create({
   },
   entryName: {
     fontWeight: 'bold'
-  }
+  },
+  scrollViewStyles: { flexDirection: 'column' },
+  contentWrapper: { flexDirection: 'row' },
+  footer: { marginLeft: 20 }
 });