react-native-unit-components/src/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.ts

Unit React Native components

import { Dimensions, Platform } from 'react-native';
import { initialWindowMetrics } from 'react-native-safe-area-context';

export const BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE = 0.9;

const windowHeight = Dimensions.get('window').height;
const screenHeight = Dimensions.get('screen').height;
const statusBarHeight = initialWindowMetrics?.insets.top ?? 0;
const isAndroid = Platform.OS === 'android';
const isAndroid15AndAbove = isAndroid && Platform.Version >= 35;

// Android 15+ edge-to-edge detection
const isEdgeToEdgeActive = isAndroid15AndAbove && Math.abs(screenHeight - windowHeight) < 10;

// Calculate overFullScreenHeight based on platform
const calculateOverFullScreenHeight = (): number => {
  if (!isAndroid) {
    // iOS: simple percentage of window height
    return windowHeight * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
  }
  
  // Android: adjust for edge-to-edge status
  const topMargin = screenHeight * (1 - BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE);
  if (isEdgeToEdgeActive) {
    return screenHeight - topMargin;
  } else {
    // Edge-to-edge opted out: status bar is outside window, adjust margin
    return windowHeight - (topMargin - statusBarHeight);
  }
};

export const overFullScreenHeight = calculateOverFullScreenHeight();

export const TOP_PADDING = 48;
export const BOTTOM_PADDING = 24;
export const LEFT_PADDING = 24;
export const RIGHT_PADDING = 24;
export const VERTICAL_PADDING = TOP_PADDING + BOTTOM_PADDING; // For adjusting injected height