@momo-kits/foundation 0.167.1-duotest.2 → 0.167.1

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -14,19 +14,21 @@ import { Colors, Radius, Spacing } from '../../Consts';
 import { Image } from '../../Image';
 import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
-import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
-import { useScreenLayout } from '../../Layout';
-import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
+import {
+  AnimatedCompatValue,
+  useNormalizedSharedValue,
+} from '../utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
-const TOOLKIT_WIDTH = 73;
+
+const { width: screenWidth } = Dimensions.get('window');
 
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
   heightHeader: number;
-  headerRightWidth?: number;
+  headerRightWidth: number;
   inputSearchProps?: SearchHeaderProps;
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
@@ -37,7 +39,7 @@ const HeaderExtendHeader: React.FC<{
   headerType = 'default',
   animatedValue,
   heightHeader,
-  headerRightWidth: customHeaderRightWidth,
+  headerRightWidth = 73,
   inputSearchProps,
   inputSearchRef,
   useShadowHeader: useShadowHeaderProp = true,
@@ -49,35 +51,7 @@ const HeaderExtendHeader: React.FC<{
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
-  const layout = useScreenLayout();
-
-  // the iPhone Duo status bar row keeps side bar sized back and toolkit
-  const backWidth = layout.statusBarClearance
-    ? DuoMetrics.controlSize
-    : BACK_WIDTH;
-  const toolkitWidth = layout.statusBarClearance
-    ? DuoMetrics.itemPitch * 2 + SCREEN_PADDING
-    : TOOLKIT_WIDTH;
-  const leftPosition =
-    inputSearchProps?.leftPosition ||
-    (layout.sideBar ? SCREEN_PADDING : backWidth + 20);
-  const headerRightWidth =
-    customHeaderRightWidth ?? (layout.sideBar ? 0 : toolkitWidth);
-  const contentLeft = layout.insetLeft + SCREEN_PADDING;
-  const contentRight = layout.insetLeft + layout.contentWidth;
-  // collapsed on the status bar row, the search stays between its clusters
-  const collapsedLeft =
-    layout.insetLeft + leftPosition + (layout.statusBarClearance?.left ?? 0);
-  const collapsedRight = contentRight - (layout.statusBarClearance?.right ?? 0);
-  const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
-  const collapsedSearchWidth =
-    collapsedRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
-  // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
-  const collapsedRaise =
-    (layout.headerHeight -
-      layout.headerStatusBarHeight -
-      HeaderMetrics.barHeight) /
-    2;
+  const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -96,12 +70,7 @@ const HeaderExtendHeader: React.FC<{
   }));
 
   const gradientOpacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      sharedValue.value,
