@rn-tools/sheets 0.1.2 → 0.1.4

package/README.md

@@ -2,7 +2,11 @@
 
 An expo module for rendering native bottom sheet components in iOS and Android. 
 
-Uses SwiftUI's sheet API and Android's BottomSheetDialog component to render React Native children in a modal bottom sheet
+Uses SwiftUI's sheet API and Android's BottomSheetDialog to render React Native children in a modal bottom sheet
+
+
+https://github.com/user-attachments/assets/426c77e6-74c6-4748-8010-477267fa9433
+
 
 ## Motivation
 
@@ -12,8 +16,24 @@ Uses SwiftUI's sheet API and Android's BottomSheetDialog component to render Rea
 
 ## Installation
 
-`yarn add @rntools/sheets`
+`yarn add @rntools/sheets expo-build-properties`
+
+Update your minimum iOS deployment target to 16 in `app.json`: 
+
+```json
+{
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+         "ios": {
+            "deploymentTarget": "16.0"
+          }
+        }
+      ]
+}
 
+```
 
 As with most non-core expo modules this requires a new native build
 
@@ -28,7 +48,7 @@ export default function App() {
 
   return (
     <View className="flex-1">
-       <Button title="Show sheet" onPress={() => setIsOpen(!isOpen)} />
+       <Button title="Show sheet" onPress={() => setIsOpen(true)} />
 
        <BottomSheet
           isOpen={isOpen}

package/android/src/main/java/expo/modules/sheets/RNToolsSheetsView.kt

@@ -89,9 +89,9 @@ class RNToolsSheetsView(context: Context, appContext: AppContext) : ExpoView(con
           try {
             Color.parseColor(it)  // Convert hex string to Color
           } catch (e: IllegalArgumentException) {
-            Color.TRANSPARENT
+            Color.WHITE
           }
-        } ?: Color.TRANSPARENT
+        } ?: Color.WHITE
 
         val drawable = GradientDrawable().apply {
           setColor(backgroundColor)

package/ios/RNToolsSheets.podspec

@@ -1,6 +1,8 @@
 require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+new_arch_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+
 
 Pod::Spec.new do |s|
   s.name           = 'RNToolsSheets'
@@ -11,18 +13,20 @@ Pod::Spec.new do |s|
   s.author         = package['author']
   s.homepage       = package['homepage']
   s.platforms      = {
-    :ios => '16.4',
-    :tvos => '16.4'
+    :ios => '16.0',
+    :tvos => '16.0'
   }
   s.swift_version  = '5.4'
   s.source         = { git: 'https://github.com/ajsmth/rn-tools' }
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'
+  s.public_header_files = 'Sources/RNTSurfaceTouchHandlerWrapper.h'
 
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',
+    'OTHER_SWIFT_FLAGS' => new_arch_enabled ? '-DRCT_NEW_ARCH_ENABLED' : ''
   }
 
   s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"

package/ios/RNToolsSheetsView.swift

@@ -1,4 +1,5 @@
 import ExpoModulesCore
+import React
 import SwiftUI
 
 public class SheetProps: ObservableObject {
@@ -11,7 +12,6 @@ public class SheetProps: ObservableObject {
     @Published var grabberVisible: Bool = true
     @Published var backgroundColor: String? = nil
     @Published var cornerRadius: Float? = nil
-
 }
 
 struct SheetAppearance: Record {
@@ -20,7 +20,7 @@ struct SheetAppearance: Record {
 
     @Field
     var backgroundColor: String?
-    
+
     @Field
     var cornerRadius: Float?
 }
@@ -32,50 +32,84 @@ public class RNToolsSheetsView: ExpoView {
 
     var touchHandler: RCTTouchHandler?
 
+    private lazy var sheetVC = SheetInternalViewController()
+
     lazy var hostingController = UIHostingController(
         rootView: ContentView(
-            props: props, onDismiss: onDismiss, onStateChange: onStateChange))
+            props: props, sheetVC: sheetVC, onDismiss: onDismiss,
+            onStateChange: onStateChange))
 
     required init(appContext: AppContext? = nil) {
         super.init(appContext: appContext)
 
         if let bridge = appContext?.reactBridge {
-            touchHandler = RCTTouchHandler(bridge: bridge)
+            sheetVC.bridge = bridge
         }
 
         hostingController.view.autoresizingMask = [
             .flexibleWidth, .flexibleHeight,
         ]
         hostingController.view.backgroundColor = UIColor.clear
-        hostingController.rootView = ContentView(
-            props: props, onDismiss: onDismiss, onStateChange: onStateChange)
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        hostingController.view.frame = bounds
+    }
+
+    public override func didMoveToSuperview() {
+        super.didMoveToSuperview()
+        let parentViewController = findParentViewControllerOrNil()
 
+        parentViewController.apply {
+            $0.addChild(hostingController)
+        }
+
+        hostingController.view.layer.removeAllAnimations()
+        hostingController.view.frame = bounds
         addSubview(hostingController.view)
+        parentViewController.apply {
+            hostingController.didMove(toParent: $0)
+        }
     }
 
     public override func reactSubviews() -> [UIView]! {
         return []
     }
 
-    public override func insertReactSubview(_ subview: UIView!, at atIndex: Int)
-    {
-        super.insertReactSubview(subview, at: atIndex)
-        props.children.insert(subview, at: atIndex)
-        if atIndex == 0 {
-            touchHandler?.attach(to: subview)
+    #if RCT_NEW_ARCH_ENABLED
+        public override func mountChildComponentView(
+            _ childComponentView: UIView,
+            index: Int
+        ) {
+            sheetVC.insertChild(childComponentView, at: index)
         }
-    }
 
-    public override func removeReactSubview(_ subview: UIView!) {
-        super.removeReactSubview(subview)
-        if let index = props.children.firstIndex(of: subview) {
-            props.children.remove(at: index)
+        public override func unmountChildComponentView(
+            _ childComponentView: UIView,
+            index: Int
+        ) {
+            childComponentView.removeFromSuperview()
         }
-    }
+
+    #else
+        public override func insertReactSubview(
+            _ subview: UIView!, at atIndex: Int
+        ) {
+            sheetVC.insertChild(subview, at: atIndex)
+        }
+
+        public override func removeReactSubview(_ subview: UIView!) {
+            sheetVC.removeChild(subview)
+        }
+
+    #endif
+
 }
 
 struct ContentView: View {
     @ObservedObject var props: SheetProps
+    var sheetVC: SheetInternalViewController
     var onDismiss: EventDispatcher
     var onStateChange: EventDispatcher
 
@@ -119,101 +153,168 @@ struct ContentView: View {
                     onStateChange(["type": "HIDDEN"])
                 }
             ) {
-                VStack {
-                    ForEach(Array(props.children.enumerated()), id: \.offset) {
-                        index, child in
-                        RepresentableView(view: child)
-                    }
-                }
-                .background(
-                    GeometryReader { geometry in
-                        Color.clear
-                            .onChange(of: geometry.size.height) { newHeight in
-                                if abs(newHeight - lastHeight) > 2 {
-                                    if !isDragging {
-                                        isDragging = true
-                                        onStateChange(["type": "DRAGGING"])
-                                    }
+                SheetInternalVCRepresentable(controller: sheetVC)
+                    .background(
+                        GeometryReader { geometry in
+                            Color.clear
+                                .onChange(of: geometry.size.height) {
+                                    newHeight in
+                                    if abs(newHeight - lastHeight) > 2 {
+                                        if !isDragging {
+                                            isDragging = true
+                                            onStateChange(["type": "DRAGGING"])
+                                        }
 
-                                    settleTimer?.invalidate()
-                                    settleTimer = Timer.scheduledTimer(
-                                        withTimeInterval: 0.15, repeats: false
-                                    ) { _ in
-                                        isDragging = false
-                                        onStateChange(["type": "SETTLING"])
-
-                                        DispatchQueue.main.asyncAfter(
-                                            deadline: .now() + 0.15
-                                        ) {
-                                            let idx = upperSnapIndex(
-                                                for: newHeight,
-                                                snapPoints: props.snapPoints
-                                            )
-                                            onStateChange([
-                                                "type": "OPEN",
-                                                "payload": ["index": idx],
-                                            ])
+                                        settleTimer?.invalidate()
+                                        settleTimer = Timer.scheduledTimer(
+                                            withTimeInterval: 0.15,
+                                            repeats: false
+                                        ) { _ in
+                                            isDragging = false
+                                            onStateChange(["type": "SETTLING"])
+
+                                            DispatchQueue.main.asyncAfter(
+                                                deadline: .now() + 0.15
+                                            ) {
+                                                let idx = upperSnapIndex(
+                                                    for: newHeight,
+                                                    snapPoints: props.snapPoints
+                                                )
+                                                onStateChange([
+                                                    "type": "OPEN",
+                                                    "payload": ["index": idx],
+                                                ])
+                                            }
                                         }
                                     }
-                                }
 
-                                lastHeight = newHeight
-                            }
+                                    lastHeight = newHeight
+                                }
+                        }
+                    )
+                    .presentationBackground16_4(
+                        props.backgroundColor != nil
+                            ? Color(hex: props.backgroundColor!) : Color.white
+                    )
+                    .presentationCornerRadius16_4(
+                        props.cornerRadius.map { CGFloat($0) }
+                    )
+                    .presentationDragIndicator(
+                        props.grabberVisible ? .visible : .hidden
+                    )
+                    .presentationDetents(
+                        Set(detents),
+                        selection: $selectedDetent
+                    )
+          
+                    .onAppear {
+                        selectedDetent = detent(for: props.openToIndex)
                     }
-                )
-                .presentationBackground(props.backgroundColor != nil ? Color(hex: props.backgroundColor!) : Color.white)
-                .presentationDragIndicator(
-                    props.grabberVisible ? .visible : .hidden
-                )
-                .presentationDetents(
-                    Set(detents),
-                    selection: $selectedDetent
-                )
-                .presentationCornerRadius(props.cornerRadius.map { CGFloat($0) })
-                .onAppear {
-                    selectedDetent = detent(for: props.openToIndex)
-                }
             }
     }
 }
 
-struct RepresentableView: UIViewRepresentable {
-    var view: UIView
+struct SheetInternalVCRepresentable: UIViewControllerRepresentable {
+    let controller: SheetInternalViewController
 
-    func makeUIView(context: Context) -> UIView {
-        let containerView = UIView()
-        containerView.backgroundColor = .clear
+    func makeUIViewController(context: Context) -> SheetInternalViewController {
+        controller
+    }
+    func updateUIViewController(
+        _ uiViewController: SheetInternalViewController,
+        context: Context
+    ) {}
+}
 
-        view.translatesAutoresizingMaskIntoConstraints = false
-        containerView.addSubview(view)
+final class SheetInternalViewController: UIViewController {
+    var bridge: RCTBridge? {
+        didSet {
+            touchHandler = RCTTouchHandler(bridge: bridge)
+            self.touchHandler?.attach(to: self.view)
+        }
+    }
+    var surfaceTouchHandler = RNTSurfaceTouchHandlerWrapper()
+    var touchHandler: RCTTouchHandler?
+
+    init() {
+        super.init(nibName: nil, bundle: nil)
+        view.backgroundColor = .clear
+    }
+
+    override func loadView() {
+        self.view = UIView()
+
+        self.surfaceTouchHandler.attach(to: self.view)
+    }
+
+    @available(*, unavailable) required init?(coder: NSCoder) { fatalError() }
 
-        NSLayoutConstraint.activate([
-            view.topAnchor.constraint(equalTo: containerView.topAnchor),
-            view.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
-            view.trailingAnchor.constraint(
-                equalTo: containerView.trailingAnchor),
-            view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
-        ])
+    func insertChild(_ child: UIView, at index: Int) {
+        view.insertSubview(child, at: index)
 
-        return containerView
     }
 
-    func updateUIView(_ uiView: UIView, context: Context) {}
+    func removeChild(_ child: UIView) {
+        child.removeFromSuperview()
+    }
 }
 
+extension Optional {
+    func apply(_ fn: (Wrapped) -> Void) {
+        if case let .some(val) = self {
+            fn(val)
+        }
+    }
+}
+
+extension UIView {
+    // Walks the responder chain to find the parent UIViewController
+    // or null if not in a heirarchy yet
+    func findParentViewControllerOrNil() -> UIViewController? {
+        var nextResponder: UIResponder? = next
+        while nextResponder != nil && nextResponder as? UIViewController == nil
+        {
+            nextResponder = nextResponder?.next
+        }
+
+        return nextResponder as? UIViewController
+    }
+}
 
 extension Color {
     init(hex: String) {
         var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
         hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")
-        
+
         var rgb: UInt64 = 0
         Scanner(string: hexSanitized).scanHexInt64(&rgb)
-        
+
         let red = Double((rgb & 0xFF0000) >> 16) / 255.0
         let green = Double((rgb & 0x00FF00) >> 8) / 255.0
         let blue = Double(rgb & 0x0000FF) / 255.0
-        
+
         self.init(red: red, green: green, blue: blue)
     }
 }
+
+
+extension View {
+    @ViewBuilder
+    func presentationBackground16_4(_ color: Color?) -> some View {
+        if #available(iOS 16.4, *) {
+            self.presentationBackground(color ?? .white)
+        } else {
+            self
+        }
+    }
+
+    @ViewBuilder
+    func presentationCornerRadius16_4(_ radius: CGFloat?) -> some View {
+        if #available(iOS 16.4, *) {
+            self.presentationCornerRadius(radius)
+        } else {
+            self
+        }
+    }
+}
+

package/ios/Sources/RNTSurfaceTouchHandlerWrapper.h

@@ -0,0 +1,11 @@
+// RNTSurfaceTouchHandlerWrapper.h  (PUBLIC)
+#import <Foundation/Foundation.h>
+@class UIView;
+
+NS_ASSUME_NONNULL_BEGIN
+@interface RNTSurfaceTouchHandlerWrapper : NSObject
+- (void)attachToView:(UIView *)view;
+@end
+NS_ASSUME_NONNULL_END
+
+

package/ios/Sources/RNTSurfaceTouchHandlerWrapper.mm

@@ -0,0 +1,43 @@
+// RNTSurfaceTouchHandlerWrapper.mm  (Objective‑C++, .mm extension!)
+
+
+#import "RNTSurfaceTouchHandlerWrapper.h"
+#if RCT_NEW_ARCH_ENABLED
+#import <React/RCTSurfaceTouchHandler.h>
+
+
+@implementation RNTSurfaceTouchHandlerWrapper {
+    
+  RCTSurfaceTouchHandler *_handler;
+}
+
+- (instancetype)init {
+  if (self = [super init]) {
+    _handler = [[RCTSurfaceTouchHandler alloc] init];
+  }
+  return self;
+}
+
+- (void)attachToView:(UIView *)view {
+  [_handler attachToView:view];
+}
+@end
+#else
+
+@implementation RNTSurfaceTouchHandlerWrapper {
+}
+
+- (instancetype)init {
+  if (self = [super init]) {
+  }
+  return self;
+}
+
+- (void)attachToView:(UIView *)view {
+}
+@end
+
+#endif
+
+
+

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@rn-tools/sheets",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "My new module",
   "main": "src/index.ts",
-  "private": false,
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",