@lodev09/react-native-true-sheet 3.0.0-beta.8 → 3.0.0

package/src/TrueSheet.tsx

@@ -20,6 +20,10 @@ import type {
   DidDismissEvent,
   WillDismissEvent,
   MountEvent,
+  WillFocusEvent,
+  DidFocusEvent,
+  WillBlurEvent,
+  DidBlurEvent,
 } from './TrueSheet.types';
 import TrueSheetViewNativeComponent from './fabric/TrueSheetViewNativeComponent';
 import TrueSheetContainerViewNativeComponent from './fabric/TrueSheetContainerViewNativeComponent';
@@ -29,7 +33,7 @@ import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNati
 
 import TrueSheetModule from './specs/NativeTrueSheetModule';
 
-import { Platform, processColor, StyleSheet, findNodeHandle } from 'react-native';
+import { Platform, processColor, StyleSheet, findNodeHandle, View } from 'react-native';
 
 const LINKING_ERROR =
   `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` +
@@ -38,6 +42,9 @@ const LINKING_ERROR =
   '- You are not using Expo Go\n' +
   '- You are using the new architecture (Fabric)\n';
 
+// Material Design 3 minimum touch target
+const ANDROID_HITBOX_HEIGHT = 48;
+
 if (!TrueSheetModule) {
   throw new Error(LINKING_ERROR);
 }
@@ -88,6 +95,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.onDragChange = this.onDragChange.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
     this.onPositionChange = this.onPositionChange.bind(this);
+    this.onWillFocus = this.onWillFocus.bind(this);
+    this.onDidFocus = this.onDidFocus.bind(this);
+    this.onWillBlur = this.onWillBlur.bind(this);
+    this.onDidBlur = this.onDidBlur.bind(this);
   }
 
   private validateDetents(): void {
@@ -250,6 +261,22 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.props.onPositionChange?.(event);
   }
 
+  private onWillFocus(event: WillFocusEvent): void {
+    this.props.onWillFocus?.(event);
+  }
+
+  private onDidFocus(event: DidFocusEvent): void {
+    this.props.onDidFocus?.(event);
+  }
+
+  private onWillBlur(event: WillBlurEvent): void {
+    this.props.onWillBlur?.(event);
+  }
+
+  private onDidBlur(event: DidBlurEvent): void {
+    this.props.onDidBlur?.(event);
+  }
+
   /**
    * Present the Sheet by `index` (Promise-based)
    * @param index - Detent index (default: 0)
@@ -313,6 +340,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       detents = [0.5, 1],
       backgroundColor,
       dismissible = true,
+      draggable = true,
       grabber = true,
       dimmed = true,
       initialDetentIndex = -1,
@@ -323,13 +351,12 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       cornerRadius,
       maxHeight,
       edgeToEdgeFullScreen,
-      fitScrollView = false,
+      scrollable = false,
       pageSizing = true,
       children,
       style,
       header,
       footer,
-      testID,
       ...rest
     } = this.props;
 
@@ -344,6 +371,18 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       return Math.min(1, detent);
     });
 
+    const containerStyle =
+      this.props.scrollable &&
+      Platform.select({
+        android: styles.scrollableAndroidContainer,
+      });
+
+    const contentStyle =
+      this.props.scrollable &&
+      Platform.select({
+        android: styles.scrollableAndroidContent,
+      });
+
     return (
       <TrueSheetViewNativeComponent
         {...rest}
@@ -360,9 +399,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         initialDetentIndex={initialDetentIndex}
         initialDetentAnimated={initialDetentAnimated}
         dismissible={dismissible}
+        draggable={draggable}
         maxHeight={maxHeight}
         edgeToEdgeFullScreen={edgeToEdgeFullScreen}
-        fitScrollView={fitScrollView}
+        scrollable={scrollable}
         pageSizing={pageSizing}
         onMount={this.onMount}
         onWillPresent={this.onWillPresent}
@@ -374,22 +414,29 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         onDragChange={this.onDragChange}
         onDragEnd={this.onDragEnd}
         onPositionChange={this.onPositionChange}
+        onWillFocus={this.onWillFocus}
+        onDidFocus={this.onDidFocus}
+        onWillBlur={this.onWillBlur}
+        onDidBlur={this.onDidBlur}
       >
         {this.state.shouldRenderNativeView && (
-          <TrueSheetContainerViewNativeComponent testID={testID} collapsable={false}>
+          <TrueSheetContainerViewNativeComponent style={containerStyle}>
             {header && (
-              <TrueSheetHeaderViewNativeComponent collapsable={false}>
+              <TrueSheetHeaderViewNativeComponent>
                 {isValidElement(header) ? header : createElement(header)}
               </TrueSheetHeaderViewNativeComponent>
             )}
-            <TrueSheetContentViewNativeComponent style={style} collapsable={false}>
+            <TrueSheetContentViewNativeComponent style={[style, contentStyle]}>
               {children}
             </TrueSheetContentViewNativeComponent>
             {footer && (
-              <TrueSheetFooterViewNativeComponent style={styles.footer} collapsable={false}>
+              <TrueSheetFooterViewNativeComponent style={styles.footer}>
                 {isValidElement(footer) ? footer : createElement(footer)}
               </TrueSheetFooterViewNativeComponent>
             )}
+            {Platform.OS === 'android' && grabber && draggable && (
+              <View collapsable={false} style={styles.grabberHitbox} />
+            )}
           </TrueSheetContainerViewNativeComponent>
         )}
       </TrueSheetViewNativeComponent>
@@ -399,13 +446,36 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
 
 const styles = StyleSheet.create({
   sheetView: {
-    position: 'absolute',
-    width: '100%',
     zIndex: -9999,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+
+    // Android needs a fixed bottom to avoid jumping content
+    bottom: Platform.select({ android: 0 }),
+  },
+  scrollableAndroidContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  scrollableAndroidContent: {
+    flexGrow: 1,
+    flexBasis: 0,
   },
   footer: {
     position: 'absolute',
     left: 0,
     right: 0,
   },
+  grabberHitbox: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: ANDROID_HITBOX_HEIGHT,
+  },
 });

package/src/TrueSheet.types.ts

@@ -10,14 +10,18 @@ export interface DetentInfoEventPayload {
    * The Y position of the sheet relative to the screen.
    */
   position: number;
