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 (