@wavemaker/rn-codegen 11.7.0-next.139431 → 11.7.0-next.139432

rn-codegen/src/templates/package.web.json

@@ -9,67 +9,68 @@
         "postinstall": "echo \"\""
     },
     "dependencies": {
-        "@unimodules/react-native-adapter": "6.3.9",
-        "@wavemaker/app-rn-runtime": "11.7.0-next.139431",
-        "@wavemaker/variables": "11.7.0-next.139431",
-        "@wavemaker/rn-codegen": "11.7.0-next.139431",
-        "axios": "^1.4.0",
-        "css-mediaquery": "^0.1.2",
-        "deprecated-react-native-prop-types": "~4.1.0",
-        "expo": "49.0.7",
-        "@expo/vector-icons": "13.0.0",
-        "expo-font": "11.4.0",
-        "expo-file-system": "15.4.3",
-        "expo-camera": "13.4.2",
-        "expo-av": "13.4.1",
-        "expo-barcode-scanner": "12.5.3",
-        "expo-web-browser": "12.3.2",
-        "expo-device": "5.4.0",
-        "expo-network": "5.4.0",
-        "expo-location": "16.1.0",
-        "expo-localization": "14.3.0",
-        "expo-contacts": "12.2.0",
-        "expo-calendar": "11.3.0",
-        "expo-splash-screen": "0.20.5",
-        "expo-document-picker": "11.5.4",
-        "expo-constants": "14.4.2",
+        "@wavemaker/app-rn-runtime": "11.7.0-next.139432",
+        "@wavemaker/variables": "11.7.0-next.139432",
+        "@wavemaker/rn-codegen": "11.7.0-next.139432",
+        "deprecated-react-native-prop-types": "4.1.0",
+        "expo": "50.0.17",
+        "expo-build-properties": "0.12.0",
+        "@expo/vector-icons": "14.0.0",
+        "@expo/metro-runtime": "3.1.3",
+        "expo-font": "11.10.3",
+        "expo-file-system": "16.0.9",
+        "expo-camera": "14.1.3",
+        "expo-av": "13.10.6",
+        "expo-barcode-scanner": "12.9.3",
+        "expo-web-browser": "12.8.2",
+        "expo-device": "5.9.4",
+        "expo-network": "5.8.0",
+        "expo-location": "16.5.5",
+        "expo-localization": "14.8.4",
+        "expo-contacts": "12.8.2",
+        "expo-calendar": "12.2.1",
+        "expo-splash-screen": "0.26.5",
+        "expo-document-picker": "11.10.1",
+        "expo-constants": "15.4.6",
+        "expo-modules-core": "1.11.13",
         "@react-native/assets": "1.0.0",
         "hermes-engine": "0.11.0",
-        "imask": "^7.5.0",
+        "imask": "7.6.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-native": "0.72.4",
-        "react-native-web": "0.18.12",
-        "@react-native-async-storage/async-storage": "1.18.2",
-        "@react-native-community/netinfo": "9.3.10",
-        "react-native-gesture-handler": "2.12.1",
-        "react-native-reanimated": "^1.13.2",
+        "react-native": "0.73.6",
+        "react-native-web": "0.19.6",
+        "@react-native/assets-registry": "0.74.83",
+        "@react-native-async-storage/async-storage": "1.21.0",
+        "@react-native-community/netinfo": "11.1.0",
+        "react-native-gesture-handler": "2.14.0",
+        "react-native-reanimated": "3.6.2",
         "react-native-bundle-splitter": "2.2.3",
-        "react-native-safe-area-context": "4.6.3",
-        "@react-native-community/datetimepicker": "7.2.0",
-        "@react-native-community/slider": "4.4.2",
-        "react-native-circular-progress": "1.3.9",
-        "@react-native-masked-view/masked-view": "0.2.9",
+        "react-native-safe-area-context": "4.8.2",
+        "@react-native-community/datetimepicker": "7.6.3",
+        "@react-native-community/slider": "4.5.2",
+        "react-native-circular-progress": "1.4.0",
+        "@react-native-masked-view/masked-view": "0.3.0",
         "react-native-snap-carousel": "3.9.1",
         "react-native-svg": "13.4.0",
-        "react-native-ssl-public-key-pinning": "1.1.1",
+        "react-native-ssl-public-key-pinning": "1.2.3",
         "@wavemaker/react-native-ssl-publickey": "1.0.2",
         "victory-native": "36.6.11",
         "@react-navigation/native": "6.1.7",
-        "react-native-pager-view": "6.2.0",
-        "react-native-webview": "13.2.2",
-        "react-native-vector-icons": "10.0.0",
+        "react-native-pager-view": "6.2.3",
+        "react-native-webview": "13.6.4",
+        "react-native-vector-icons": "10.0.3",
         "@react-navigation/drawer": "6.6.3",
-        "react-native-screens": "3.22.0",
-        "react-native-svg-transformer": "1.0.0",
-        "lottie-react-native": "5.1.6",
-        "react-lottie-player": "1.5.4",
-        "expo-linear-gradient": "12.3.0",
+        "react-native-screens": "3.29.0",
+        "react-native-svg-transformer": "1.3.0",
+        "lottie-react-native": "6.5.1",
+        "react-lottie-player": "2.0.0",
+        "expo-linear-gradient": "12.7.2",
         "setimmediate": "1.0.5",
         "react-native-restart": "0.0.27",
-        "@expo/webpack-config": "18.0.1",
+        "@expo/webpack-config": "19.0.1",
         "@babel/core": "7.20.2",
-        "@babel/standalone": "^7.23.10",
+        "@babel/standalone": "7.23.10",
         "@babel/plugin-syntax-jsx": "7.21.4",
         "victory": "^36.5.3"
     },
