useRenderCount and IpcWebView

Dockerfile

@@ -16,10 +16,14 @@ RUN --mount=type=cache,target=/root/.android/cache \
   "platform-tools" \
   "build-tools;34.0.0" \
   "platforms;android-34" \
+  "build-tools;35.0.0" \
+  "platforms;android-35" \
   "ndk;25.1.8937393" \
   "ndk;26.1.10909125" \
   "ndk;26.3.11579264" \
+  "ndk;28.0.12674087" \
   "cmake;3.22.1" \
+  "cmake;3.31.0" \
   && yes | /opt/android-sdk/cmdline-tools/latest/bin/sdkmanager --licenses
 # "system-images;android-34;google_apis;x86_64" \
 # "emulator" \
@@ -79,7 +83,7 @@ ENV JAVA_OPTS="-Xmx4g -Dorg.gradle.daemon=false -Dorg.gradle.parallel=true -Dorg
 FROM gradle-build-env AS devclient
 COPY --from=prebuild-devclient --chown=ubuntu:ubuntu /home/ubuntu/work/ /home/ubuntu/work/
 RUN --mount=type=cache,id=assembleDebug,target=/home/ubuntu/.gradle,uid=1000,gid=1000 \
-  ./gradlew assembleDebug
+  ./gradlew assembleDebug -Dorg.gradle.jvmargs="-Xmx4g"
 
 # Stage 9: Build Preview APKs (build platform-specific)
 FROM gradle-build-env AS preview-apk
@@ -88,7 +92,7 @@ ENV EXPO_APP_NAME="My App"
 ENV EXPO_APP_BRAND="release"
 COPY --from=prebuild-preview --chown=ubuntu:ubuntu /home/ubuntu/work/ /home/ubuntu/work/
 RUN --mount=type=cache,id=assembleRelease,target=/home/ubuntu/.gradle,uid=1000,gid=1000 \
-  ./gradlew assembleRelease
+  ./gradlew assembleRelease -Dorg.gradle.jvmargs="-Xmx4g"
 
 # EAS build
 FROM prebuild-env AS eas-build-ios-devclient

package.json

@@ -33,10 +33,10 @@
     "jest": "^29.7.0",
     "lint-staged": "^15.2.10",
     "patch-package": "^8.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "prettier-plugin-sh": "^0.14.0",
     "ts-node": "^10.9.2",
-    "turbo": "^2.3.0"
+    "turbo": "^2.3.3"
   },
   "packageManager": "[email protected]",
   "dependencies": {

packages/eslint-config-my/package.json

@@ -16,12 +16,12 @@
     "eslint": "^8.57.1 <9",
     "jest": "*",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "dependencies": {
     "eslint-config-expo": "^8.0.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "^2.3.0",
+    "eslint-config-turbo": "^2.3.3",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-prefer-arrow": "^1.2.3"
   },

packages/eslint-config-my/src/index.ts

@@ -10,6 +10,7 @@ const rules: Linter.RulesRecord = {
     },
   ],
   eqeqeq: ['error'],
+  'react-hooks/exhaustive-deps': ['error'],
   'import/no-unresolved': ['error'],
   'no-restricted-imports': [
     'error',

packages/my-app-appium-test/package.json

@@ -19,7 +19,7 @@
     "eslint-config-my": "*",
     "jest": "^29.7.0",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "react": "*",
@@ -35,6 +35,6 @@
     "dist/"
   ],
   "dependencies": {
-    "webdriverio": "^9.3.0"
+    "webdriverio": "^9.4.1"
   }
 }

packages/my-app/app.json

