@expo/ui 57.0.11 → 57.0.12

package/src/swift-ui/modifiers/index.ts

@@ -157,18 +157,26 @@ export const containerRelativeFrame = (params: {
 
 /**
  * Sets padding on a view.
- * Supports individual edges or shorthand properties.
+ * Supports individual edges or shorthand properties. Every edge accepts a length in points or
+ * `'default'` to apply the system default padding to that edge. Edges set by a specific property
+ * take precedence over the shorthand ones, and unspecified edges get no padding.
+ * Calling it without parameters applies the system default padding to all edges.
  * @param params - The padding parameters: `top`, `bottom`, `leading`, `trailing`, `horizontal`, `vertical` and `all`.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/SwiftUI/View/padding(_:_:)).
+ * @example
+ * ```tsx
+ * // The system default padding on top, 12 points on the sides, nothing at the bottom.
+ * <Text modifiers={[padding({ top: 'default', horizontal: 12 })]}>Hello</Text>
+ * ```
  */
 export const padding = (params?: {
-  top?: number;
-  bottom?: number;
-  leading?: number;
-  trailing?: number;
-  horizontal?: number;
-  vertical?: number;
-  all?: number;
+  top?: number | 'default';
+  bottom?: number | 'default';
+  leading?: number | 'default';
+  trailing?: number | 'default';
+  horizontal?: number | 'default';
+  vertical?: number | 'default';
+  all?: number | 'default';
 }) => createModifier('padding', params);
 
 /**

package/src/universal/BottomSheet/index.android.tsx

@@ -8,6 +8,7 @@ import {
 import { useEffect, useRef, useState } from 'react';
 
 import type { BottomSheetProps, SnapPoint } from './types';
+import { resolveContentPadding } from './utils';
 
 // M3 `ModalBottomSheet` only has partial/expanded states.
 // Only allow the partial state when the consumer requested a partial-friendly snap point.
@@ -38,6 +39,8 @@ export function BottomSheet({
   snapPoints,
   testID,
   modifiers,
+  shouldDismissOnBackPress = true,
+  contentPadding,
 }: BottomSheetProps) {
   const sheetRef = useRef<ModalBottomSheetRef>(null);
   const [mount, setMount] = useState(isPresented);
@@ -60,7 +63,15 @@ export function BottomSheet({
     return null;
   }
 
-  const contentModifiers: ModifierConfig[] = [padding(16, showDragIndicator ? 0 : 16, 16, 0)];
+  // When the drag handle is hidden, the default inset adds top padding so content doesn't crop
+  // against the top edge of the sheet.
+  const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
+    top: showDragIndicator ? 0 : 16,
+    bottom: 0,
+    left: 16,
+    right: 16,
+  });
+  const contentModifiers: ModifierConfig[] = [padding(left, top, right, bottom)];
   if (shouldFillMaxHeight(snapPoints)) contentModifiers.push(fillMaxHeight());
   if (testID) contentModifiers.push(testIDModifier(testID));
 
@@ -71,8 +82,8 @@ export function BottomSheet({
         onDismissRequest={onDismiss}
         showDragHandle={showDragIndicator}
         skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
+        properties={{ shouldDismissOnBackPress }}
         modifiers={modifiers}>
-        {/* When the drag handle is hidden, add top padding so content doesn't crop against the top edge of the sheet. */}
         <Column modifiers={contentModifiers}>{children}</Column>
       </ModalBottomSheet>
     </Host>

package/src/universal/BottomSheet/index.ios.tsx

@@ -9,6 +9,7 @@ import {
 } from '@expo/ui/swift-ui/modifiers';
 
 import type { BottomSheetProps, SnapPoint } from './types';
+import { resolveContentPadding } from './utils';
 
 function snapPointToDetent(snapPoint: SnapPoint): PresentationDetent {
   if (snapPoint === 'half') return 'medium';
@@ -24,10 +25,17 @@ export function BottomSheet({
   snapPoints,
   testID,
   modifiers,
+  contentPadding,
 }: BottomSheetProps) {
+  const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
+    top: 16,
+    bottom: 0,
+    left: 16,
+    right: 16,
+  });
   const presentationModifiers: ModifierConfig[] = [
     frame({ maxWidth: Infinity, alignment: 'topLeading' }),
-    padding({ top: 16, leading: 16, trailing: 16 }),
+    padding({ top, bottom, leading: left, trailing: right }),
     presentationDragIndicator(showDragIndicator ? 'visible' : 'hidden'),
   ];
   if (snapPoints && snapPoints.length > 0) {

package/src/universal/BottomSheet/index.tsx

@@ -2,6 +2,7 @@ import { useColorScheme } from 'react-native';
 import { Drawer } from 'vaul';
 
 import type { BottomSheetProps, SnapPoint } from './types';
+import { resolveContentPadding } from './utils';
 
 // Visually-hidden style for the screen-reader-only Drawer.Title.
 const visuallyHiddenStyle: React.CSSProperties = {
@@ -33,8 +34,15 @@ export function BottomSheet({
   showDragIndicator = true,
   snapPoints,
   testID,
+  contentPadding,
 }: BottomSheetProps) {
   const isDark = useColorScheme() === 'dark';
+  const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
+    top: 16,
+    bottom: 16,
+    left: 16,
+    right: 16,
+  });
   const vaulSnapPoints = snapPoints?.length ? snapPoints.map(snapPointToVaul) : undefined;
   const hasSnapPoints = vaulSnapPoints != null;
 
@@ -60,7 +68,15 @@ export function BottomSheet({
           {/* Radix Dialog requires a title for a11y; render visually-hidden. */}
           <Drawer.Title style={visuallyHiddenStyle}>Bottom sheet</Drawer.Title>
           {showDragIndicator && <Drawer.Handle />}
-          <div style={innerStyle} data-testid={testID}>
+          <div
+            style={{
+              ...innerStyle,
+              paddingTop: top,
+              paddingBottom: bottom,
+              paddingLeft: left,
+              paddingRight: right,
+            }}
+            data-testid={testID}>
             {children}
           </div>
         </Drawer.Content>
@@ -99,7 +115,6 @@ const noSnapPointContentStyle: React.CSSProperties = {
 };
 
 const innerStyle: React.CSSProperties = {
-  padding: 16,
   overflow: 'auto',
 };
 

package/src/universal/BottomSheet/types.ts

@@ -15,6 +15,19 @@ import type { ModifierConfig } from '../../types';
  */
 export type SnapPoint = 'half' | 'full' | { fraction: number } | { height: number };
 
+/**
+ * Padding between a [`BottomSheet`](#bottomsheet) and its content — a single value applied to every
+ * edge, or per-edge values where an edge that is left out is `0`.
+ */
+export type BottomSheetContentPadding =
+  | number
+  | {
+      top?: number;
+      bottom?: number;
+      left?: number;
+      right?: number;
+    };
+
 /**
  * Props for the [`BottomSheet`](#bottomsheet) component, a modal sheet that slides up from the bottom of the screen.
  */
@@ -50,11 +63,31 @@ export interface BottomSheetProps {
    */
   snapPoints?: SnapPoint[];
 
+  /**
+   * Padding between the sheet and [`children`](#children), in dp on Android, points on iOS, and
+   * CSS pixels on web. Pass `0` for content that reaches the sheet's edges.
+   *
+   * When omitted, each platform keeps the inset it applies by default.
+   *
+   * @example `contentPadding={0}` — full-bleed content
+   * @example `contentPadding={{ top: 8, bottom: 24 }}` — no horizontal inset
+   */
+  contentPadding?: BottomSheetContentPadding;
+
   /**
    * Identifier used to locate the component in end-to-end tests.
    */
   testID?: string;
 
+  /**
+   * Whether pressing the Android hardware back button (or back gesture) dismisses the bottom sheet.
+   * When `false`, the back press does not dismiss the sheet (note: the press still does not reach
+   * React Native's `BackHandler`).
+   * @default true
+   * @platform android
+   */
+  shouldDismissOnBackPress?: boolean;
+
   /**
    * Platform-specific modifier escape hatch. Pass an array of modifier configs
    * from `@expo/ui/swift-ui/modifiers` or `@expo/ui/jetpack-compose/modifiers`.

package/src/universal/BottomSheet/utils.ts

@@ -0,0 +1,35 @@
+import type { BottomSheetContentPadding } from './types';
+
+export type ResolvedContentPadding = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+/**
+ * Resolves the `contentPadding` prop against the inset the platform applies when the prop is
+ * omitted. A number applies to every edge, and an edge left out of an object is `0`.
+ */
+export function resolveContentPadding(
+  contentPadding: BottomSheetContentPadding | undefined,
+  platformDefault: ResolvedContentPadding
+): ResolvedContentPadding {
+  if (contentPadding == null) {
+    return platformDefault;
+  }
+  if (typeof contentPadding === 'number') {
+    return {
+      top: contentPadding,
+      bottom: contentPadding,
+      left: contentPadding,
+      right: contentPadding,
+    };
+  }
+  return {
+    top: contentPadding.top ?? 0,
+    bottom: contentPadding.bottom ?? 0,
+    left: contentPadding.left ?? 0,
+    right: contentPadding.right ?? 0,
+  };
+}

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11-sources.jar.md5

@@ -1 +0,0 @@
-ea5f349d6e792bbbab810a13446845b0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11-sources.jar.sha1

@@ -1 +0,0 @@
-ff3268099478cd30644b24d64f739ca622826811

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11-sources.jar.sha256

@@ -1 +0,0 @@
-1c278284d86a0c256802d5c4bc4e8780650313dfca9cd372f11270677138f9fb

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11-sources.jar.sha512

@@ -1 +0,0 @@
-938426b2ed24a041a9cc2ab04e9fe12fac0bdf6556b6daadc5f14907395625122c9cb4d77e2aae78780413995cedc71c97d59f003da45a702af6328b0f4312d6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.aar.md5

@@ -1 +0,0 @@
-12d490bd19c2a43cc53f7f0b0c47a456

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.aar.sha1

@@ -1 +0,0 @@
-89971894361a24c8a79097da2beeb18acde639c8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.aar.sha256

@@ -1 +0,0 @@
-36d7de508b797671c51d35fc849b3ccee089a15a6bb8852a335d0af13338c78f

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.aar.sha512

@@ -1 +0,0 @@
-aaa731134a933ce7a2606140fc2655b2ed4967ca072ed210cd24192ee1316e2aace1d21d5c63660ee67888cdfddf86092f690a5d54767644eb6a40c9e64713f7

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.module.md5

@@ -1 +0,0 @@
-efc8ab6363e08101ebcfee509fe668a1

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.module.sha1

@@ -1 +0,0 @@
-65af783c4afe310e5c6ee00745c0c6e5a239b005

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.module.sha256

@@ -1 +0,0 @@
-bee301bdc67401448d4fa2fad75928fba0f9877e339f3ae2dff2c9b9538450e8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.module.sha512

@@ -1 +0,0 @@
-f5937b1b9255794c9831ba8c1b17efd5137bdeb4b90ac6f7417aa5ab179abea1339efbf406e3dfd38f05809ff1155e3db27b3bbcbee8a25621455dcbbb171a16

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.pom.md5

@@ -1 +0,0 @@
-76c1412551e5f5b8c369291c06e19fbe

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.pom.sha1

@@ -1 +0,0 @@
-62d838ac8861f8481d98555383b063480b6bbb67

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.pom.sha256

@@ -1 +0,0 @@
-2123d3b3693b5a6bb8a826d69eda11510cd012743a02598e45946923ecf2eea6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.11/expo.modules.ui-57.0.11.pom.sha512

@@ -1 +0,0 @@
-a6b49c57e6bc62137877d821131c05618d0ece33ff76b6ea3c9f5b19c6dbd25fdd832548892906ded177a2fd7888ceeb3e851ec8e997c98b09e041159de7e5fe