feat(ios): bring back position tracking from layout

Author: lodev09

docs/blog/2025/release-3-0.mdx

@@ -95,7 +95,7 @@ import {
   ReanimatedTrueSheet,
   useReanimatedTrueSheet,
 } from '@lodev09/react-native-true-sheet/reanimated'
-import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated'
+import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
 
 const App = () => (
   <ReanimatedTrueSheetProvider>
@@ -114,7 +114,7 @@ const AnimatedContent = () => {
 
   // Fade in as sheet expands from index 0 to 1
   const animatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1])
+    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1], Extrapolation.CLAMP)
   }))
 
   return (

docs/docs/guides/reanimated/reanimated.mdx

@@ -66,7 +66,7 @@ Use the `useReanimatedTrueSheet` hook to access the sheet's animated values.
 
 ```tsx
 import { useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'
-import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated'
+import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
 
 function MyComponent() {
   const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet()
@@ -78,7 +78,7 @@ function MyComponent() {
 
   // Example: Fade in as sheet expands from index 0 to 1
   const opacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1])
+    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1], Extrapolation.CLAMP)
   }))
 
   return (

docs/docs/migration.mdx

@@ -293,7 +293,7 @@ import {
   ReanimatedTrueSheet,
   useReanimatedTrueSheet,
 } from '@lodev09/react-native-true-sheet/reanimated'
-import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
 
 // 1. Wrap your app with the provider
 const App = () => (
@@ -319,7 +319,7 @@ const MyAnimatedComponent = () => {
 
   // Example: Fade in as sheet expands from index 0 to 1
   const opacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1])
+    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1], Extrapolation.CLAMP)
   }))
 
   return (

ios/TrueSheetView.mm

@@ -223,7 +223,7 @@ - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask {
       [self->_controller setupSheetDetents];
       [self->_controller applyActiveDetent];
     }];
-    [_controller updateDraggable];
+    [_controller setupDraggable];
   } else if (_initialDetentIndex >= 0) {
     [self presentAtIndex:_initialDetentIndex animated:_initialDetentAnimated completion:nil];
   }
@@ -361,7 +361,7 @@ - (void)dismissAnimated:(BOOL)animated completion:(nullable TrueSheetCompletionB
 /**
  * Debounced sheet update to handle rapid content/header size changes.
  */
-- (void)updateSheetIfNeeded {
+- (void)setupSheetDetentsForSizeChange {
   if (!_controller.isPresented || _isSheetUpdatePending)
     return;
 
@@ -371,19 +371,19 @@ - (void)updateSheetIfNeeded {
     self->_isSheetUpdatePending = NO;
 
     [self->_controller.sheetPresentationController animateChanges:^{
-      [self->_controller setupSheetDetents];
+      [self->_controller setupSheetDetentsForSizeChange];
     }];
   });
 }
 
 - (void)containerViewContentDidChangeSize:(CGSize)newSize {
   _controller.contentHeight = @(newSize.height);
-  [self updateSheetIfNeeded];
+  [self setupSheetDetentsForSizeChange];
 }
 
 - (void)containerViewHeaderDidChangeSize:(CGSize)newSize {
   _controller.headerHeight = @(newSize.height);
-  [self updateSheetIfNeeded];
+  [self setupSheetDetentsForSizeChange];
 }
 
 #pragma mark - TrueSheetViewControllerDelegate

ios/TrueSheetViewController.h

@@ -69,9 +69,10 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)applyActiveDetent;
 - (void)setupActiveDetentWithIndex:(NSInteger)index;
 - (void)resizeToDetentIndex:(NSInteger)index;
-- (void)setupSheetDetents;
 - (void)setupSheetProps;
-- (void)updateDraggable;
+- (void)setupSheetDetents;
+- (void)setupSheetDetentsForSizeChange;
+- (void)setupDraggable;
 
 @end
 

ios/TrueSheetViewController.mm

@@ -22,13 +22,15 @@ @interface TrueSheetViewController ()
 
 @implementation TrueSheetViewController {
   CGFloat _lastPosition;
-  BOOL _isDragging;
   NSInteger _pendingDetentIndex;
+  BOOL _pendingContentSizeChange;
 
-  // Transitioning tracker
+  // Position tracking
   CADisplayLink *_transitioningTimer;
   UIView *_transitionFakeView;
+  BOOL _isDragging;
   BOOL _isTransitioning;
+  BOOL _isTrackingPositionFromLayout;
 
   // Reference to parent TrueSheetViewController (if presented from another sheet)
   __weak TrueSheetViewController *_parentSheetController;
@@ -61,10 +63,13 @@ - (instancetype)init {
     _lastPosition = 0;
     _isDragging = NO;
     _isPresented = NO;
+    _pendingContentSizeChange = NO;
     _activeDetentIndex = -1;
     _pendingDetentIndex = -1;
+    
     _isTransitioning = NO;
     _transitionFakeView = [UIView new];
+    _isTrackingPositionFromLayout = NO;
 
     _blurInteraction = YES;
     _resolvedDetentPositions = [NSMutableArray array];
@@ -200,6 +205,9 @@ - (void)viewDidAppear:(BOOL)animated {
       if ([self.delegate respondsToSelector:@selector(viewControllerDidFocus)]) {
         [self.delegate viewControllerDidFocus];
       }
+      
+      // Emit correct position after presentation
+      [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:NO debug:@"did present"];
     });
 
     [self setupGestureRecognizer];
@@ -264,22 +272,38 @@ - (void)viewDidDisappear:(BOOL)animated {
   }
 }
 
+- (void)viewWillLayoutSubviews {
+  [super viewWillLayoutSubviews];
+  
+  if (!_isTransitioning) {
+    _isTrackingPositionFromLayout = YES;
+    
+    UIViewController *presented = self.presentedViewController;
+    
+    // Not realtime when another controller is presented that triggers our layout
+    BOOL hasPresentedController = presented != nil && !presented.isBeingPresented && !presented.isBeingDismissed;
+    
+    BOOL realtime = !hasPresentedController;
+    
+    if (_pendingContentSizeChange) {
+      _pendingContentSizeChange = NO;
+      realtime = NO;
+      
+      // Store resolved position after content size changes
+      [self storeResolvedPositionForIndex:self.currentDetentIndex];
+    }
+    
+    [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:realtime debug:@"layout"];
+  }
+}
+
 - (void)viewDidLayoutSubviews {
   [super viewDidLayoutSubviews];
 
   if ([self.delegate respondsToSelector:@selector(viewControllerDidChangeSize:)]) {
     [self.delegate viewControllerDidChangeSize:self.view.frame.size];
   }
 
-  UIViewController *presented = self.presentedViewController;
-  BOOL hasPresentedController = presented != nil && !presented.isBeingPresented && !presented.isBeingDismissed;
-
-  if (!_isDragging && !_isTransitioning) {
-    // Update stored position for current detent (handles content size changes)
-    [self storeResolvedPositionForIndex:self.currentDetentIndex];
-    [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:hasPresentedController];
-  }
-
   // Emit pending detent change after programmatic resize settles
   if (_pendingDetentIndex >= 0) {
     NSInteger pendingIndex = _pendingDetentIndex;
@@ -289,9 +313,14 @@ - (void)viewDidLayoutSubviews {
       if ([self.delegate respondsToSelector:@selector(viewControllerDidChangeDetent:position:detent:)]) {
         CGFloat detent = [self detentValueForIndex:pendingIndex];
         [self.delegate viewControllerDidChangeDetent:pendingIndex position:self.currentPosition detent:detent];
+        
+        // Emit position for the final position
+        [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:NO debug:@"pending detent change"];
       }
     });
   }
+  
+  _isTrackingPositionFromLayout = NO;
 }
 
 #pragma mark - Presentation Tracking (for RN Screens integration)
@@ -402,7 +431,7 @@ - (void)setupGestureRecognizer {
   }
 }
 
-- (void)updateDraggable {
+- (void)setupDraggable {
   UIView *presentedView = self.presentedView;
   if (!presentedView)
     return;
@@ -432,18 +461,22 @@ - (void)handlePanGesture:(UIPanGestureRecognizer *)gesture {
       _isDragging = YES;
       break;
     case UIGestureRecognizerStateChanged:
-      [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:YES];
+      if (!_isTrackingPositionFromLayout) {
+        [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:YES debug:@"drag change"];
+      }
       break;
     case UIGestureRecognizerStateEnded:
     case UIGestureRecognizerStateCancelled: {
       if (!_isTransitioning) {
         dispatch_async(dispatch_get_main_queue(), ^{
           // Store resolved position when drag ends
           [self storeResolvedPositionForIndex:self.currentDetentIndex];
-          [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:NO];
+          
+          // Emit the correct position after dragging
+          [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:NO debug:@"drag end"];
         });
       }
-
+      
       _isDragging = NO;
       break;
     }
@@ -461,7 +494,7 @@ - (void)setupTransitionTracker {
   _isTransitioning = YES;
 
   CGRect dismissedFrame = CGRectMake(0, self.screenHeight, 0, 0);
-  CGRect presentedFrame = CGRectMake(0, self.presentedView.frame.origin.y, 0, 0);
+  CGRect presentedFrame = CGRectMake(0, self.currentPosition, 0, 0);
 
   // Set starting fake view position
   _transitionFakeView.frame = self.isDismissing ? presentedFrame : dismissedFrame;
@@ -470,7 +503,7 @@ - (void)setupTransitionTracker {
   auto animation = ^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
     [[context containerView] addSubview:self->_transitionFakeView];
 
-    // Set the fake view target position
+    // Set ending fake view position
     self->_transitionFakeView.frame = self.isDismissing ? dismissedFrame : presentedFrame;
 
     self->_transitioningTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleTransitionTracker)];
@@ -495,16 +528,17 @@ - (void)handleTransitionTracker {
 
     if (self.currentPosition >= self.screenHeight) {
       // Dismissing position
-      [self emitChangePositionDelegateWithPosition:layerPosition realtime:YES];
+      CGFloat position = fmax(_lastPosition, layerPosition);
+      [self emitChangePositionDelegateWithPosition:position realtime:YES debug:@"transition out"];
     } else {
       // Presenting position
       CGFloat position = fmax(self.currentPosition, layerPosition);
-      [self emitChangePositionDelegateWithPosition:position realtime:YES];
+      [self emitChangePositionDelegateWithPosition:position realtime:YES debug:@"transition in"];
     }
   }
 }
 
-- (void)emitChangePositionDelegateWithPosition:(CGFloat)position realtime:(BOOL)realtime {
+- (void)emitChangePositionDelegateWithPosition:(CGFloat)position realtime:(BOOL)realtime debug:(NSString *)debug {
   // Use epsilon comparison to avoid missing updates due to floating point precision
   if (fabs(_lastPosition - position) > 0.01) {
     _lastPosition = position;
@@ -514,6 +548,9 @@ - (void)emitChangePositionDelegateWithPosition:(CGFloat)position realtime:(BOOL)
     if ([self.delegate respondsToSelector:@selector(viewControllerDidChangePosition:position:detent:realtime:)]) {
       [self.delegate viewControllerDidChangePosition:index position:position detent:detent realtime:realtime];
     }
+    
+    // Debug position tracking
+    // NSLog(@"position from %@: %f, realtime: %i", debug, position, realtime);
   }
 }
 
@@ -658,6 +695,11 @@ - (CGFloat)detentValueForIndex:(NSInteger)index {
 
 #pragma mark - Sheet Configuration
 
+- (void)setupSheetDetentsForSizeChange {
+  _pendingContentSizeChange = YES;
+  [self setupSheetDetents];
+}
+
 - (void)setupSheetDetents {
   UISheetPresentationController *sheet = self.sheetPresentationController;
   if (!sheet)

src/reanimated/ReanimatedTrueSheetProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, useContext, type ReactNode } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useSharedValue, type SharedValue } from 'react-native-reanimated';
 
@@ -48,14 +48,11 @@ export const ReanimatedTrueSheetProvider = ({ children }: ReanimatedTrueSheetPro
   const animatedIndex = useSharedValue(-1);
   const animatedDetent = useSharedValue(0);
 
-  const value = useMemo(
-    () => ({
-      animatedPosition,
-      animatedIndex,
-      animatedDetent,
-    }),
-    [animatedPosition, animatedIndex, animatedDetent]
-  );
+  const value: ReanimatedTrueSheetContextValue = {
+    animatedPosition,
+    animatedIndex,
+    animatedDetent,
+  }
 
   return (
     <ReanimatedTrueSheetContext.Provider value={value}>