@wavemaker/rn-codegen 11.7.0-rc.161 → 11.7.0-rc.162

rn-codegen/src/templates/app.template

@@ -15,6 +15,7 @@ import BaseApp from '@wavemaker/app-rn-runtime/runtime/App';
 import { WmMemo } from '@wavemaker/app-rn-runtime/runtime/memo.component';
 {{#if sslPinning}}
 import { initializeSslPinning, isSslPinningAvailable } from 'react-native-ssl-public-key-pinning';
+import { getPublicHashKey } from '@wavemaker/react-native-ssl-publickey';
 {{/if}}
 
 import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
@@ -40,6 +41,7 @@ import { initialize as initializeDeviceOperations } from './src/device-operation
 import Lottie from 'lottie-react-native';
 import RNRestart from 'react-native-restart';
 import * as SplashScreen from 'expo-splash-screen';
+import { UIPreferencesProvider } from "@wavemaker/app-rn-runtime/core/ui-preferences.context";
 
 let _reloadApp = null;
 
@@ -57,6 +59,7 @@ class App extends BaseApp {
         },
       });
       this.userIdleTimeout = 60 * 60 * 1000;
+      this.uiPreferences = { enableRipple: appConfig.preferences.enableRipple };
   }
 
   getSecurityInfo() {
@@ -68,11 +71,11 @@ class App extends BaseApp {
   } 
 
   getServiceDefinitions() {
+    {{#if profile.useLocalMetadata}}
+      return Promise.resolve(require('./metadata/app/service-definitions.json'))
+    {{else}}
     return axios.get(this.baseUrl + '/services/servicedefs')
       .then((response) => response?.data || {})
-      {{#if profile.useLocalMetadata}}
-        .catch(() => import('./metadata/app/service-definitions.json').then(mod => mod.default))
-      {{else}}
         .catch(() => ({}))
       {{/if}}
       .then(data => {
@@ -92,13 +95,14 @@ class App extends BaseApp {
   }
 
   loadWmProperties() {
+    {{#if profile.useLocalMetadata}}
+      return Promise.resolve(require('./src/wmProperties').default)
+    {{else}}
     return axios.get(this.baseUrl + '/services/application/wmProperties.js')
       .then((response) => {
           const data = response.data;
           return JSON.parse(data.substring(data.indexOf('{'), data.length - 1));
       })
-    {{#if profile.useLocalMetadata}}
-      .catch(() => import('./src/wmProperties').then(mod => mod.default))
     {{/if}}
       .then(appProperties => {
         this.appConfig.appProperties = appProperties;
@@ -242,9 +246,21 @@ class App extends BaseApp {
 
 
   {{#if sslPinning}}
-  initSSLPininng() {
+  async initSSLPininng() {
+    let sslPinning = {{{stringify sslPinning}}}
     if (isSslPinningAvailable()) {
-      return initializeSslPinning({{{stringify sslPinning}}}).then(() => true);
+      const updatedSslPinning = {};
+
+      for (const key of Object.keys(sslPinning)) {
+        const value = sslPinning[key];
+        if (value.loadOnStartup) {
+          const publickey = await getPublicHashKey(key);
+          value.publicKeyHashes = [(publickey), "NoBackUpKey" + publickey.substring(11)];
+        }
+        updatedSslPinning[key] = value; // Update the modified object
+      }
+
+      return initializeSslPinning(updatedSslPinning).then(() => true);
     }
     return Promise.resolve(false);
   }
@@ -254,33 +270,31 @@ class App extends BaseApp {
     {{#if animatedSplash}}
     SplashScreen.hideAsync().then(() => {});{{/if}}
     this.appConfig.getServiceDefinitions = this.getServiceDefinitions.bind(this);
-    NetworkService.start(this.appConfig)
-    {{#if profile.useLocalMetadata}}
-    {{else}}
-    .then(() => {
-      NetworkService.connect(true);
-    })
-    {{/if}}
-    .then(() => {console.log('NetworkService started')})
-    .then(() => this.loadWmProperties())
-    .then(() => {console.log('WmProperties loaded')})
-    {{#if sslPinning}}
-    .then(() => this.initSSLPininng())
-    .then((flag) => {flag && console.log('SSL Pinning loaded')})
-    {{/if}}
-    .then(() => this.loadTheme())
+    Promise.all([
+      NetworkService.start(this.appConfig)
+      {{#if profile.useLocalMetadata}}
+      {{else}}
+      .then(() => {
+        NetworkService.connect(true);
+      })
+      {{/if}},
+      this.getSecurityInfo()
+        .then(() => {console.log('Security info loaded')}),
+      this.loadWmProperties()
+      {{#if sslPinning}}
+      .then(() => this.initSSLPininng())
+      .then((flag) => {flag && console.log('SSL Pinning loaded')})
+      {{/if}}
+      .then(() => this.loadTheme())
     .then(() => {console.log('Theme loaded')})
-    .then(() => AppI18nService.init())
-    .then(() => this.changeLocale())
+      .then(() => AppI18nService.init())
+      .then(() => this.changeLocale())
     .then(() => {console.log('Locale files loaded')})
-    .then(() => this.getSecurityInfo())
-    .then(() => {console.log('Security info loaded')})
-    .then(() => this.loadFonts())
+      .then(() => this.loadFonts())
     .then(() => {console.log('Font files loaded')})
-    .then(() => initializeDeviceOperations())
+      .then(() => initializeDeviceOperations())
     .then(() => {console.log('Loaded device operations loaded')})
-    .then(() => this.bootstrap())
-    .then(() => {console.log('Bootstrap Complete')})
+      .then(() => this.bootstrap())])
     .then(() => super.componentDidMount())
     .catch(error => {
       console.error(error);
@@ -313,9 +327,11 @@ class App extends BaseApp {
 
   render() {
     return (
+      <UIPreferencesProvider value={this.uiPreferences}>
       <View dir={AppI18nService.isRTLLocale(this.appConfig.selectedLocale)?'rtl':null} style=\{{flex: 1, backgroundColor: themeVariables.INSTANCE.pageContentBgColor}} {...this.panResponder.panHandlers}>
         { this.isStarted ? super.renderApp(this.getCommonPartial()) : null}
       </View>
+      </UIPreferencesProvider>
     );
   }
 }
@@ -340,11 +356,13 @@ const AnimatedSplash = (props) => {
       <Lottie
         source={ResourceResolver.resolve(appConfig.splash.animationSrc, appConfig.url)}
         autoPlay={true}
-        loop={true} />
+        loop={true}
+        style=\{{ width: '100%', height: '100%' }} />
     </ImageBackground>:<Lottie
         source={ResourceResolver.resolve(appConfig.splash.animationSrc, appConfig.url)}
         autoPlay={true}
-        loop={true} />
+        loop={true}
+        style=\{{ width: '100%', height: '100%' }} />
   );
 }
 {{/if}}

rn-codegen/src/templates/babel.config.js.template

@@ -2,7 +2,13 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: ['react-native-reanimated/plugin',{{#if enableLogs}} {{else}}'transform-remove-console'{{/if}}], 
+    plugins: [
+      {{#if enableLogs}} {{else}}'transform-remove-console', {{/if}}
+      ['@babel/plugin-transform-class-static-block', { "loose": true }],
+      ['@babel/plugin-transform-class-properties', { "loose": true }],
+      '@babel/plugin-proposal-export-namespace-from',
+      'react-native-reanimated/plugin'
+    ],
     overrides: [{
       test: './src',
       plugins: ['./scripts/wm-babel.transform.plugin.js']

rn-codegen/src/templates/component/component.template

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ScrollView } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 
 import { AssetProvider } from '@wavemaker/app-rn-runtime/core/asset.provider';
 import Base{{typeLabel}} from '@wavemaker/app-rn-runtime/runtime/base-{{lType}}.component';
@@ -89,8 +89,7 @@ export default class {{name}}{{typeLabel}} extends Base{{typeLabel}} {
   componentDidMount() {
     {{#ifEquals lType 'prefab' this}}
       {{#if profile.useLocalMetadata}}
-      import('../../../service-definitions.json')
-      .then(mod => mod.default?.serviceDefs)
+      Promise.resolve(require('../../../service-definitions.json').serviceDefs)
       {{else}}
       this.getServiceDefinitions()
       {{/if}}

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

@@ -9,85 +9,86 @@
         "postinstall": "echo \"\""
     },
     "dependencies": {
-        "@unimodules/react-native-adapter": "6.3.9",
-        "@wavemaker/app-rn-runtime": "11.7.0-rc.161",
-        "@wavemaker/variables": "11.7.0-rc.161",
-        "@wavemaker/rn-codegen": "11.7.0-rc.161",
-        "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-rc.162",
+        "@wavemaker/variables": "11.7.0-rc.162",
+        "@wavemaker/rn-codegen": "11.7.0-rc.162",
+        "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",
+        "react-native-mime-types": "2.5.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"
     },
     "devDependencies": {
+        "metro-minify-terser": "0.80.10",
         "webpack-dev-middleware": "6.1.1",
         "react-devtools-core": "4.28.0",
         "@babel/cli": "7.14.5",
         "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"
-    },
-    "resolutions": {
-        "react-error-overlay": "6.0.9",
-        "react-native-reanimated": "3.4.1"
+        "@types/babel__standalone": "7.1.7",
+        "@expo/metro-config": "^0.7.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