@@ -80,16 +81,12 @@
         "esbuild": "0.15.15",
         "esbuild-plugin-resolve": "1.0.3",
         "fs-extra": "10.0.0",
-        "expo-modules-autolinking": "1.5.0",
+        "@babel/plugin-proposal-export-namespace-from": "7.18.9",
         "babel-plugin-transform-remove-console": "6.9.4",
         "@babel/plugin-proposal-optional-chaining": "7.21.0",
         "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-        "@types/babel__standalone": "^7.1.7",
+        "@types/babel__standalone": "7.1.7",
         "@expo/metro-config": "^0.7.1"
     },
-    "resolutions": {
-        "react-error-overlay": "6.0.9",
-        "react-native-reanimated": "3.4.1"
-    },
     "private": true
 }

rn-codegen/src/templates/project/app.json

@@ -34,6 +34,16 @@
     "web": {
       "bundler": "metro",
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "useLegacyPackaging": true
+          }
+        }
+      ]
+    ]
   }
 }

rn-codegen/src/templates/project/esbuild/@react-navigation/drawer/6.6.3/lib/module/views/modern/Drawer.js

@@ -0,0 +1,303 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { I18nManager, InteractionManager, Keyboard, Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { PanGestureHandler, State as GestureState } from 'react-native-gesture-handler';
+import Animated, { interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
+import DrawerProgressContext from '../../utils/DrawerProgressContext';
+import Overlay from './Overlay';
+const SWIPE_DISTANCE_MINIMUM = 5;
+const DEFAULT_DRAWER_WIDTH = '80%';
+const minmax = (value, start, end) => {
+  'worklet';
+
+  return Math.min(Math.max(value, start), end);
+};
+export default function Drawer(_ref) {
+  let {
+    dimensions,
+    drawerPosition,
+    drawerStyle,
+    drawerType,
+    gestureHandlerProps,
+    hideStatusBarOnOpen,
+    keyboardDismissMode,
+    onClose,
+    onOpen,
+    open,
+    overlayStyle,
+    renderDrawerContent,
+    renderSceneContent,
+    statusBarAnimation,
+    swipeDistanceThreshold,
+    swipeEdgeWidth,
+    swipeEnabled,
+    swipeVelocityThreshold,
+    overlayAccessibilityLabel
+  } = _ref;
+  const getDrawerWidth = () => {
+    const {
+      width = DEFAULT_DRAWER_WIDTH
+    } = StyleSheet.flatten(drawerStyle) || {};
+    if (typeof width === 'string' && width.endsWith('%')) {
+      // Try to calculate width if a percentage is given
+      const percentage = Number(width.replace(/%$/, ''));
+      if (Number.isFinite(percentage)) {
+        return dimensions.width * (percentage / 100);
+      }
+    }
+    return typeof width === 'number' ? width : 0;
+  };
+  const drawerWidth = getDrawerWidth();
+  const isOpen = drawerType === 'permanent' ? true : open;
+  const isRight = drawerPosition === 'right';
+  const getDrawerTranslationX = React.useCallback(open => {
+    'worklet';
+
+    if (drawerPosition === 'left') {
+      return open ? 0 : -drawerWidth;
+    }
+    return open ? 0 : drawerWidth;
+  }, [drawerPosition, drawerWidth]);
+  const hideStatusBar = React.useCallback(hide => {
+    if (hideStatusBarOnOpen) {
+      StatusBar.setHidden(hide, statusBarAnimation);
+    }
+  }, [hideStatusBarOnOpen, statusBarAnimation]);
+  React.useEffect(() => {
+    hideStatusBar(isOpen);
+    return () => hideStatusBar(false);
+  }, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);
+  const interactionHandleRef = React.useRef(null);
+  const startInteraction = () => {
+    interactionHandleRef.current = InteractionManager.createInteractionHandle();
+  };
+  const endInteraction = () => {
+    if (interactionHandleRef.current != null) {
+      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+      interactionHandleRef.current = null;
+    }
+  };
+  const hideKeyboard = () => {
+    if (keyboardDismissMode === 'on-drag') {
+      Keyboard.dismiss();
+    }
+  };
+  const onGestureStart = () => {
+    startInteraction();
+    hideKeyboard();
+    hideStatusBar(true);
+  };
+  const onGestureFinish = () => {
+    endInteraction();
+  };
+
+  // FIXME: Currently hitSlop is broken when on Android when drawer is on right
+  // https://github.com/software-mansion/react-native-gesture-handler/issues/569
+  const hitSlop = isRight ?
+  // Extend hitSlop to the side of the screen when drawer is closed
+  // This lets the user drag the drawer from the side of the screen
+  {
+    right: 0,
+    width: isOpen ? undefined : swipeEdgeWidth
+  } : {
+    left: 0,
+    width: isOpen ? undefined : swipeEdgeWidth
+  };
+  const touchStartX = useSharedValue(0);
+  const touchX = useSharedValue(0);
+  const translationX = useSharedValue(getDrawerTranslationX(open));
+  const gestureState = useSharedValue(GestureState.UNDETERMINED);
+  const toggleDrawer = React.useCallback(_ref2 => {
+    'worklet';
+
+    let {
+      open,
+      isUserInitiated,
+      velocity
+    } = _ref2;
+    const translateX = getDrawerTranslationX(open);
+    touchStartX.value = 0;
+    touchX.value = 0;
+    translationX.value = withSpring(translateX, {
+      velocity,
+      stiffness: 1000,
+      damping: 500,
+      mass: 3,
+      overshootClamping: true,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 0.01
+    });
+    if (!isUserInitiated) {
+      return;
+    }
+    if (open) {
+      runOnJS(onOpen)();
+    } else {
+      runOnJS(onClose)();
+    }
+  }, [getDrawerTranslationX, onClose, onOpen, touchStartX, touchX, translationX]);
+  React.useEffect(() => toggleDrawer({
+    open,
+    isUserInitiated: false
+  }), [open, toggleDrawer]);
+  const onGestureEvent = useAnimatedGestureHandler({
+    onStart: (event, ctx) => {
+      ctx.hasCalledOnStart = false;
+      ctx.startX = translationX.value;
+      gestureState.value = event.state;
+      touchStartX.value = event.x;
+    },
+    onActive: (event, ctx) => {
+      touchX.value = event.x;
+      translationX.value = ctx.startX + event.translationX;
+      gestureState.value = event.state;
+
+      // onStart will _always_ be called, even when the activation
+      // criteria isn't met yet. This makes sure onGestureStart is only
+      // called when the criteria is really met.
+      if (!ctx.hasCalledOnStart) {
+        ctx.hasCalledOnStart = true;
+        runOnJS(onGestureStart)();
+      }
+    },
+    onEnd: event => {
+      gestureState.value = event.state;
+      const nextOpen = Math.abs(event.translationX) > SWIPE_DISTANCE_MINIMUM && Math.abs(event.translationX) > swipeVelocityThreshold || Math.abs(event.translationX) > swipeDistanceThreshold ? drawerPosition === 'left' ?
+      // If swiped to right, open the drawer, otherwise close it
+      (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
+      // If swiped to left, open the drawer, otherwise close it
+      (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
+      toggleDrawer({
+        open: nextOpen,
+        isUserInitiated: true,
+        velocity: event.velocityX
+      });
+    },
+    onFinish: () => {
+      runOnJS(onGestureFinish)();
+    }
+  });
+  const translateX = useDerivedValue(() => {
+    // Comment stolen from react-native-gesture-handler/DrawerLayout
+    //
+    // While closing the drawer when user starts gesture outside of its area (in greyed
+    // out part of the window), we want the drawer to follow only once finger reaches the
+    // edge of the drawer.
+    // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by
+    // dots. The touch gesture starts at '*' and moves left, touch path is indicated by
+    // an arrow pointing left
+    // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|......|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    +---------------+    +---------------+    +---------------+    +---------------+
+    //
+    // For the above to work properly we define animated value that will keep start position
+    // of the gesture. Then we use that value to calculate how much we need to subtract from
+    // the translationX. If the gesture started on the greyed out area we take the distance from the
+    // edge of the drawer to the start position. Otherwise we don't subtract at all and the
+    // drawer be pulled back as soon as you start the pan.
+    //
+    // This is used only when drawerType is "front"
+    const touchDistance = drawerType === 'front' && gestureState.value === GestureState.ACTIVE ? minmax(drawerPosition === 'left' ? touchStartX.value - drawerWidth : dimensions.width - drawerWidth - touchStartX.value, 0, dimensions.width) : 0;
+    const translateX = drawerPosition === 'left' ? minmax(translationX.value + touchDistance, -drawerWidth, 0) : minmax(translationX.value - touchDistance, 0, drawerWidth);
+    return translateX;
+  }, [
+    drawerType,
+    gestureState,
+    minmax,
+    drawerPosition,
+    touchStartX,
+    drawerWidth,
+    translationX,
+  ]);
+  const isRTL = I18nManager.getConstants().isRTL;
+  const drawerAnimatedStyle = useAnimatedStyle(() => {
+    const distanceFromEdge = dimensions.width - drawerWidth;
+    return {
+      transform: drawerType === 'permanent' ?
+      // Reanimated needs the property to be present, but it results in Browser bug
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+      [] : [{
+        translateX:
+        // The drawer stays in place when `drawerType` is `back`
+        (drawerType === 'back' ? 0 : translateX.value) + (drawerPosition === 'left' ? isRTL ? -distanceFromEdge : 0 : isRTL ? 0 : distanceFromEdge)
+      }]
+    };
+  }, [ drawerWidth, drawerType, translateX, drawerPosition, isRTL]);
+  const contentAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: drawerType === 'permanent' ?
+      // Reanimated needs the property to be present, but it results in Browser bug
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+      [] : [{
+        translateX:
+        // The screen content stays in place when `drawerType` is `front`
+        drawerType === 'front' ? 0 : translateX.value + drawerWidth * (drawerPosition === 'left' ? 1 : -1)
+      }]
+    };
+  }, [drawerType, translateX, drawerWidth, drawerPosition]);
+  const progress = useDerivedValue(() => {
+    return drawerType === 'permanent' ? 1 : interpolate(translateX.value, [getDrawerTranslationX(false), getDrawerTranslationX(true)], [0, 1]);
+  }, [drawerType, interpolate, translateX, getDrawerTranslationX]);
+  return /*#__PURE__*/React.createElement(DrawerProgressContext.Provider, {
+    value: progress
+  }, /*#__PURE__*/React.createElement(PanGestureHandler, _extends({
+    activeOffsetX: [-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM],
+    failOffsetY: [-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM],
+    hitSlop: hitSlop,
+    enabled: drawerType !== 'permanent' && swipeEnabled,
+    onGestureEvent: onGestureEvent
+  }, gestureHandlerProps), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.main, {
+      flexDirection: drawerType === 'permanent' && !isRight ? 'row-reverse' : 'row'
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.content, contentAnimatedStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
+    importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
+    style: styles.content
+  }, renderSceneContent()), drawerType !== 'permanent' ? /*#__PURE__*/React.createElement(Overlay, {
+    progress: progress,
+    onPress: () => toggleDrawer({
+      open: false,
+      isUserInitiated: true
+    }),
+    style: overlayStyle,
+    accessibilityLabel: overlayAccessibilityLabel
+  }) : null), /*#__PURE__*/React.createElement(Animated.View, {
+    removeClippedSubviews: Platform.OS !== 'ios',
+    style: [styles.container, {
+      position: drawerType === 'permanent' ? 'relative' : 'absolute',
+      zIndex: drawerType === 'back' ? -1 : 0
+    }, drawerAnimatedStyle, drawerStyle]
+  }, renderDrawerContent()))));
+}
+const styles = StyleSheet.create({
+  container: {
+    top: 0,
+    bottom: 0,
+    maxWidth: '100%',
+    width: DEFAULT_DRAWER_WIDTH
+  },
+  content: {
+    flex: 1
+  },
+  main: {
+    flex: 1,
+    ...Platform.select({
+      // FIXME: We need to hide `overflowX` on Web so the translated content doesn't show offscreen.
+      // But adding `overflowX: 'hidden'` prevents content from collapsing the URL bar.
+      web: null,
+      default: {
+        overflow: 'hidden'
+      }
+    })
+  }
+});
+//# sourceMappingURL=Drawer.js.map