-      [0, 52],
-      [1, 0],
-      Extrapolation.CLAMP,
-    ),
+    opacity: interpolate(sharedValue.value, [0, 52], [1, 0], Extrapolation.CLAMP),
   }));
 
   const searchTranslateStyle = useAnimatedStyle(() => ({
@@ -110,15 +79,7 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [contentLeft, collapsedLeft],
-          Extrapolation.CLAMP,
-        ),
-      },
-      {
-        translateY: interpolate(
-          sharedValue.value,
-          [0, 100],
-          [0, -collapsedRaise],
+          [SCREEN_PADDING, leftPosition],
           Extrapolation.CLAMP,
         ),
       },
@@ -126,19 +87,19 @@ const HeaderExtendHeader: React.FC<{
     width: interpolate(
       sharedValue.value,
       [0, 100],
-      [searchWidth, collapsedSearchWidth],
+      [
+        screenWidth - SCREEN_PADDING * 2,
+        screenWidth - leftPosition - 12 - headerRightWidth,
+      ],
       Extrapolation.CLAMP,
     ),
   }));
 
   const searchBackgroundStyle = useAnimatedStyle(() => {
     const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
-    return {
-      backgroundColor:
-        t === 0
-          ? theme.colors.background.surface
-          : theme.colors.background.default,
-    };
+    return { backgroundColor: t === 0
+      ? theme.colors.background.surface
+      : theme.colors.background.default };
   });
 
   const extendedHeightStyle = useAnimatedStyle(() => ({
@@ -163,17 +124,14 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View
           style={[
             styles.headerBox,
-            headerType === 'extended' ? heightStyle : { height: heightHeader },
+            headerType === 'extended'
+              ? heightStyle
+              : { height: heightHeader },
           ]}
         >
           {!!gradientColor && (
             <Animated.View
-              style={[
-                styles.extendedHeader,
-                // fade out within the header box, as DuoScrollGradient does
-                !!layout.sideBar && styles.fillHeaderBox,
-                gradientOpacityStyle,
-              ]}
+              style={[styles.extendedHeader, gradientOpacityStyle]}
             >
               <LinearGradient
                 colors={[gradientColor, gradientColor + '00']}
@@ -204,7 +162,10 @@ const HeaderExtendHeader: React.FC<{
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
             <Animated.View
-              style={[{ borderRadius: Radius.XL }, searchBackgroundStyle]}
+              style={[
+                { borderRadius: Radius.XL },
+                searchBackgroundStyle,
+              ]}
             >
               <InputSearch
                 {...inputSearchProps}
@@ -230,11 +191,7 @@ const HeaderExtendHeader: React.FC<{
         />
         {!!gradientColor && (
           <Animated.View
-            style={[
-              styles.extendedHeader,
-              gradientOpacityStyle,
-              extendedHeightStyle,
-            ]}
+            style={[styles.extendedHeader, gradientOpacityStyle, extendedHeightStyle]}
           >
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}
@@ -270,10 +227,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
-  fillHeaderBox: {
-    aspectRatio: undefined,
-    height: '100%',
-  },
   headerBox: {
     width: '100%',
     position: 'absolute',

package/Application/Components/HeaderLeft.tsx

@@ -4,10 +4,6 @@ import React, { useCallback, useContext, useEffect } from 'react';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
-import { SideBarButton } from './SideBarButton';
-import Animated from 'react-native-reanimated';
-import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
-import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
  * default header left used for nav
@@ -17,13 +13,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   onBackHandler,
-  floating = false,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { navigator } = useContext(ApplicationContext);
-  const sideBarStyle = useSideBarItemStyle('left', 0);
-  const counterStyle = useSideBarCounterStyle();
-  const { statusBarClearance } = useScreenLayout();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -80,36 +72,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     return () => backHandler.remove();
   }, [goBackSafe]);
 
-  if (floating && sideBarStyle) {
-    return (
-      <Animated.View
-        style={[sideBarStyle, counterStyle]}
-        pointerEvents={'box-none'}
-      >
-        <SideBarButton
-          accessibilityLabel="btn_navigation_back"
-          icon="arrow-back"
-          tintColor={tintColor}
-          onPress={goBackSafe}
-        />
-      </Animated.View>
-    );
-  }
-
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.headerLeft}>
-        <SideBarButton
-          accessibilityLabel="btn_navigation_back"
-          icon="arrow-back"
-          tintColor={tintColor}
-          onPress={goBackSafe}
-        />
-      </View>
-    );
-  }
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.tsx

@@ -13,12 +13,6 @@ import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
-import Animated from 'react-native-reanimated';
-import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
-import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
-import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
-import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
-import { DuoMetrics } from '../../Layout/utils';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 
@@ -27,10 +21,8 @@ const DID_SYNC_NEW_HOME = 'did_sync_new_home';
  */
 const HeaderRight: React.FC<any> = props => {
   const { translate } = useContext(ApplicationContext);
-  const { headerRight = {}, floating = false } = props;
+  const { headerRight = {} } = props;
   const { useOnBoarding = false, buttonOnBoarding, onPress } = headerRight;
-  const sideBarStyle = useSideBarItemStyle('right', 1);
-  const counterStyle = useSideBarCounterStyle();
 
   if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
@@ -46,21 +38,6 @@ const HeaderRight: React.FC<any> = props => {
     );
   }
 
-  if (floating && sideBarStyle) {
-    return (
-      <Animated.View
-        style={[sideBarStyle, counterStyle]}
-        pointerEvents={'box-none'}
-      >
-        <HeaderToolkitAction
-          {...props.headerRight}
-          tintColor={props.tintColor}
-          vertical
-        />
-      </Animated.View>
-    );
-  }
-
   return (
     <View style={styles.headerRightButton}>
       <HeaderToolkitAction {...props.headerRight} tintColor={props.tintColor} />
@@ -79,13 +56,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   useMore = false,
   tools = [],
   useCloseIcon = false,
-  vertical = false,
 }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
-    useDuoBarCompression();
-  const { statusBarClearance } = useScreenLayout();
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -287,111 +260,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     group?.items?.some?.(tool => tool?.showBadge),
   );
 
-  const useHelpCenter = context.appId !== 'vn.momo.helpcenter';
-  const closeIcon = useCloseIcon
-    ? '16_navigation_close_circle'
-    : '16_basic_home';
-
-  const groupCount = useHelpCenter ? 2 : 1;
-  // Back slot, the optional shortcut, then the help/home capsule
-  const fullToolbarHeight =
-    DuoMetrics.controlSize +
-    Spacing.M +
-    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
-    (groupCount > 1
-      ? groupCount * DuoMetrics.itemPitch
-      : DuoMetrics.controlSize);
-
-  useEffect(() => {
-    if (vertical) {
-      setToolbarHeight?.(fullToolbarHeight);
-    }
-  }, [vertical, fullToolbarHeight, setToolbarHeight]);
-
-  // an open tab rail takes this slot for a moment
-  if (vertical && toolbarHidden) {
-    return null;
-  }
-
-  // HIG "Toolbar compressed": tools fold into one button; tapping it expands the
-  // toolbar and compresses the tab bar instead. Not the useMore icon, to tell them apart
-  if (vertical && toolbarCompressed) {
-    return (
-      <SideBarButton
-        accessibilityLabel={'btn_navigation_toolbar'}
-        icon={'navigation_menu'}
-        tintColor={tintColor}
-        showBadge={showBadge}
-        onPress={expandToolbar}
-      />
-    );
-  }
-
-  if (vertical) {
-    return (
-      <View style={styles.sideBarColumn}>
-        {useShortcut && (
-          <SideBarButton
-            disabled={isLoading}
-            icon={iconShortcut}
-            onPress={shortcutOnPress}
-            tintColor={tintColor}
-            showBadge={showBadge}
-          />
-        )}
-        <SideBarGroup tintColor={tintColor}>
-          {useHelpCenter && (
-            <SideBarGroupItem
-              accessibilityLabel={'btn_navigation_help_center'}
-              icon={'help_center'}
-              tintColor={tintColor}
-              onPress={onPressHelpCenter}
-            />
-          )}
-          <SideBarGroupItem
-            accessibilityLabel={'btn_navigation_close'}
-            icon={closeIcon}
-            tintColor={tintColor}
-            onPress={onClose}
-          />
-        </SideBarGroup>
-      </View>
-    );
-  }
-
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.sideBarRow}>
-        {useShortcut && (
-          <SideBarButton
-            disabled={isLoading}
-            icon={iconShortcut}
-            onPress={shortcutOnPress}
-            tintColor={tintColor}
-            showBadge={showBadge}
-          />
-        )}
-        <SideBarGroup tintColor={tintColor} horizontal>
-          {useHelpCenter && (
-            <SideBarGroupItem
-              accessibilityLabel={'btn_navigation_help_center'}
-              icon={'help_center'}
-              tintColor={tintColor}
-              onPress={onPressHelpCenter}
-            />
-          )}
-          <SideBarGroupItem
-            accessibilityLabel={'btn_navigation_close'}
-            icon={closeIcon}
-            tintColor={tintColor}
-            onPress={onClose}
-          />
-        </SideBarGroup>
-      </View>
-    );
-  }
-
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -412,7 +280,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           },
         ]}
       >
