[Sheets] [Pt. 12] Add event for selected snap point change (#5584)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>

modules/bottom-sheet/index.ts

@@ -1,4 +1,13 @@
-import {BottomSheetState, BottomSheetViewProps} from './src/BottomSheet.types'
+import {
+  BottomSheetSnapPoint,
+  BottomSheetState,
+  BottomSheetViewProps,
+} from './src/BottomSheet.types'
 import {BottomSheetView} from './src/BottomSheetView'
 
-export {type BottomSheetState, BottomSheetView, type BottomSheetViewProps}
+export {
+  BottomSheetSnapPoint,
+  type BottomSheetState,
+  BottomSheetView,
+  type BottomSheetViewProps,
+}

modules/bottom-sheet/ios/BottomSheetModule.swift

@@ -10,8 +10,9 @@ public class BottomSheetModule: Module {
 
     View(SheetView.self) {
       Events([
+        "onAttemptDismiss",
+        "onSnapPointChange",
         "onStateChange",
-        "onAttemptDismiss"
       ])
 
       AsyncFunction("dismiss") { (view: SheetView) in
@@ -26,10 +27,6 @@ public class BottomSheetModule: Module {
         view.cornerRadius = CGFloat(prop)
       }
 
-      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
-        view.preventDismiss = prop
-      }
-
       Prop("minHeight") { (view: SheetView, prop: Double) in
         view.minHeight = prop
       }
@@ -38,6 +35,10 @@ public class BottomSheetModule: Module {
         view.maxHeight = prop
       }
 
+      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
+        view.preventDismiss = prop
+      }
+
       Prop("preventExpansion") { (view: SheetView, prop: Bool) in
         view.preventExpansion = prop
       }

modules/bottom-sheet/ios/SheetView.swift

@@ -7,8 +7,9 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   private var innerView: UIView?
 
   // Events
-  private let onStateChange = EventDispatcher()
   private let onAttemptDismiss = EventDispatcher()
+  private let onSnapPointChange = EventDispatcher()
+  private let onStateChange = EventDispatcher()
 
   // Open event firing
   private var isOpen: Bool = false {
@@ -51,6 +52,19 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
       }
     }
   }
+  private var selectedDetentIdentifier: UISheetPresentationController.Detent.Identifier? {
+    didSet {
+      if selectedDetentIdentifier == .large {
+        onSnapPointChange([
+          "snapPoint": 2
+        ])
+      } else {
+        onSnapPointChange([
+          "snapPoint": 1
+        ])
+      }
+    }
+  }
 
   // MARK: - Lifecycle
 
@@ -103,11 +117,12 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
     }
 
     let sheetVc = SheetViewController()
+    sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
     if let sheet = sheetVc.sheetPresentationController {
       sheet.delegate = self
       sheet.preferredCornerRadius = self.cornerRadius
+      self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
     }
-    sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
     sheetVc.view.addSubview(innerView)
 
     self.sheetVc = sheetVc
@@ -158,4 +173,8 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
     self.destroy()
   }
+
+  func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) {
+    self.selectedDetentIdentifier = sheetPresentationController.selectedDetentIdentifier
+  }
 }

modules/bottom-sheet/src/BottomSheet.types.ts

@@ -3,6 +3,12 @@ import {ColorValue, NativeSyntheticEvent} from 'react-native'
 
 export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening'
 
+export enum BottomSheetSnapPoint {
+  Hidden,
+  Partial,
+  Full,
+}
+
 export interface BottomSheetViewProps {
   children: React.ReactNode
   cornerRadius?: number
@@ -15,6 +21,10 @@ export interface BottomSheetViewProps {
   minHeight?: number
   maxHeight?: number
 
+  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
+  onSnapPointChange?: (
+    event: NativeSyntheticEvent<{snapPoint: BottomSheetSnapPoint}>,
+  ) => void
   onStateChange?: (
     event: NativeSyntheticEvent<{state: BottomSheetState}>,
   ) => void