rn-codegen/src/templates/project/esbuild/@react-navigation/drawer/6.6.3/lib/module/views/modern/Overlay.js

@@ -0,0 +1,60 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { Platform, Pressable, StyleSheet } from 'react-native';
+import Animated, { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
+const PROGRESS_EPSILON = 0.05;
+const Overlay = /*#__PURE__*/React.forwardRef(function Overlay(_ref, ref) {
+  let {
+    progress,
+    onPress,
+    style,
+    accessibilityLabel = 'Close drawer',
+    ...props
+  } = _ref;
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: progress.value,
+      // We don't want the user to be able to press through the overlay when drawer is open
+      // We can send the overlay behind the screen to avoid it
+      zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1
+    };
+  }, [progress, PROGRESS_EPSILON]);
+  const animatedProps = useAnimatedProps(() => {
+    const active = progress.value > PROGRESS_EPSILON;
+    return {
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants'
+    };
+  }, [progress, PROGRESS_EPSILON]);
+  return /*#__PURE__*/React.createElement(Animated.View, _extends({}, props, {
+    ref: ref,
+    style: [styles.overlay, overlayStyle, animatedStyle, style],
+    animatedProps: animatedProps
+  }), /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    style: styles.pressable,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel
+  }));
+});
+const overlayStyle = Platform.select({
+  web: {
+    // Disable touch highlight on mobile Safari.
+    // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.
+    WebkitTapHighlightColor: 'transparent'
+  },
+  default: {}
+});
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  pressable: {
+    flex: 1,
+    pointerEvents: 'auto'
+  }
+});
+export default Overlay;
+//# sourceMappingURL=Overlay.js.map