+  /**
+   * The detent value (0-1) for the current index.
+   */
+  detent: number;
 }
 
 export interface PositionChangeEventPayload extends DetentInfoEventPayload {
   /**
-   * Workaround for cases where we can't get real-time position from native.
-   * When true, manually animate the position in JS.
+   * Indicates whether the position value is real-time (e.g., during drag or animation tracking).
+   * When false, the position should be animated in JS.
    */
-  transitioning: boolean;
+  realtime: boolean;
 }
 
 export type MountEvent = NativeSyntheticEvent<null>;
@@ -30,6 +34,10 @@ export type DragBeginEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type DragChangeEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type DragEndEvent = NativeSyntheticEvent<DetentInfoEventPayload>;
 export type PositionChangeEvent = NativeSyntheticEvent<PositionChangeEventPayload>;
+export type DidFocusEvent = NativeSyntheticEvent<null>;
+export type DidBlurEvent = NativeSyntheticEvent<null>;
+export type WillFocusEvent = NativeSyntheticEvent<null>;
+export type WillBlurEvent = NativeSyntheticEvent<null>;
 
 /**
  * Blur style mapped to native values in IOS.
@@ -106,6 +114,9 @@ export interface TrueSheetProps extends ViewProps {
    * detents={['auto', 0.6, 1]}
    * ```
    *
+   * @note It's recommended to sort detents from smallest to largest.
+   * When using `auto`, place it at the first index if you plan to adjust content dynamically.
+   *
    * @default [0.5, 1]
    */
   detents?: SheetDetent[];
