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

package/src/TrueSheet.types.ts

@@ -10,6 +10,10 @@ 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 {
@@ -30,6 +34,8 @@ 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>;
 
 /**
  * Blur style mapped to native values in IOS.
@@ -297,4 +303,14 @@ export interface TrueSheetProps extends ViewProps {
    * Comes with the detent info.
    */
   onPositionChange?: (event: PositionChangeEvent) => 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 loses focus because another sheet is presented on top of it.
+   */
+  onDidBlur?: (event: DidBlurEvent) => void;
 }

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -11,11 +11,13 @@ import { codegenNativeComponent } from 'react-native';
 export interface DetentInfoEventPayload {
   index: Int32;
   position: Double;
+  detent: Double;
 }
 
 export interface PositionChangeEventPayload {
-  index: Int32;
+  index: Double;
   position: Double;
+  detent: Double;
   transitioning: boolean;
 }
 
@@ -54,6 +56,8 @@ export interface NativeProps extends ViewProps {
   onDragChange?: DirectEventHandler<DetentInfoEventPayload>;
   onDragEnd?: DirectEventHandler<DetentInfoEventPayload>;
   onPositionChange?: DirectEventHandler<PositionChangeEventPayload>;
+  onDidFocus?: DirectEventHandler<null>;
+  onDidBlur?: DirectEventHandler<null>;
 }
 
 export default codegenNativeComponent<NativeProps>('TrueSheetView', {

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, detent } = 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.
+    // Update detent directly (discrete value, not animated)
+    detent.value = payload.detent;
+
     if (payload.transitioning) {
+      // Animate position and index when transitioning
       if (Platform.OS === 'android') {
         animatedPosition.value = withTiming(payload.position, TIMING_CONFIG);
+        animatedIndex.value = withTiming(payload.index, TIMING_CONFIG);
       } else {
         animatedPosition.value = withSpring(payload.position, SPRING_CONFIG);
+        animatedIndex.value = withSpring(payload.index, SPRING_CONFIG);
       }
     } else {
+      // Update directly during drag
       animatedPosition.value = payload.position;
+      animatedIndex.value = payload.index;
     }
 
-    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).
+   * This is the discrete value for the current/target detent index.
+   */
+  detent: 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 detent = useSharedValue(0);
 
   const value = useMemo(
     () => ({
       animatedPosition,
       animatedIndex,
+      detent,
     }),
-    [animatedPosition, animatedIndex]
+    [animatedPosition, animatedIndex, detent]
   );
 
   return (