rn-codegen/src/templates/project/esbuild/esbuild.script.js

@@ -136,6 +136,10 @@ class EsBuilder {
           );
         }`;
     });
+    const target = `${__dirname}/../node_modules/react-native-web/dist/cjs/exports/BackHandler/index.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace('console.error', '// console.error');
+    });
     console.log('Patched react-native-web');
   }
 
@@ -147,6 +151,101 @@ class EsBuilder {
     }
   }
 
+  async patchReactNativeAssetRegistry() {
+    const content = `
+    /**
+     * Copyright (c) Meta Platforms, Inc. and affiliates.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     *
+     * @flow strict
+     * @format
+     */
+    
+    'use strict';
+    
+    const assets = [];
+    
+    function registerAsset(asset) {
+      // push returns new array length, so the first asset will
+      // get id 1 (not 0) to make the value truthy
+      return assets.push(asset);
+    }
+    
+    function getAssetByID(assetId) {
+      return assets[assetId - 1];
+    }
+    
+    module.exports = {registerAsset, getAssetByID};
+    
+    `;
+    fs.writeFileSync(`${__dirname}/../node_modules/@react-native/assets-registry/registry.js`, content);
+    const expoAssetRegistry = `${__dirname}/../node_modules/expo-asset/node_modules/@react-native/assets-registry/registry.js`;
+    readAndReplaceFileContent(expoAssetRegistry, () => content);
+    console.log('Patched @react-native/assets-registry');
+  }
+
+  async patchBabelExpoPreset() {
+    const target = `${__dirname}/../node_modules/babel-preset-expo/build/index.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(
+        `(0, common_1.hasModule)('react-native-reanimated') &&`,
+        `//(0, common_1.hasModule)('react-native-reanimated') &&`)
+        .replace(
+          `platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],`,
+          `//platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],`
+        )
+    });
+    console.log('Patched babel-expo-preset');
+  }
+
+  async patchUUID() {
+    const target = `${__dirname}/../node_modules/expo-modules-core/build/uuid/uuid.web.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(`require('crypto')`, 'crypto');
+    });
+    console.log('Patched UUID.');
+  }
+
+  async patchExpoRootComponent() {
+    const target = `${__dirname}/../node_modules/expo/build/launch/registerRootComponent.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(`export default`, 
+      `
+      const process = {env: {
+        NODE_ENV: 'development',
+        EXPO_PUBLIC_USE_STATIC: '0'
+      }};
+      export default `);
+    });
+    console.log('Patched Expo Root Component.');
+  }
+
+  async patchReactNavigation() {
+    // https://github.com/react-navigation/react-navigation/pull/11496/files
+    fs.copyFileSync(
+      `${__dirname}/@react-navigation/drawer/6.6.3/lib/module/views/modern/Drawer.js`,
+      `${__dirname}/../node_modules/@react-navigation/drawer/lib/module/views/modern/Drawer.js`
+    );
+    fs.copyFileSync(
+      `${__dirname}/@react-navigation/drawer/6.6.3/lib/module/views/modern/Overlay.js`,
+      `${__dirname}/../node_modules/@react-navigation/drawer/lib/module/views/modern/Overlay.js`
+    );
+    console.log('Patched React Navigation.');
+  }
+
+  async patchReactNativeReanimated() {
+    await readAndReplaceFileContent(`${__dirname}/../node_modules/react-native-reanimated/lib/module/reanimated2/PlatformChecker.js`, (c) => {
+      return c.replace(
+        '!!process.env.JEST_WORKER_ID',
+        'false; // !!process.env.JEST_WORKER_ID'
+      )
+    });
+    console.log('Patched React Native Reanimated.');
+  }
+
+
   buildLibraries() {
     const promises = [{
       name: 'expo-web-browser',
@@ -182,6 +281,12 @@ class EsBuilder {
         .then(() => this.patchReactNativeWeb())
         .then(() => this.patchReactNativeAssets())
         .then(() => this.patchCamera())
+        .then(() => this.patchReactNativeAssetRegistry())
+        .then(() => this.patchBabelExpoPreset())
+        .then(() => this.patchUUID())
+        .then(() => this.patchExpoRootComponent())
+        .then(() => this.patchReactNavigation())
+        .then(() => this.patchReactNativeReanimated())
         .then(() => {
           console.log('*********** LIBRARIES ARE BUILT FOR ESBUILD **************');
         }, (e) => {
@@ -212,7 +317,11 @@ class EsBuilder {
             esmodules: true
           },
           sourceMaps: 'inline',
-          plugins: [__dirname + '/../scripts/wm-babel.transform.plugin.js']
+          plugins: [
+            __dirname + '/../scripts/wm-babel.transform.plugin.js', 
+            '@babel/plugin-proposal-export-namespace-from',
+            'react-native-reanimated/plugin',
+          ]
         }
       }), resolve({
         'victory-native': 'victory'

rn-codegen/src/templates/project/metro.config.js

@@ -11,6 +11,7 @@ module.exports = (async () => {
         ];
         config.resolver.disableHierarchicalLookup = true;
         config.transformer = {
+            ...config.transformer,
             babelTransformerPath: require.resolve('react-native-svg-transformer'),
             getTransformOptions: async () => ({
                 transform: {
@@ -20,6 +21,7 @@ module.exports = (async () => {
             })
         }
         config.resolver = {
+            ...config.resolver,
             assetExts: config.resolver.assetExts.filter(ext => ext !== 'svg'),
             sourceExts: [...config.resolver.sourceExts, 'svg']
         }