react-native-unit-components 3.1.1 → 3.1.2-beta.2

package/src/components/UNBottomSheetComponent/components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent.tsx

@@ -7,7 +7,7 @@ import {
 import { useDispatch } from 'react-redux';
 import { setComponentHeight, setScrollState, setShouldEnableBottomSheetScroll } from '../../../../slices/BottomSheetSlice';
 import { UNAddToWalletComponent } from '../../../../nativeComponents/UNAddToWallet/UNAddToWalletComponent';
-import { overFullScreenHeight } from '../../UNBottomSheetComponent.constants';
+import { BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE } from '../../UNBottomSheetComponent.constants';
 import { useSafeAreaDimensions } from '../../../../hooks/useSafeAreaDimensions';
 import UNACHCreditComponent from '../../../UNACHCreditComponent/UNACHCreditComponent';
 import UNCheckDepositComponent from '../../../UNCheckDepositComponent/UNCheckDepositComponent';
@@ -22,11 +22,14 @@ import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/U
 
 export interface UNBottomSheetNativeComponentProps {
   nativeComponentData: NativeComponentData;
+  containerHeight: number;
 }
 
 const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps) => {
   const dispatch = useDispatch();
-  const { contentHeight, effectiveBottomInset } = useSafeAreaDimensions();
+  const { insets, effectiveBottomInset } = useSafeAreaDimensions();
+  const overFullScreenHeight = props.containerHeight * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
+  const modalContentHeight = props.containerHeight - insets.top;
   const [height, setHeight] = useState<number>(0);
   const [paddingTop, setPaddingTop] = useState<number>(0);
   const [paddingBottom, setPaddingBottom] = useState<number>(0);
@@ -67,7 +70,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
           adjustedHeight = overFullScreenHeight;
           break;
         case BottomSheetNativePlaceType.modal:
-          adjustedHeight = contentHeight;
+          adjustedHeight = modalContentHeight;
           break;
         default:
           return;
@@ -79,7 +82,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
     };
 
     setBottomSheetNativeComponentViewHeight();