@@ -149,6 +160,14 @@ export interface TrueSheetProps extends ViewProps {
    */
   dismissible?: boolean;
 
+  /**
+   * Enables or disables dragging the sheet to resize it.
+   * When disabled, the sheet becomes static and can only be resized programmatically.
+   *
+   * @default true
+   */
+  draggable?: boolean;
+
   /**
    * Main sheet background color.
    * Uses system default when not provided.
@@ -192,6 +211,25 @@ export interface TrueSheetProps extends ViewProps {
    */
   blurTint?: BlurTint;
 
+  /**
+   * The intensity of the blur effect (0-100).
+   * Only applies when `blurTint` is set.
+   * Uses system default if not provided.
+   *
+   * @platform ios
+   */
+  blurIntensity?: number;
+
+  /**
+   * Enables or disables user interaction on the blur view.
+   * Disabling this can help with visual artifacts (flash) on iOS 18+
+   * when touching the sheet content with blur enabled.
+   * Uses system default (true) if not provided.
+   *
+   * @platform ios
+   */
+  blurInteraction?: boolean;
+
   /**
    * Overrides `large` or `100%` height.
    * Also sets the maximum height for 'auto' detents.
@@ -219,14 +257,15 @@ export interface TrueSheetProps extends ViewProps {
   footer?: ComponentType<unknown> | ReactElement;
 
   /**
-   * Automatically pins ScrollView or FlatList to fit within the sheet's available space.
+   * On iOS, automatically pins ScrollView or FlatList to fit within the sheet's available space.
    * When enabled, the ScrollView's top edge will be pinned below any top sibling views,
    * and its left, right, and bottom edges will be pinned to the container.
    *
-   * @platform ios
+   * On Android, it adds additional style to the content for scrollable to work.
+   *
    * @default false
    */
-  fitScrollView?: boolean;
+  scrollable?: boolean;
 
   /**
    * Determines how the software keyboard will impact the layout of the sheet.
@@ -294,4 +333,24 @@ export interface TrueSheetProps extends ViewProps {
    * Comes with the detent info.
    */
   onPositionChange?: (event: PositionChangeEvent) => void;
+
+  /**
+   * Called when the sheet is about to regain focus because a sheet presented on top of it is being dismissed.
+   */
+  onWillFocus?: (event: WillFocusEvent) => void;
+
+  /**
+   * Called when the sheet regains focus after a sheet presented on top of it is dismissed.
+   */
+  onDidFocus?: (event: DidFocusEvent) => void;
+
+  /**
+   * Called when the sheet is about to lose focus because another sheet is being presented on top of it.
+   */
+  onWillBlur?: (event: WillBlurEvent) => void;
+
+  /**
+   * Called when the sheet loses focus because another sheet is presented on top of it.
+   */
+  onDidBlur?: (event: DidBlurEvent) => void;
 }

package/src/__mocks__/index.js

@@ -47,11 +47,6 @@ export class ReanimatedTrueSheet extends TrueSheet {
   }
 }
 