@@ -1,5 +1,4 @@
 {
-  "$schema": "https://json.schemastore.org/expo-50.0.0.json#",
   "expo": {
     "name": "My App Go",
     "slug": "my-app",

packages/my-app/jest-setup.ts

@@ -1,4 +1,15 @@
 import '@shopify/flash-list/jestSetup';
 import { setProjectAnnotations } from '@storybook/react';
 
+import fs from 'fs';
+import path from 'path';
+
+const animationsDir = path.resolve(__dirname, './src/assets/animations');
+const files = fs.readdirSync(animationsDir);
+files
+  .map((file) => `@/assets/animations/${file}`)
+  .forEach((file) => {
+    jest.mock(file, () => jest.fn());
+  });
+
 setProjectAnnotations([]);

packages/my-app/metro.config.js

@@ -16,9 +16,14 @@ config = withStorybook(config, {
 
 const testRegExps = [/^.*\/[^/]+\.test\.[^/]+$/, /(\\__mocks__\\.*)$/];
 /** @type {RegExp[]} */
-const blockList = Array.isArray(config.resolver.blockList)
-  ? [...config.resolver.blockList, ...testRegExps]
-  : [config.resolver.blockList, ...testRegExps];
+let blockList;
+if (config.resolver?.blockList) {
+  blockList = Array.isArray(config.resolver?.blockList)
+    ? [...config.resolver.blockList, ...testRegExps]
+    : [config.resolver.blockList, ...testRegExps];
+} else {
+  blockList = testRegExps;
+}
 
 module.exports = mergeConfig(config, {
   watchFolders: [monorepoRoot],
@@ -27,7 +32,7 @@ module.exports = mergeConfig(config, {
       path.resolve(__dirname, 'node_modules'),
       path.resolve(monorepoRoot, 'node_modules'),
     ],
-    assetExts: [...(config.resolver.assetExts ?? []), 'lottie', 'fbx'],
+    assetExts: [...(config.resolver?.assetExts ?? []), 'lottie', 'fbx', 'html'],
     blockList,
   },
   transformer: {

packages/my-app/package.json

@@ -26,7 +26,7 @@
     "@expo/vector-icons": "^14.0.4",
     "@gorhom/bottom-sheet": "^5.0.5 <=5.0.5 || >5.0.6",
     "@hookform/resolvers": "^3.9.1",
-    "@notifee/react-native": "^9.1.2",
+    "@notifee/react-native": "^9.1.3",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/netinfo": "11.3.1",
@@ -100,12 +100,12 @@
     "react-native": "0.74.5",
     "react-native-blob-util": "^0.19.11",
     "react-native-file-viewer": "^2.1.5",
-    "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-i18n": "*",
     "react-native-json-tree": "^1.3.0",
     "react-native-logs": "^5.2.2 <5.3.0 || >5.3.0",
     "react-native-maps": "1.14.0",
+    "react-native-ipc-web": "*",
     "react-native-my-components": "*",
     "react-native-my-empty": "*",
     "react-native-my-hooks": "*",
@@ -121,7 +121,7 @@
     "react-native-sticky-parallax-header": "^1.1.1",
     "react-native-svg": "15.2.0",
     "react-native-try-catch": "*",
-    "react-native-unistyles": "^2.12.0",
+    "react-native-unistyles": "^2.20.0",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.8.6",
     "three": "^0.170.0",
@@ -137,7 +137,7 @@
     "@storybook/addon-ondevice-notes": "^8.4.2",
     "@storybook/react": "^8.4.5",
     "@storybook/react-native": "^8.4.2",
-    "@testing-library/react-native": "^12.8.1",
+    "@testing-library/react-native": "^12.9.0",
     "@types/jest": "^29.5.14",
     "@types/react": "~18.2.79",
     "eslint-config-my": "*",

packages/my-app/src/app/(tabs)/index.tsx

@@ -1,6 +1,6 @@
 import { VibrateButton } from '@/components/VibrateButton';
 import { useRouter } from 'expo-router';
-import { FC, useCallback, useReducer } from 'react';
+import { FC, useCallback, useEffect, useReducer } from 'react';
 import {
   Button,
   Image,
@@ -19,6 +19,7 @@ import { useClockState, useNotifications } from 'react-native-my-hooks';
 import { MyText, Strong } from 'react-native-my-text';
 import { sharePushCurlCommandAsync } from '@/notifications';
 import { DevMenu } from 'expo-dev-client';
+import { useShakeDetection } from '@/hooks/ShakeDetection';
 
 const formatter = new Intl.DateTimeFormat('en-US', {
   hour: 'numeric',
@@ -31,13 +32,21 @@ const HomeScreen: FC = () => {
   const router = useRouter();
   const formattedTime = formatter.format(clock);
   const [pressCount, incrementPressCount] = useReducer((i) => i + 1, 0);
+  const { addListener: addShakeListener } = useShakeDetection();
 
   const { expoPushToken, permissionStatus } = useNotifications();
 
   const onShareCurlCommand = useCallback(() => {
     (async () => sharePushCurlCommandAsync(expoPushToken!))();
   }, [expoPushToken]);
-
+  useEffect(() => {
+    const shakeSubscription = addShakeListener(() => {
+      incrementPressCount();
+    });
+    return () => {
+      shakeSubscription.remove();
+    };
+  }, [addShakeListener]);
   return (
     <ParallaxScrollView
       headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}

packages/my-app/src/app/_layout.tsx

@@ -5,7 +5,7 @@ import {
 } from '@react-navigation/native';
 
 import { SplashScreen, Stack, useRouter } from 'expo-router';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { WithMyBackgroundFetch } from '@/hooks/MyBackgroundFetch';
 import { BACKGROUND_FETCH_TASK, BACKGROUND_NOTIFICATION_TASK } from '@/tasks';
@@ -15,24 +15,43 @@ import { WithNotifications } from 'react-native-my-hooks';
 
 import 'react-native-reanimated';
 import { registerDevMenuItemsAsync } from '@/devmenu';
+import { useShakeDetection, WithShakeDetection } from '@/hooks/ShakeDetection';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export const RootLayout: FC = () => {
+  const [loaded, setLoaded] = useState(false);
   const colorScheme = useColorScheme();
   const router = useRouter();
-  // useLoadGuard
+  const { addListener: addShakeListener } = useShakeDetection();
+
   useEffect(() => {
+    const shakeSubscription = addShakeListener(() => {
+      if (!__DEV__) {
+        router.navigate('/_sitemap');
+      }
+    });
     (async () => {
       // before hiding the splashscreen the fonts and assets for the loader screen should be loaded
       await registerDevMenuItemsAsync({ router });
-      await SplashScreen.hideAsync();
+      setLoaded(true);
       // this may be moved to load guard.
     })();
-  }, [router]);
+    return () => {
+      shakeSubscription.remove();
+    };
+  }, [router, addShakeListener]);
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
 
-  // if (!loaded), but I want it already on the stack right?
+  if (!loaded) {
+    return null;
+  }
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
@@ -51,11 +70,12 @@ export type MyAppUserPreferences = {
   count: number;
 };
 // with load guard?
-const CompositeApp = WithMyBackgroundFetch(
-  WithUserPreferences(WithNotifications(RootLayout)),
+const CompositeApp = WithShakeDetection(
+  WithMyBackgroundFetch(WithUserPreferences(WithNotifications(RootLayout))),
 );
 const MyApp = () => (
   <CompositeApp
+    shakeDetectionDisabled={__DEV__}
     backgroundFetchTaskName={BACKGROUND_FETCH_TASK}
     notificationTaskName={BACKGROUND_NOTIFICATION_TASK}
     stopOnTerminate={false}

packages/my-app/src/app/secure/my-resume-pipeline.tsx

@@ -0,0 +1,103 @@
+import { PdfPipelineView } from 'react-native-pdf-view';
+import { FC, useCallback, useState } from 'react';
+import { Button, ScrollView, StyleSheet, View } from 'react-native';
+import samples from '@/data/samplePdfUrls.json';
+import {
+  usePdfPipeline,
+  WithPdfView,
+} from 'react-native-pdf-view/src/PdfPipeline';
+import * as Crypto from 'expo-crypto';
+import { Asset } from 'expo-asset';
+import { useRouter } from 'expo-router';
+import { useViewDimensions } from 'react-native-my-hooks';
+import PagerView from 'react-native-pager-view';
+import { MyText } from 'react-native-my-text';
+
+const ResumeScreen: FC = () => {
+  const [uri, setUri] = useState(samples[0]);
+  const [loadedUri, setLoadedUri] = useState('loading');
+  const [loading, setLoading] = useState(true);
+  const [pageCount, setPageCount] = useState(1);
+  const { dimensions, setHeight, setWidth } = useViewDimensions();
+  const flip = useCallback(() => {
+    const randomUri = samples[Crypto.getRandomBytes(1)[0] % samples.length];
+    setUri(randomUri);
+    setPageCount(1);
+    setLoading(true);
+  }, []);
+  const { postPdfRequest } = usePdfPipeline();
+  const post = useCallback(async () => {
+    let randomUri = samples[Crypto.getRandomBytes(1)[0] % samples.length];
+    while (loadedUri === randomUri) {
+      randomUri = samples[Crypto.getRandomBytes(1)[0] % samples.length];
+    }
+    const localUri = (await Asset.fromURI(randomUri).downloadAsync()).localUri!;
+    postPdfRequest('a', localUri);
+  }, [loadedUri, postPdfRequest]);
+  const router = useRouter();
+  console.debug({ uri, pageCount, dimensions });
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <PagerView
+        style={{ backgroundColor: 'yellow', ...dimensions }}
+        scrollEnabled={true}
+      >
+        {Array.from({ length: pageCount }, (_ignore, index) => index + 1).map(
+          (pageNumber) => (
+            <View
+              key={`${pageNumber}`}
+              style={{
+                backgroundColor: 'purple',
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <View style={{ alignSelf: 'center' }}>
+                <MyText>{pageNumber}</MyText>
+              </View>
+              <PdfPipelineView
+                style={[styles.pdf, dimensions]}
+                uri={uri}
+                pageNumber={pageNumber}
+                onPageCountKnown={(e) => {
+                  if (pageNumber === 1) {
+                    setPageCount(e.pageCount);
+                  }
+                }}
+                onViewPortKnown={(e) => {
+                  if (pageNumber === 1) {
+                    setWidth(e.width);
+                    setHeight(e.height);
+                  }
+                }}
+                onError={(e) => {
+                  console.error(e);
+                }}
+                onLoad={() => {
+                  setLoadedUri(uri);
+                  setLoading(false);
+                }}
+              />
+            </View>
+          ),
+        )}
+      </PagerView>
+      <Button title={loadedUri} onPress={flip} disabled={loading} />
+      <Button title={uri} onPress={post} />
+      <Button
+        title="reload"
+        onPress={() => {
+          router.replace('/secure/my-resume-pipeline');
+        }}
+      />
+    </ScrollView>
+  );
+};
+const CompositeScreen = WithPdfView(ResumeScreen);
+export default CompositeScreen;
+
+const styles = StyleSheet.create({
+  container: {},
+  pager: { flex: 1 },
+  pdf: { backgroundColor: 'red' },
+});