refactor(ios): use synthetic data for events

Author: lodev09

example/src/components/sheets/BasicSheet.tsx

@@ -50,23 +50,30 @@ export const BasicSheet = forwardRef((props: BasicSheetProps, ref: Ref<TrueSheet
       cornerRadius={12}
       edgeToEdge
       grabberProps={{ color: GRABBER_COLOR }}
-      onDragChange={(e) => {
-        const { index, value } = e.nativeEvent
-        console.log(`drag changed with size of ${value} at index: ${index}`)
-      }}
-      onDragBegin={(e) => {
-        const { index, value } = e.nativeEvent
-        console.log(`drag began with size of ${value} at index: ${index}`)
-      }}
-      onDragEnd={(e) => {
-        const { index, value } = e.nativeEvent
-        console.log(`drag ended with size of ${value} at index: ${index}`)
-      }}
+      onDragChange={(e) =>
+        console.log(
+          `drag changed with size of ${e.nativeEvent.value} at index: ${e.nativeEvent.index}`
+        )
+      }
+      onDragBegin={(e) =>
+        console.log(
+          `drag began with size of ${e.nativeEvent.value} at index: ${e.nativeEvent.index}`
+        )
+      }
+      onDragEnd={(e) =>
+        console.log(
+          `drag ended with size of ${e.nativeEvent.value} at index: ${e.nativeEvent.index}`
+        )
+      }
       onDismiss={() => console.log('Basic sheet dismissed!')}
-      onPresent={({ index, value }) =>
-        console.log(`Basic sheet presented with size of ${value} at index: ${index}`)
+      onPresent={(e) =>
+        console.log(
+          `Basic sheet presented with size of ${e.nativeEvent.value} at index: ${e.nativeEvent.index}`
+        )
+      }
+      onSizeChange={(e) =>
+        console.log(`Resized to:`, e.nativeEvent.value, 'at index:', e.nativeEvent.index)
       }
-      onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
       FooterComponent={<Footer />}
       {...props}
     >

example/src/components/sheets/GestureSheet.tsx

@@ -56,10 +56,14 @@ export const GestureSheet = forwardRef((props: GestureSheetProps, ref: Ref<TrueS
       cornerRadius={12}
       grabberProps={{ color: GRABBER_COLOR }}
       onDismiss={() => console.log('Gesture sheet dismissed!')}
-      onPresent={({ index, value }) =>
-        console.log(`Gesture sheet presented with size of ${value} at index: ${index}`)
+      onPresent={(e) =>
+        console.log(
+          `Gesture sheet presented with size of ${e.nativeEvent.value} at index: ${e.nativeEvent.index}`
+        )
+      }
+      onSizeChange={(e) =>
+        console.log(`Resized to:`, e.nativeEvent.value, 'at index:', e.nativeEvent.index)
       }
-      onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
       FooterComponent={<Footer />}
       {...props}
     >

example/src/components/sheets/PromptSheet.tsx

@@ -45,10 +45,14 @@ export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref<TrueShe
       cornerRadius={12}
       grabberProps={{ color: GRABBER_COLOR }}
       onDismiss={handleDismiss}
-      onPresent={({ index, value }) =>
-        console.log(`Sheet prompt presented with size of ${value} at index: ${index}`)
+      onPresent={(e) =>
+        console.log(
+          `Sheet prompt presented with size of ${e.nativeEvent.value} at index: ${e.nativeEvent.index}`
+        )
+      }
+      onSizeChange={(e) =>
+        console.log(`Resized to:`, e.nativeEvent.value, 'at index:', e.nativeEvent.index)
       }
-      onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
       FooterComponent={<Footer />}
       {...props}
     >

example/src/screens/MapScreen.tsx

@@ -95,7 +95,7 @@ export const MapScreen = () => {
         dismissible={false}
         cornerRadius={12}
         initialIndex={1}
-        onPresent={handlePresent}
+        onPresent={(e) => handlePresent(e.nativeEvent)}
         onDragChange={dragChangeHandler}
         onDragEnd={(e) => handleDragEnd(e.nativeEvent)}
         // initialIndexAnimated={false}

ios/TrueSheetView.swift

@@ -146,7 +146,7 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
         present(at: initialIndex, promise: nil, animated: initialIndexAnimated)
       }
 
-      onMount?(nil)
+      dispatchEvent(name: "onMount", data: nil)
     }
   }
 
@@ -174,19 +174,19 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
   func viewControllerDidChangeWidth(_ width: CGFloat) {
     // We only pass width to JS since height is handled by the constraints
-    onContainerSizeChange?(["width": width])
+    dispatchEvent(name: "onContainerSizeChange", data: ["width": width])
   }
 
   func viewControllerDidDrag(_ state: UIGestureRecognizer.State, _ height: CGFloat) {
     let sizeInfo = SizeInfo(index: activeIndex ?? 0, value: height)
 
     switch state {
     case .began:
-      eventDispatcher?.send(TrueSheetEvent(viewTag: reactTag, name: "onDragBegin", data: sizeInfoData(from: sizeInfo)))
+      dispatchEvent(name: "onDragBegin", data: sizeInfoData(from: sizeInfo))
     case .changed:
-      eventDispatcher?.send(TrueSheetEvent(viewTag: reactTag, name: "onDragChange", data: sizeInfoData(from: sizeInfo)))
+      dispatchEvent(name: "onDragChange", data: sizeInfoData(from: sizeInfo))
     case .ended, .cancelled:
-      eventDispatcher?.send(TrueSheetEvent(viewTag: reactTag, name: "onDragEnd", data: sizeInfoData(from: sizeInfo)))
+      dispatchEvent(name: "onDragEnd", data: sizeInfoData(from: sizeInfo))
     default:
       Logger.info("Drag state is not supported")
     }
@@ -199,16 +199,15 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
   func viewControllerDidDismiss() {
     isPresented = false
     activeIndex = nil
-
-    onDismiss?(nil)
+    dispatchEvent(name: "onDismiss", data: nil)
   }
 
   func viewControllerDidChangeSize(_ sizeInfo: SizeInfo?) {
     guard let sizeInfo else { return }
 
     if sizeInfo.index != activeIndex {
       activeIndex = sizeInfo.index
-      onSizeChange?(sizeInfoData(from: sizeInfo))
+      dispatchEvent(name: "onSizeChange", data: sizeInfoData(from: sizeInfo))
     }
   }
 
@@ -389,6 +388,10 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
     }
   }
 
+  func dispatchEvent(name: String, data: [String: Any]?) {
+    eventDispatcher?.send(TrueSheetEvent(viewTag: reactTag, name: name, data: data))
+  }
+
   func dismiss(promise: Promise) {
     guard isPresented else {
       promise.resolve(nil)
@@ -429,7 +432,7 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
           }
 
           let data = self.sizeInfoData(from: self.viewController.currentSizeInfo)
-          self.onPresent?(data)
+          self.dispatchEvent(name: "onPresent", data: data)
           promise?.resolve(nil)
         }
       }

src/TrueSheet.tsx

@@ -14,10 +14,11 @@ import {
 
 import type {
   TrueSheetProps,
-  SizeInfo,
   DragBeginEvent,
   DragChangeEvent,
   DragEndEvent,
+  SizeChangeEvent,
+  PresentEvent,
 } from './TrueSheet.types'
 import { TrueSheetModule } from './TrueSheetModule'
 import { TrueSheetGrabber } from './TrueSheetGrabber'
@@ -30,17 +31,13 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n'
 
-type ContainerSizeChangeEvent = NativeSyntheticEvent<{ width: number; height: number }>
-type SizeChangeEvent = NativeSyntheticEvent<SizeInfo>
+export type ContainerSizeChangeEvent = NativeSyntheticEvent<{ width: number; height: number }>
 
-interface TrueSheetNativeViewProps
-  extends Omit<TrueSheetProps, 'onPresent' | 'onSizeChange' | 'backgroundColor'> {
+interface TrueSheetNativeViewProps extends Omit<TrueSheetProps, 'backgroundColor'> {
   contentHeight?: number
   footerHeight?: number
   background?: ProcessedColorValue | null
   scrollableHandle: number | null
-  onPresent: (event: SizeChangeEvent) => void
-  onSizeChange: (event: SizeChangeEvent) => void
   onContainerSizeChange: (event: ContainerSizeChangeEvent) => void
 }
 
@@ -159,7 +156,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   }
 
   private onSizeChange(event: SizeChangeEvent): void {
-    this.props.onSizeChange?.(event.nativeEvent)
+    this.props.onSizeChange?.(event)
   }
 
   private onContainerSizeChange(event: ContainerSizeChangeEvent): void {
@@ -169,8 +166,8 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     })
   }
 
-  private onPresent(event: SizeChangeEvent): void {
-    this.props.onPresent?.(event.nativeEvent)
+  private onPresent(event: PresentEvent): void {
+    this.props.onPresent?.(event)
   }
 
   private onFooterLayout(event: LayoutChangeEvent): void {

src/TrueSheet.types.ts

@@ -14,6 +14,8 @@ export interface SizeInfo {
   value: number
 }
 
+export type SizeChangeEvent = NativeSyntheticEvent<SizeInfo>
+export type PresentEvent = NativeSyntheticEvent<SizeInfo>
 export type DragBeginEvent = NativeSyntheticEvent<SizeInfo>
 export type DragChangeEvent = NativeSyntheticEvent<SizeInfo>
 export type DragEndEvent = NativeSyntheticEvent<SizeInfo>
@@ -257,7 +259,7 @@ export interface TrueSheetProps extends ViewProps {
    * Called when the Sheet has been presented.
    * Comes with the size info.
    */
-  onPresent?: (info: SizeInfo) => void
+  onPresent?: (event: PresentEvent) => void
 
   /**
    * Called when the Sheet has been dismissed
@@ -268,7 +270,7 @@ export interface TrueSheetProps extends ViewProps {
    * Called when the size of the sheet has changed.
    * Either by dragging or programatically.
    */
-  onSizeChange?: (info: SizeInfo) => void
+  onSizeChange?: (event: SizeChangeEvent) => void
 
   /**
    * Called when the sheet has began dragging.