-        {useHelpCenter && (
+        {context.appId !== 'vn.momo.helpcenter' && (
           <>
             <TouchableOpacity
               accessibilityLabel={'btn_navigation_help_center'}
@@ -431,7 +299,13 @@ const HeaderToolkitAction: React.FC<any> = ({
           style={styles.toolkitButton}
           hitSlop={{ top: 7, bottom: 7, left: 0, right: 7 }}
         >
-          <Icon color={tintColor} source={closeIcon} size={20} />
+          <Icon
+            color={tintColor}
+            source={
+              useCloseIcon ? '16_navigation_close_circle' : '16_basic_home'
+            }
+            size={20}
+          />
         </TouchableOpacity>
       </View>
     </View>
@@ -502,13 +376,6 @@ const styles = StyleSheet.create({
     width: 0.5,
     height: 12,
   },
-  sideBarColumn: {
-    gap: Spacing.M,
-  },
-  sideBarRow: {
-    flexDirection: 'row',
-    gap: Spacing.M,
-  },
   headerLeft: {
     marginLeft: 12,
   },

package/Application/Components/HeaderTitle.tsx

@@ -21,43 +21,12 @@ import {
   isWhiteListDesignSystem,
   useNormalizedSharedValue,
 } from '../utils';
-import { useScreenLayout } from '../../Layout';
 
 const useHeaderFontFamily = (): string => {
   const context = useContext<any>(MiniAppContext);
   return isWhiteListDesignSystem(context) ? 'MoMoTrustDisplay' : 'SFProText';
 };
 
-/**
- * back button and toolkit sharing the navigation bar with the title
- */
-const HEADER_ACTIONS_WIDTH = 172;
-
-/**
- * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
- */
-const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
-
-/**
- * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
- */
-const useTitleMaxWidth = () => {
-  const { width, contentWidth, sideBar, statusBarClearance } =
-    useScreenLayout();
-  const clearance = statusBarClearance
-    ? statusBarClearance.left + statusBarClearance.right
-    : 0;
-  if (sideBar) {
-    return contentWidth - Spacing.M * 2 - clearance;
-  }
-  return (
-    width -
-    HEADER_ACTIONS_WIDTH -
-    (statusBarClearance ? STATUS_BAR_ROW_ACTIONS_EXTRA : 0) -
-    clearance
-  );
-};
-
 type HeaderTitleInterpolate = {
   inputRange: number[];
   outputRange: number[];
@@ -78,7 +47,6 @@ const HeaderTitle: React.FC<
 > = props => {
   const context = useContext<any>(MiniAppContext);
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = useTitleMaxWidth();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -109,7 +77,7 @@ const HeaderTitle: React.FC<
       style={[
         {
           justifyContent: 'center',
-          maxWidth,
+          maxWidth: Dimensions.get('window').width - 172,
         },
         showBaseLineDebug && styles.debugBaseLine,
       ]}
@@ -173,7 +141,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = useTitleMaxWidth();
+  const maxWidth = Dimensions.get('window').width - 172;
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -456,7 +424,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   isLoading,
 }) => {
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = useTitleMaxWidth();
+  const maxWidth = Dimensions.get('window').width - 172;
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>
@@ -525,14 +493,10 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   isLoading,
 }) => {
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = useTitleMaxWidth();
-  const { sideBar } = useScreenLayout();
-  // journey split is tuned against the whole bar width
-  const barWidth = sideBar
-    ? maxWidth + HEADER_ACTIONS_WIDTH
-    : Dimensions.get('screen').width;
-  const startWidth = barWidth * 0.25;
-  const endWidth = barWidth * 0.75 - 212;
+  const { width } = Dimensions.get('screen');
+  const maxWidth = Dimensions.get('window').width - 172;
+  const startWidth = width * 0.25;
+  const endWidth = width * 0.75 - 212;
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>

package/Application/Components/SearchHeader.tsx

@@ -1,14 +1,17 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
-import { useScreenLayout } from '../../Layout';
-import { DuoMetrics } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -23,31 +26,19 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   ) => {
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const layout = useScreenLayout();
-    // the iPhone Duo status bar row keeps a side bar sized back button
-    const BACK_WIDTH = layout.statusBarClearance ? DuoMetrics.controlSize : 28;
+    const BACK_WIDTH = 28;
+    const { width: screenWidth } = Dimensions.get('window');
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
-    // iPhone Duo side bar holds back: the search shares the content width with the buttons only
-    let searchMaxWidth = layout.width - leftPosition - 12 - headerRightWidth;
-    if (layout.sideBar) {
-      searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
-    }
-    if (layout.statusBarClearance) {
-      searchMaxWidth -=
-        layout.statusBarClearance.left + layout.statusBarClearance.right;
-    }
-
     const backgroundStyle = useAnimatedStyle(() => {
       const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
       return {
-        backgroundColor:
-          t === 0
-            ? theme.colors.background.surface
-            : theme.colors.background.default,
+        backgroundColor: t === 0
+          ? theme.colors.background.surface
+          : theme.colors.background.default,
       };
     });
 
@@ -86,11 +77,13 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
           style={[
             Styles.flex,
             renderButtons && {
-              maxWidth: searchMaxWidth,
+              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
             },
           ]}
         >
-          <Animated.View style={[{ borderRadius: Radius.XL }, backgroundStyle]}>
+          <Animated.View
+            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
+          >
             <InputSearch
               ref={ref}
               {...props}

package/Application/ModalScreen.tsx

@@ -8,18 +8,15 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  useWindowDimensions,
   View,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { getDuoTopInset, isIPhoneDuo } from './device';
-import { scheduleOnRN } from 'react-native-worklets';
+import { runOnJS } from 'react-native-reanimated';
 
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
@@ -40,8 +37,6 @@ const Modal: React.FC<ModalParams> = props => {
     title,
   } = props.route.params;
   const Component = useRef(screen).current;
-  const insets = useSafeAreaInsets();
-  const windowSize = useWindowDimensions();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -111,7 +106,7 @@ const Modal: React.FC<ModalParams> = props => {
         }),
       ]).start(() => {
         navigator?.pop();
-        scheduleOnRN(callback);
+        runOnJS(callback)();
       });
     },
     [navigator, opacity, scale],
@@ -152,15 +147,6 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
-            // center below the side status bar and above the home indicator
-            isIPhoneDuo() && {
-              marginTop: getDuoTopInset(
-                insets,
-                windowSize.width,
-                windowSize.height,
-              ),
-              marginBottom: insets.bottom,
-            },
             modalStyle,
           ]}
         >