diff --git a/modules/bottom-sheet/ios/BottomSheetModule.swift b/modules/bottom-sheet/ios/BottomSheetModule.swift
index 579608e75b..4866c41918 100644
--- a/modules/bottom-sheet/ios/BottomSheetModule.swift
+++ b/modules/bottom-sheet/ios/BottomSheetModule.swift
@@ -23,6 +23,10 @@ public class BottomSheetModule: Module {
view.updateLayout()
}
+ Prop("containerBackgroundColor") { (view: SheetView, prop: UIColor) in
+ view.containerBackgroundColor = prop
+ }
+
Prop("cornerRadius") { (view: SheetView, prop: Float) in
view.cornerRadius = CGFloat(prop)
}
diff --git a/modules/bottom-sheet/ios/BottomSheetScrollView.swift b/modules/bottom-sheet/ios/BottomSheetScrollView.swift
new file mode 100644
index 0000000000..9c0fe0f29f
--- /dev/null
+++ b/modules/bottom-sheet/ios/BottomSheetScrollView.swift
@@ -0,0 +1,35 @@
+//
+// BottomSheetScrollView.swift
+// Pods
+//
+// Created by Hailey on 10/9/24.
+//
+
+class BottomSheetScrollView: UIScrollView, UIScrollViewDelegate {
+ private var previousHeight: CGFloat?
+
+ init() {
+ super.init(frame: .zero)
+ if let window = Util.getWindow() {
+ self.frame = window.bounds
+ self.contentInset = UIEdgeInsets(top: 0,
+ left: 0,
+ bottom: window.safeAreaInsets.bottom,
+ right: 0)
+ }
+ }
+
+ required init?(coder: NSCoder) {
+ fatalError("init(coder:) has not been implemented")
+ }
+
+ override func layoutSubviews() {
+ super.layoutSubviews()
+
+ if let height = self.subviews.first?.frame.size.height,
+ self.previousHeight != height,
+ let window = self.window {
+ self.contentSize = CGSize(width: window.bounds.width, height: height + window.safeAreaInsets.bottom)
+ }
+ }
+}
diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index fe487dd05e..6c37848958 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -5,9 +5,14 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
// Views
private var sheetVc: SheetViewController!
private var innerView: UIView?
+ private var contentHeight: CGFloat? {
+ get {
+ self.innerView?.frame.height
+ }
+ }
// Scroll view
- private var scrollView: RCTScrollView?
+ private var scrollView: BottomSheetScrollView!
// Touch handler
private var touchHandler: RCTTouchHandler?
@@ -29,6 +34,11 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
// React view props
var preventDismiss = false
var preventExpansion = false
+ var containerBackgroundColor: UIColor? {
+ didSet {
+ self.scrollView.backgroundColor = containerBackgroundColor
+ }
+ }
var cornerRadius: CGFloat?
var minHeight = 0.0
var maxHeight: CGFloat = Util.getScreenHeight() {
@@ -79,11 +89,16 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
required init (appContext: AppContext? = nil) {
super.init(appContext: appContext)
+ self.scrollView = BottomSheetScrollView()
+
self.sheetVc = SheetViewController()
if let sheet = self.sheetVc.sheetPresentationController {
sheet.delegate = self
}
+ self.sheetVc.view.addSubview(self.scrollView)
+ self.touchHandler = RCTTouchHandler(bridge: appContext?.reactBridge)
+
SheetManager.shared.add(self)
}
@@ -91,36 +106,23 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
self.destroy()
}
- // We don't want this view to actually get added to the tree, so we'll simply store it for adding
- // to the SheetViewController
override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
- let touchHandler = RCTTouchHandler(bridge: self.appContext?.reactBridge)
- touchHandler?.attach(to: subview)
-
- self.touchHandler = touchHandler
+ self.touchHandler?.attach(to: subview)
+ self.scrollView.addSubview(subview)
self.innerView = subview
+ self.present()
}
- // We'll grab the content height from here so we know the initial detent to set
override func layoutSubviews() {
super.layoutSubviews()
-
- guard let innerView = self.innerView else {
- return
- }
-
- if innerView.subviews.count != 1 {
- return
- }
-
self.present()
}
private func destroy() {
- self.isClosing = false
- self.isOpen = false
self.touchHandler?.detach(from: self.innerView)
self.touchHandler = nil
+ self.isClosing = false
+ self.isOpen = false
SheetManager.shared.remove(self)
}
@@ -130,13 +132,11 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
guard !self.isOpen,
!self.isOpening,
!self.isClosing,
- let innerView = self.innerView,
- let contentHeight = innerView.subviews.first?.frame.height,
+ let contentHeight = self.contentHeight,
let rvc = self.reactViewController() else {
return
}
- self.sheetVc.view.addSubview(innerView)
self.sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
if let sheet = sheetVc.sheetPresentationController {
sheet.preferredCornerRadius = self.cornerRadius
@@ -153,7 +153,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
func updateLayout() {
if self.prevLayoutDetentIdentifier == self.selectedDetentIdentifier,
- let contentHeight = self.innerView?.subviews.first?.frame.size.height {
+ let contentHeight = self.contentHeight {
self.sheetVc.updateDetents(contentHeight: self.clampHeight(contentHeight),
preventExpansion: self.preventExpansion)
self.selectedDetentIdentifier = self.sheetVc.getCurrentDetentIdentifier()
diff --git a/modules/bottom-sheet/ios/Util.swift b/modules/bottom-sheet/ios/Util.swift
index b098c15080..b4c43adc38 100644
--- a/modules/bottom-sheet/ios/Util.swift
+++ b/modules/bottom-sheet/ios/Util.swift
@@ -6,9 +6,16 @@
//
class Util {
- static func getScreenHeight() -> CGFloat {
+ static func getWindow() -> UIWindow? {
if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
- let window = windowScene.windows.first {
+ let window = windowScene.windows.first {
+ return window
+ }
+ return nil
+ }
+
+ static func getScreenHeight() -> CGFloat {
+ if let window = Self.getWindow() {
let safeAreaInsets = window.safeAreaInsets
let fullScreenHeight = UIScreen.main.bounds.height
return fullScreenHeight - (safeAreaInsets.top + safeAreaInsets.bottom)
diff --git a/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx b/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx
index 030df50f28..0d0afe3536 100644
--- a/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx
+++ b/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx
@@ -65,7 +65,7 @@ export class BottomSheetNativeComponent extends React.Component<
}
render() {
- const {children, backgroundColor, ...rest} = this.props
+ const {children, ...rest} = this.props
const cornerRadius = rest.cornerRadius ?? 0
if (!this.state.open) {
@@ -81,23 +81,20 @@ export class BottomSheetNativeComponent extends React.Component<
position: 'absolute',
height: screenHeight,
width: '100%',
- }}
- containerBackgroundColor={backgroundColor}>
-
-
- {children}
-
-
+ }}>
+ {/**/}
+ {children}
+ {/**/}
)
}
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index a27271168c..659e4e31d5 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -3,6 +3,7 @@ import {
NativeScrollEvent,
NativeSyntheticEvent,
Pressable,
+ processColor,
ScrollView,
StyleProp,
TextInput,
@@ -156,11 +157,11 @@ export function Outer({
+ disableDrag={disableDrag}
+ containerBackgroundColor={processColor(t.atoms.bg.backgroundColor)}>
{children}
@@ -214,6 +215,8 @@ export const ScrollableInner = React.forwardRef(
}
}
+ return children
+
return (