feat(ios): add dimmedIndex

docs/docs/reference/01-props.mdx

@@ -74,6 +74,24 @@ If set to `false`, the sheet will prevent interactive dismissal via dragging or
 | - | - | - | - |
 | `boolean` | `true` | ✅ | ✅ |
 
+### `dimmed`
+
+Specify whether the sheet background is dimmed. Set to `false` to allow interaction with the background components.
+
+| Type | Default | 🍎 | 🤖 |
+| - | - | - | - |
+| `boolean` | `true` | ✅ | ✅ |
+
+### `dimmedIndex`
+
+The size index that the sheet should start to dim on IOS. When value is `> 0`, `dimmed` is ignored.
+
+Consider using `dimmed` for consistency across platforms.
+
+| Type | Default | 🍎 | 🤖 |
+| - | - | - | - |
+| `number` | `0` | ✅ | ✅ |
+
 ### `grabber`
 
 Shows a grabber (or handle). Native on IOS and styled `View` on Android.

example/src/sheets/InlineSheet.tsx

@@ -47,13 +47,15 @@ export const InlineSheet = forwardRef((props: InlineSheetProps, ref: Ref<InlineS
       <TrueSheet
         ref={sheetRef}
         dimmed={false}
-        sizes={['auto', 'large']}
+        dimmedIndex={1}
+        sizes={['auto', '75%', 'large']}
         blurTint="dark"
         backgroundColor={DARK}
         onDismiss={() => setIsPresented(false)}
         contentContainerStyle={$content}
         {...props}
       >
+        <DemoContent color={BLUE} />
         <DemoContent color={BLUE} />
         <Button text="Dismiss" onPress={dismiss} />
       </TrueSheet>
@@ -69,7 +71,7 @@ const $content: ViewStyle = {
 }
 
 const $backgroundContent: ViewStyle = {
-  padding: SPACING,
+  padding: 24,
   paddingTop: SPACING * 6,
   backgroundColor: BLUE,
 }

ios/TrueSheetView.swift

@@ -256,6 +256,17 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
     }
   }
 
+  @objc
+  func setDimmedIndex(_ index: NSNumber) {
+    viewController.dimmedIndex = index as? Int
+
+    if #available(iOS 15.0, *) {
+      withPresentedSheet { sheet in
+        viewController.setDimmed(for: sheet)
+      }
+    }
+  }
+
   @objc
   func setScrollableHandle(_ tag: NSNumber?) {
     let view = bridge.uiManager.view(forReactTag: tag) as? RCTScrollView

ios/TrueSheetViewController.swift

@@ -44,6 +44,7 @@ class TrueSheetViewController: UIViewController, UISheetPresentationControllerDe
   var cornerRadius: CGFloat?
   var grabber = true
   var dimmed = true
+  var dimmedIndex: Int? = 0
 
   // MARK: - Setup
 
@@ -127,15 +128,21 @@ class TrueSheetViewController: UIViewController, UISheetPresentationControllerDe
     }
   }
 
+  /// Setup dimmed sheet.
+  /// `dimmedIndex` will further customize the dimming behavior.
   @available(iOS 15.0, *)
   func setDimmed(for sheet: UISheetPresentationController) {
-    if dimmed {
+    if dimmed, dimmedIndex == 0 {
       sheet.largestUndimmedDetentIdentifier = nil
     } else {
       sheet.largestUndimmedDetentIdentifier = .large
-      if #available(iOS 16.0, *),
-         let lastIdentifier = sheet.detents.last?.identifier {
-        sheet.largestUndimmedDetentIdentifier = lastIdentifier
+
+      if #available(iOS 16.0, *) {
+        if let dimmedIndex, sheet.detents.indices.contains(dimmedIndex - 1) {
+          sheet.largestUndimmedDetentIdentifier = sheet.detents[dimmedIndex - 1].identifier
+        } else if let lastIdentifier = sheet.detents.last?.identifier {
+          sheet.largestUndimmedDetentIdentifier = lastIdentifier
+        }
       }
     }
   }

ios/TrueSheetViewManager.m

@@ -36,6 +36,7 @@ @interface RCT_EXTERN_REMAP_MODULE (TrueSheetView, TrueSheetViewManager, RCTView
 RCT_EXPORT_VIEW_PROPERTY(grabber, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(dismissible, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(dimmed, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(dimmedIndex, NSNumber)
 
 // Internal properties
 RCT_EXPORT_VIEW_PROPERTY(contentHeight, NSNumber)

src/TrueSheet.tsx

@@ -203,6 +203,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       dismissible = true,
       grabber = true,
       dimmed = true,
+      dimmedIndex,
       grabberProps,
       blurTint,
       cornerRadius,
@@ -226,6 +227,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         footerHeight={this.state.footerHeight}
         grabber={grabber}
         dimmed={dimmed}
+        dimmedIndex={dimmedIndex}
         dismissible={dismissible}
         maxHeight={maxHeight}
         onPresent={this.onPresent}

src/types.ts

@@ -124,14 +124,20 @@ export interface TrueSheetProps extends ViewProps {
    * Specify whether the sheet background is dimmed.
    * Set to `false` to allow interaction with the background components.
    *
+   * @platform android
+   * @platform ios 15+
    * @default true
    */
   dimmed?: boolean
 
   /**
-   * The size index that the sheet should start to dim in IOS.
+   * The size index that the sheet should start to dim on IOS.
+   * When value is `> 0`, `dimmed` is ignored.
    *
-   * @platform ios
+   * Consider using `dimmed` for consistency across platforms.
+   *
+   * @platform ios 16+
+   * @default 0
    */
   dimmedIndex?: number