-// Mock TrueSheetGrabber
-export const TrueSheetGrabber = ({ style, ...props }) => (
-  <View style={style} {...props} testID="true-sheet-grabber" />
-);
-
 // Mock ReanimatedTrueSheetProvider
 export const ReanimatedTrueSheetProvider = ({ children }) => <>{children}</>;
 

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -4,24 +4,25 @@ import type {
   Double,
   Int32,
   WithDefault,
-  Float,
 } from 'react-native/Libraries/Types/CodegenTypes';
 import { codegenNativeComponent } from 'react-native';
 
 export interface DetentInfoEventPayload {
   index: Int32;
   position: Double;
+  detent: Double;
 }
 
 export interface PositionChangeEventPayload {
-  index: Int32;
+  index: Double;
   position: Double;
-  transitioning: boolean;
+  detent: Double;
+  realtime: boolean;
 }
 
 export interface NativeProps extends ViewProps {
   // Array properties
-  detents?: ReadonlyArray<Float>;
+  detents?: ReadonlyArray<Double>;
 
   // Number properties - use 0 as default to avoid nil insertion
   maxHeight?: WithDefault<Double, 0>;
@@ -34,13 +35,18 @@ export interface NativeProps extends ViewProps {
   blurTint?: WithDefault<string, ''>;
   keyboardMode?: WithDefault<'resize' | 'pan', 'resize'>;
 
+  // Blur properties - use -1 as default to indicate "not set" (use system default)
+  blurIntensity?: WithDefault<Double, -1>;
+  blurInteraction?: WithDefault<boolean, true>;
+
   // Boolean properties - match defaults from TrueSheet.types.ts
   grabber?: WithDefault<boolean, true>;
   dismissible?: WithDefault<boolean, true>;
+  draggable?: WithDefault<boolean, true>;
   dimmed?: WithDefault<boolean, true>;
   initialDetentAnimated?: WithDefault<boolean, true>;
   edgeToEdgeFullScreen?: WithDefault<boolean, false>;
-  fitScrollView?: WithDefault<boolean, false>;
+  scrollable?: WithDefault<boolean, false>;
   pageSizing?: WithDefault<boolean, true>;
 
   // Event handlers
@@ -54,6 +60,10 @@ export interface NativeProps extends ViewProps {
   onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
   onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
   onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
+  onWillFocus?: DirectEventHandler<null>;
+  onDidFocus?: DirectEventHandler<null>;
+  onWillBlur?: DirectEventHandler<null>;
+  onDidBlur?: DirectEventHandler<null>;
 }
 
 export default codegenNativeComponent<NativeProps>('TrueSheetView', {

package/src/index.ts

@@ -1,4 +1,3 @@
 export * from './TrueSheet';
 export * from './TrueSheet.types';
-export * from './TrueSheetGrabber';
 export * from './reanimated';

package/src/reanimated/ReanimatedTrueSheet.tsx

@@ -70,24 +70,29 @@ const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
 export const ReanimatedTrueSheet = forwardRef<TrueSheet, ReanimatedTrueSheetProps>((props, ref) => {
   const { onPositionChange, ...rest } = props;
 
-  const { animatedPosition, animatedIndex } = useReanimatedTrueSheet();
+  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet();
 
   const positionChangeHandler = useReanimatedPositionChangeHandler((payload) => {
     'worklet';
 
-    // When transitioning=true, we animate the position manually for smooth transitions.
-    // This is used when native can't provide real-time position updates during animations.
-    if (payload.transitioning) {
+    if (payload.realtime) {
+      // Update directly when we have real-time values (during drag or animation tracking)
+      animatedPosition.value = payload.position;
+      animatedIndex.value = payload.index;
+      animatedDetent.value = payload.detent;
+    } else {
+      // Animate position, index, and detent when not real-time
       if (Platform.OS === 'android') {
         animatedPosition.value = withTiming(payload.position, TIMING_CONFIG);
+        animatedIndex.value = withTiming(payload.index, TIMING_CONFIG);
+        animatedDetent.value = withTiming(payload.detent, TIMING_CONFIG);
       } else {
         animatedPosition.value = withSpring(payload.position, SPRING_CONFIG);
+        animatedIndex.value = withSpring(payload.index, SPRING_CONFIG);
+        animatedDetent.value = withSpring(payload.detent, SPRING_CONFIG);
       }
-    } else {
-      animatedPosition.value = payload.position;
     }
 
-    animatedIndex.value = payload.index;
     onPositionChange?.({ nativeEvent: payload } as PositionChangeEvent);
   });
 

package/src/reanimated/ReanimatedTrueSheetProvider.tsx

@@ -4,13 +4,19 @@ import { useSharedValue, type SharedValue } from 'react-native-reanimated';
 
 export interface ReanimatedTrueSheetContextValue {
   /**
-   * Shared value representing the current sheet position (Y offset from bottom)
+   * Shared value representing the current sheet position (Y offset from top of screen)
    */
   animatedPosition: SharedValue<number>;
   /**
-   * Shared value representing the current detent index
+   * Shared value representing the current detent index as a continuous float.
+   * Interpolates smoothly between -1 (off-screen) and the target detent index.
    */
   animatedIndex: SharedValue<number>;
+  /**
+   * Shared value representing the current detent value (0-1 fraction of screen height).
+   * Interpolates smoothly between detent values as the sheet is dragged.
+   */
+  animatedDetent: SharedValue<number>;
 }
 
 const ReanimatedTrueSheetContext = createContext<ReanimatedTrueSheetContextValue | null>(null);
@@ -40,13 +46,15 @@ export const ReanimatedTrueSheetProvider = ({ children }: ReanimatedTrueSheetPro
   const { height } = useWindowDimensions();
   const animatedPosition = useSharedValue(height);
   const animatedIndex = useSharedValue(-1);
+  const animatedDetent = useSharedValue(0);
 
   const value = useMemo(
     () => ({
       animatedPosition,
       animatedIndex,
+      animatedDetent,
     }),
-    [animatedPosition, animatedIndex]
+    [animatedPosition, animatedIndex, animatedDetent]
   );
 
   return (

package/android/src/main/java/com/lodev09/truesheet/events/DetentChangeEvent.kt

@@ -1,26 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired when the active detent changes
- * Payload: { index: number, position: number }
- */
-class DetentChangeEvent(surfaceId: Int, viewId: Int, private val index: Int, private val position: Float) :
-  Event<DetentChangeEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap =
-    Arguments.createMap().apply {
-      putInt("index", index)
-      putDouble("position", position.toDouble())
-    }
-
-  companion object {
-    const val EVENT_NAME = "topDetentChange"
-    const val REGISTRATION_NAME = "onDetentChange"
-  }
-}

package/android/src/main/java/com/lodev09/truesheet/events/DidDismissEvent.kt

@@ -1,20 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired after the sheet dismissal is complete
- */
-class DidDismissEvent(surfaceId: Int, viewId: Int) : Event<DidDismissEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap = Arguments.createMap()
-
-  companion object {
-    const val EVENT_NAME = "topDidDismiss"
-    const val REGISTRATION_NAME = "onDidDismiss"
-  }
-}

package/android/src/main/java/com/lodev09/truesheet/events/DidPresentEvent.kt

@@ -1,26 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired after the sheet presentation is complete
- * Payload: { index: number, position: number }
- */
-class DidPresentEvent(surfaceId: Int, viewId: Int, private val index: Int, private val position: Float) :
-  Event<DidPresentEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap =
-    Arguments.createMap().apply {
-      putInt("index", index)
-      putDouble("position", position.toDouble())
-    }
-
-  companion object {
-    const val EVENT_NAME = "topDidPresent"
-    const val REGISTRATION_NAME = "onDidPresent"
-  }
-}

package/android/src/main/java/com/lodev09/truesheet/events/DragBeginEvent.kt

@@ -1,26 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired when user starts dragging the sheet
- * Payload: { index: number, position: number }
- */
-class DragBeginEvent(surfaceId: Int, viewId: Int, private val index: Int, private val position: Float) :
-  Event<DragBeginEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap =
-    Arguments.createMap().apply {
-      putInt("index", index)
-      putDouble("position", position.toDouble())
-    }
-
-  companion object {
-    const val EVENT_NAME = "topDragBegin"
-    const val REGISTRATION_NAME = "onDragBegin"
-  }
-}

package/android/src/main/java/com/lodev09/truesheet/events/DragChangeEvent.kt

@@ -1,26 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired continuously while user is dragging the sheet
- * Payload: { index: number, position: number }
- */
-class DragChangeEvent(surfaceId: Int, viewId: Int, private val index: Int, private val position: Float) :
-  Event<DragChangeEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap =
-    Arguments.createMap().apply {
-      putInt("index", index)
-      putDouble("position", position.toDouble())
-    }
-
-  companion object {
-    const val EVENT_NAME = "topDragChange"
-    const val REGISTRATION_NAME = "onDragChange"
-  }
-}

package/android/src/main/java/com/lodev09/truesheet/events/DragEndEvent.kt

@@ -1,26 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired when user stops dragging the sheet
- * Payload: { index: number, position: number }
- */
-class DragEndEvent(surfaceId: Int, viewId: Int, private val index: Int, private val position: Float) :
-  Event<DragEndEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap =
-    Arguments.createMap().apply {
-      putInt("index", index)
-      putDouble("position", position.toDouble())
-    }
-
-  companion object {
-    const val EVENT_NAME = "topDragEnd"
-    const val REGISTRATION_NAME = "onDragEnd"
-  }
-}

package/android/src/main/java/com/lodev09/truesheet/events/MountEvent.kt

@@ -1,20 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired when the sheet component is mounted and ready
- */
-class MountEvent(surfaceId: Int, viewId: Int) : Event<MountEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap = Arguments.createMap()
-
-  companion object {
-    const val EVENT_NAME = "topMount"
-    const val REGISTRATION_NAME = "onMount"
-  }
-}

package/android/src/main/java/com/lodev09/truesheet/events/PositionChangeEvent.kt

@@ -1,32 +0,0 @@
-package com.lodev09.truesheet.events
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.Event
-
-/**
- * Fired continuously for position updates during drag and animation
- * Payload: { index: number, position: number, transitioning: boolean }
- */
-class PositionChangeEvent(
-  surfaceId: Int,
-  viewId: Int,
-  private val index: Int,
-  private val position: Float,
-  private val transitioning: Boolean = false
-) : Event<PositionChangeEvent>(surfaceId, viewId) {
-
-  override fun getEventName(): String = EVENT_NAME
-
-  override fun getEventData(): WritableMap =
-    Arguments.createMap().apply {
-      putInt("index", index)
-      putDouble("position", position.toDouble())
-      putBoolean("transitioning", transitioning)
-    }
-
-  companion object {
-    const val EVENT_NAME = "topPositionChange"
-    const val REGISTRATION_NAME = "onPositionChange"
-  }
-}