-  }, [props.nativeComponentData.nativePlace, contentHeight, dispatch]);
+  }, [props.nativeComponentData.nativePlace, modalContentHeight, overFullScreenHeight, dispatch]);
 
   const renderNativeComponent = () => {
     switch (props.nativeComponentData?.component.type) {

package/src/components/UNBottomSheetComponent/components/UNBottomSheetSlotComponent/UNBottomSheetSlotComponent.tsx

@@ -30,7 +30,7 @@ import {
 } from '../../../../slices/BottomSheetSlice';
 import { getAccountActionType } from '../../../UNAccountComponent/UNAccountComponent.utils';
 import { UNAccountAction } from '../../../UNAccountComponent/UNAccountComponent';
-import { BOTTOM_PADDING, LEFT_PADDING, overFullScreenHeight, RIGHT_PADDING, TOP_PADDING, VERTICAL_PADDING } from '../../UNBottomSheetComponent.constants';
+import { BOTTOM_PADDING, BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE, LEFT_PADDING, RIGHT_PADDING, TOP_PADDING, VERTICAL_PADDING } from '../../UNBottomSheetComponent.constants';
 import { useSafeAreaDimensions } from '../../../../hooks/useSafeAreaDimensions';
 import { BottomSheetNativeMessage } from '../../../../messages/nativeMessages/bottomSheetMessage';
 import { OpenPlaidEvent, PlaidMessage } from '../../../../messages/webMessages/plaidMessages';
@@ -43,6 +43,7 @@ export interface UNBottomSheetSlotComponentProps {
   requestRenderingEvent: RequestRenderingEvent;
   componentName?: WebComponentType,
   componentResourceId?: string,
+  containerHeight: number,
 }
 
 const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
@@ -50,7 +51,9 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
   const webRef = useRef<WebView>(null);
   const scrollState = useSelector((state: RootState) => state.bottomSheet.scrollState);
   const nativePlace = props.requestRenderingEvent?.data?.nativePlace;
-  const { fullScreenHeight, contentHeight, effectiveBottomInset } = useSafeAreaDimensions();
+  const { insets, effectiveBottomInset } = useSafeAreaDimensions();
+  const overFullScreenHeight = props.containerHeight * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
+  const modalContentHeight = props.containerHeight - insets.top;
 
   useEffect(() => {
     const scrollStateForSlot = () => {
@@ -113,8 +116,8 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
           }
           case BottomSheetNativePlaceType.modal: {
             const injectedHeight = !props.requestRenderingEvent.data.isPaddingIncluded
-              ? contentHeight - VERTICAL_PADDING - effectiveBottomInset
-              : contentHeight - effectiveBottomInset;
+              ? modalContentHeight - VERTICAL_PADDING - effectiveBottomInset
+              : modalContentHeight - effectiveBottomInset;
             injectHtmlFullScreenHeight(webRef.current, injectedHeight);
             break;
           }
@@ -219,7 +222,7 @@ const UNBottomSheetSlotComponent = (props: UNBottomSheetSlotComponentProps) => {
 
   return (
     <View style={{...paddingStyle, flex: 1}}>
-      <UNKeyboardAvoidingView keyboardVerticalOffset={fullScreenHeight - overFullScreenHeight}>
+      <UNKeyboardAvoidingView keyboardVerticalOffset={props.containerHeight - overFullScreenHeight}>
         <WebComponent
           ref={webRef}
           type={WebComponentType.slot}

package/src/helpers/BottomSheet/BottomSheet.styles.ts

@@ -18,8 +18,10 @@ export const getStylesObject = (fadeAnim: any) => {
       opacity: fadeAnim,
     },
     container: {
-      position: 'relative',
-      flex: 1,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
       shadowColor: VARIABLES.COLORS.BLACK,
       shadowOffset: {
         width: 0,

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -6,7 +6,6 @@ import {
   Image,
   LayoutChangeEvent,
   PanResponder,
-  Platform,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -37,11 +36,11 @@ const BottomSheet = (props: BottomSheetProps) => {
   const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const styles = getStylesObject(fadeAnim);
-  const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);
+  // Initialize to false: BottomSheet mounts fresh each time (conditionally rendered),
+  // so useEffect will trigger fadeIn() when isOpen=true on mount.
+  const [isPanelOpened, setIsPanelOpened] = useState(false);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
-  const { insets, fullScreenHeight, isAndroid10AndAbove, isEdgeToEdgeActive } = useSafeAreaDimensions();
-  // Android 15+ (API 35) enforces edge-to-edge, so marginTop calculation differs
-  const isAndroid15AndAbove = Platform.OS === 'android' && Platform.Version >= 35;
+  const { insets } = useSafeAreaDimensions();
 
   const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight);
 
@@ -161,10 +160,25 @@ const BottomSheet = (props: BottomSheetProps) => {
     return isPanelOpened;
   };
 
+  // Track the last height we animated to, so we skip duplicate animations
+  // (prevents visual jitter when _setSize fires multiple times with the same height)
+  // but still re-animate when the height actually changes.
+  const lastAnimatedHeight = useRef(0);
+
+  // Reset when new content starts loading, so the next opening can animate.
+  useEffect(() => {
+    if (props.isComponentLoading) {
+      lastAnimatedHeight.current = 0;
+    }
+  }, [props.isComponentLoading]);
+
   const _setSize = (e: LayoutChangeEvent) => {
     const newContentHeight = e.nativeEvent.layout.height;
     setContentHeight(newContentHeight);
-    setToContentHeight(newContentHeight);
+    if (newContentHeight > 0 && newContentHeight !== lastAnimatedHeight.current) {
+      lastAnimatedHeight.current = newContentHeight;
+      setToContentHeight(newContentHeight);
+    }
   };
 
   const _dismiss = (withAnimation = true) => {
@@ -203,13 +217,10 @@ const BottomSheet = (props: BottomSheetProps) => {
           borderTopLeftRadius: isModal ? 0 : styles.container.borderTopLeftRadius,
           borderTopRightRadius: isModal ? 0 : styles.container.borderTopRightRadius,
           height: props.sliderMaxHeight,
-          // Android 15+ (edge-to-edge): fullScreenHeight is already the full screen, no adjustment needed
-          // Android 10-14: fullScreenHeight includes status bar, but view starts below it, so subtract insets.top
-          marginTop: isModal ? 0 : fullScreenHeight - props.sliderMaxHeight - (isAndroid10AndAbove && !isAndroid15AndAbove ? insets.top : 0),
           transform: [
             { translateY: panelHeightValue },
           ],
-          paddingTop: isModal && (Platform.OS === 'ios' || isEdgeToEdgeActive) ? insets.top : 0,
+          paddingTop: isModal ? insets.top : 0,
         }}
       >
         <View

package/src/hooks/useSafeAreaDimensions.ts

@@ -1,5 +1,6 @@
 import { Dimensions, Platform } from 'react-native';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
+import { isNavigationBarTranslucent } from '../nativeModulesHelpers/UNNavigationBarHelper';
 
 const isAndroid = Platform.OS === 'android';
 const isAndroid10To14 = isAndroid && Platform.Version >= 29 && Platform.Version < 35;
@@ -9,12 +10,20 @@ const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, rig
 const windowHeight = Dimensions.get('window').height;
 const screenHeight = Dimensions.get('screen').height;
 
-// Detect edge-to-edge by comparing window to screen height
-// Edge-to-edge ON: windowHeight ≈ screenHeight | OFF: windowHeight < screenHeight
+// Detect edge-to-edge on API 35+ by comparing window to screen height
 const heightDifference = Math.abs(screenHeight - windowHeight);
 const isEdgeToEdgeActive = isAndroid15AndAbove && heightDifference < 10;
 
-const effectiveBottomInset = isEdgeToEdgeActive ? insets.bottom : 0;
+// Resolved once at module load time; defaults to false until resolved.
+// The native call is fast (reads a window flag), so it resolves before
+// any bottom sheet is opened.
+let _navBarTranslucent = false;
+
+if (isAndroid) {
+  isNavigationBarTranslucent().then((result) => {
+    _navBarTranslucent = result;
+  });
+}
 
 const calculateFullScreenHeight = (): number => {
   if (isAndroid15AndAbove) {
@@ -41,6 +50,9 @@ const calculateContentHeight = (): number => {
 const contentHeight = calculateContentHeight();
 
 export const useSafeAreaDimensions = () => {
+  const shouldApplyBottomInset = isEdgeToEdgeActive || _navBarTranslucent;
+  const effectiveBottomInset = shouldApplyBottomInset ? insets.bottom : 0;
+
   return {
     insets,
     fullScreenHeight,

package/src/nativeModulesHelpers/UNNavigationBarHelper.ts

@@ -0,0 +1,14 @@
+import { Platform, NativeModules } from 'react-native';
+
+const UNNavigationBarModule = Platform.OS === 'android'
+  ? NativeModules.UNNavigationBarModule
+  : undefined;
+
+export async function isNavigationBarTranslucent(): Promise<boolean> {
+  if (!UNNavigationBarModule) return false;
+  try {
+    return await UNNavigationBarModule.isNavigationBarTranslucent();
+  } catch {
+    return false;
+  }
+}

package/src/unitComponentsSdkManager/UnitComponentsSdkManager.ts

@@ -26,7 +26,7 @@ export class UnitComponentsSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '3.1.1';
+  protected static sdkVersion = '3.1.2-beta.2';
   static iosFontBase64Map: Record<string, string> = {};
 
   public static init = async (