@lodev09/react-native-true-sheet 4.0.0-beta.26 → 4.0.0-beta.27

package/android/src/main/java/com/lodev09/truesheet/TrueSheetFooterView.kt

@@ -32,10 +32,24 @@ class TrueSheetFooterView(reactContext: ThemedReactContext) : ReactViewGroup(rea
 
   private var lastWidth = 0
   private var lastHeight = 0
+  private var stateTranslationY = 0f
 
   var bottomInset = 0
     private set
 
+  /**
+   * positionFooter slides the footer off its Yoga position (above the
+   * keyboard, or riding the sheet). Mirror where it rests into the shadow
+   * node so measure() — and Pressability's press region — match where it's
+   * drawn. Called once the footer settles: every push is a commit.
+   */
+  fun syncTranslationState() {
+    if (translationY == stateTranslationY) return
+    val sw = stateWrapper ?: return
+    stateTranslationY = translationY
+    TrueSheetStateUpdater.updateFooterTranslation(sw, translationY.pxToDp())
+  }
+
   /**
    * Height the footer occupies above the keyboard — its layout height minus
    * the safe-area inset, which rides below the keyboard's top edge while the
@@ -55,14 +69,18 @@ class TrueSheetFooterView(reactContext: ThemedReactContext) : ReactViewGroup(rea
 
     val sw = stateWrapper ?: return
     val insetDp = bottomInset.toFloat().pxToDp()
+    // Carried along — this update replaces a still-queued translation update
+    stateTranslationY = translationY
+    val translateYDp = translationY.pxToDp()
 
     // Synchronous update — the footer must be padded before detents are
     // configured, otherwise the auto detent is set up an inset short
-    if (TrueSheetStateUpdater.updateFooterState(sw, insetDp)) return
+    if (TrueSheetStateUpdater.updateFooterState(sw, insetDp, translateYDp)) return
 
     // Fallback: async state update
     val newState = WritableNativeMap()
     newState.putDouble("bottomInset", insetDp.toDouble())
+    newState.putDouble("translateY", translateYDp.toDouble())
     sw.updateState(newState)
   }
 

package/android/src/main/java/com/lodev09/truesheet/TrueSheetStateUpdater.kt

@@ -41,8 +41,13 @@ object TrueSheetStateUpdater {
   }
 
   /** Returns false when unavailable — caller should fall back to async updateState. */
-  fun updateFooterState(stateWrapper: StateWrapper, bottomInsetDp: Float): Boolean =
-    isAvailable && nativeUpdateFooterState(stateWrapper, bottomInsetDp)
+  fun updateFooterState(stateWrapper: StateWrapper, bottomInsetDp: Float, translateYDp: Float): Boolean =
+    isAvailable && nativeUpdateFooterState(stateWrapper, bottomInsetDp, translateYDp)
+
+  /** Mirrors the footer's native translation so measure() matches where it's drawn. */
+  fun updateFooterTranslation(stateWrapper: StateWrapper, translateYDp: Float) {
+    if (isAvailable) nativeUpdateFooterTranslation(stateWrapper, translateYDp)
+  }
 
   /**
    * Publishes the precalculated bottom safe-area inset so a late-mounted
@@ -56,7 +61,10 @@ object TrueSheetStateUpdater {
   private external fun nativeUpdateState(stateWrapper: Any, width: Float, height: Float): Boolean
 
   @JvmStatic
-  private external fun nativeUpdateFooterState(stateWrapper: Any, bottomInset: Float): Boolean
+  private external fun nativeUpdateFooterState(stateWrapper: Any, bottomInset: Float, translateY: Float): Boolean
+
+  @JvmStatic
+  private external fun nativeUpdateFooterTranslation(stateWrapper: Any, translateY: Float)
 
   @JvmStatic
   private external fun nativeSetBottomSafeArea(insetDp: Float)

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewController.kt

@@ -374,6 +374,13 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   private val isKeyboardTransitioning: Boolean
     get() = keyboardObserver?.isTransitioning ?: false
 
+  // The footer slides every frame until the sheet and keyboard come to rest
+  private val isSheetMoving: Boolean
+    get() = isPresentAnimating ||
+      isKeyboardTransitioning ||
+      behavior?.state == BottomSheetBehavior.STATE_DRAGGING ||
+      behavior?.state == BottomSheetBehavior.STATE_SETTLING
+
   // Keyboard is up or animating — detents are (or are about to be) keyboard-shifted
   val isKeyboardActive: Boolean
     get() = keyboardInset > 0 || isKeyboardTransitioning
@@ -724,6 +731,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   }
 
   private fun handleStateSettled(sheetView: View, newState: Int) {
+    // The settle's last slide frame has positioned the footer
+    containerView?.footerView?.syncTranslationState()
+
     if (interactionState is InteractionState.Reconfiguring) return
 
     // A release already at a stop settles without a slide frame
@@ -1288,6 +1298,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     // absolute footer floats above it
     if (!absoluteFooter) {
       footerView.translationY = 0f
+      footerView.syncTranslationState()
       return
     }
 
@@ -1313,6 +1324,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     // Clamp to prevent footer going above safe area
     val maxAllowedY = (sheetHeight - topInset - footerHeight).toFloat()
     footerView.y = minOf(footerY, maxAllowedY)
+    // Mid-motion slides are synced once the sheet settles or the keyboard
+    // lands (handleStateSettled, keyboardDidShow/keyboardDidHide)
+    if (!isSheetMoving) footerView.syncTranslationState()
     if (!footerAvoidsKeyboard) {
       containerView?.contentView?.updateContentInset()
     }
@@ -1403,7 +1417,13 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
           )
         }
 
+        override fun keyboardDidShow(height: Int) {
+          // The keyboard's last frame has positioned the footer
+          containerView?.footerView?.syncTranslationState()
+        }
+
         override fun keyboardDidHide() {
+          containerView?.footerView?.syncTranslationState()
           if (!shouldHandleKeyboard(checkFocus = false)) return
           isKeyboardDismissProgrammatic = false
           // Keep detentIndexBeforeKeyboard for the settle's detent-change check

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetOverlayRootView.kt

@@ -48,7 +48,14 @@ class TrueSheetOverlayRootView(private val reactContext: ThemedReactContext) :
     translationZ = OVERLAY_Z
   }
 
-  // Children are positioned by Fabric — a FrameLayout pass would stretch them to match_parent
+  // Children are measured and positioned by Fabric — a FrameLayout pass would stretch them to match_parent
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    setMeasuredDimension(
+      MeasureSpec.getSize(widthMeasureSpec),
+      MeasureSpec.getSize(heightMeasureSpec)
+    )
+  }
+
   override fun onLayout(
     changed: Boolean,
     left: Int,

package/android/src/main/jni/TrueSheetStateUpdater.cpp

@@ -58,7 +58,8 @@ static jboolean updateStateImmediate(
 static jboolean updateFooterStateImmediate(
     jni::alias_ref<jclass> /*clazz*/,
     jni::alias_ref<jobject> stateWrapper,
-    jfloat bottomInset) {
+    jfloat bottomInset,
+    jfloat translateY) {
   auto state = getStateFromWrapper(stateWrapper);
   if (!state) {
     return JNI_FALSE;
@@ -67,15 +68,44 @@ static jboolean updateFooterStateImmediate(
   auto concreteState =
       std::static_pointer_cast<const ConcreteState<TrueSheetFooterViewState>>(state);
 
-  // Copy the latest data so fields this bridge doesn't set survive the update
-  TrueSheetFooterViewState newState = concreteState->getData();
-  newState.bottomInset = bottomInset;
-  newState.initialized = true;
-  concreteState->updateState(std::move(newState), EventQueue::UpdateMode::unstable_Immediate);
+  // Carries the translation too — RN's EventQueue drops a still-queued update
+  // for the same view (see updateFooterTranslation) when this one is enqueued
+  concreteState->updateState(
+      [bottomInset, translateY](const TrueSheetFooterViewState &oldData) -> StateData::Shared {
+        auto newData = oldData;
+        newData.bottomInset = bottomInset;
+        newData.translateY = translateY;
+        newData.initialized = true;
+        return std::make_shared<const TrueSheetFooterViewState>(newData);
+      },
+      EventQueue::UpdateMode::unstable_Immediate);
 
   return JNI_TRUE;
 }
 
+// Mirrors the footer's resting translation into its state so measure()
+// matches where it's drawn. Async — it only feeds measure().
+static void updateFooterTranslation(
+    jni::alias_ref<jclass> /*clazz*/,
+    jni::alias_ref<jobject> stateWrapper,
+    jfloat translateY) {
+  auto state = getStateFromWrapper(stateWrapper);
+  if (!state) {
+    return;
+  }
+
+  auto concreteState =
+      std::static_pointer_cast<const ConcreteState<TrueSheetFooterViewState>>(state);
+
+  concreteState->updateState(
+      [translateY](const TrueSheetFooterViewState &oldData) -> StateData::Shared {
+        auto newData = oldData;
+        newData.translateY = translateY;
+        return std::make_shared<const TrueSheetFooterViewState>(newData);
+      },
+      EventQueue::UpdateMode::Asynchronous);
+}
+
 // Publishes the precalculated bottom safe-area inset so a late-mounted
 // footer's first layout is already padded (see TrueSheetFooterViewShadowNode).
 static void setBottomSafeArea(jni::alias_ref<jclass> /*clazz*/, jfloat insetDp) {
@@ -90,6 +120,7 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void * /*reserved*/) {
         ->registerNatives({
             makeNativeMethod("nativeUpdateState", facebook::react::updateStateImmediate),
             makeNativeMethod("nativeUpdateFooterState", facebook::react::updateFooterStateImmediate),
+            makeNativeMethod("nativeUpdateFooterTranslation", facebook::react::updateFooterTranslation),
             makeNativeMethod("nativeSetBottomSafeArea", facebook::react::setBottomSafeArea),
         });
   });

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetFooterViewShadowNode.cpp

@@ -59,4 +59,16 @@ void TrueSheetFooterViewShadowNode::adjustLayoutWithState() {
   }
 }
 
+// Native moves the footer off its Yoga position without a layout pass. Folding
+// that slide into the transform keeps measure() — and Pressability's press
+// region — on the drawn footer.
+Transform TrueSheetFooterViewShadowNode::getTransform() const {
+  auto transform = ConcreteViewShadowNode::getTransform();
+  auto translateY = getStateData().translateY;
+  if (translateY == 0) {
+    return transform;
+  }
+  return transform * Transform::Translate(0, translateY, 0);
+}
+
 }  // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetFooterViewShadowNode.h

@@ -20,6 +20,8 @@ class JSI_EXPORT TrueSheetFooterViewShadowNode final
 
  public:
   void adjustLayoutWithState();
+
+  Transform getTransform() const override;
 };
 
 }  // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetFooterViewState.h

@@ -11,7 +11,8 @@ namespace facebook::react {
 /*
  * State for <TrueSheetFooterView> component.
  * Set from native with the sheet's bottom safe-area inset so the shadow node
- * pads the footer's bottom edge (see TrueSheetFooterViewShadowNode).
+ * pads the footer's bottom edge, and with the footer's native translation so
+ * measure() matches where it's drawn (see TrueSheetFooterViewShadowNode).
  */
 class TrueSheetFooterViewState final {
  public:
@@ -19,11 +20,16 @@ class TrueSheetFooterViewState final {
 
 #ifdef ANDROID
   TrueSheetFooterViewState(TrueSheetFooterViewState const &previousState, folly::dynamic data)
-      : bottomInset(static_cast<float>(data["bottomInset"].getDouble())), initialized(true) {
+      : bottomInset(static_cast<float>(data["bottomInset"].getDouble())),
+        translateY(static_cast<float>(data["translateY"].getDouble())),
+        initialized(true) {
   }
 #endif
 
   float bottomInset{0};
+  // Native slide off the Yoga position — above the keyboard, or riding the
+  // sheet below its lowest detent (Android)
+  float translateY{0};
   // True once native has pushed a real inset — until then the shadow node
   // seeds the layout from TrueSheetInsets (see TrueSheetFooterViewShadowNode)
   bool initialized{false};

package/ios/TrueSheetFooterView.mm

@@ -67,7 +67,7 @@ using namespace facebook::react;
     return;
   }
   _bottomInset = bottomInset;
-  [self pushBottomInsetState];
+  [self pushStateWithMode:EventQueue::UpdateMode::unstable_Immediate];
 }
 
 // Skipped while the keyboard is open — an absolute footer rises above the
@@ -77,22 +77,36 @@ using namespace facebook::react;
     return;
   }
   _keyboardVisible = keyboardVisible;
-  [self pushBottomInsetState];
+  [self pushStateWithMode:EventQueue::UpdateMode::unstable_Immediate];
 }
 
-- (void)pushBottomInsetState {
+// The keyboard slide is a transform the shadow tree can't see — mirror it so
+// measure() (and Pressability's press region) match where the footer is drawn.
+// Async: no layout reads it.
+- (void)setKeyboardOffset:(CGFloat)keyboardOffset {
+  if (_currentKeyboardOffset == keyboardOffset) {
+    return;
+  }
+  _currentKeyboardOffset = keyboardOffset;
+  [self pushStateWithMode:EventQueue::UpdateMode::Asynchronous];
+}
+
+// Every push carries all fields — RN's EventQueue drops a still-queued update
+// for the same view when the next one is enqueued.
+- (void)pushStateWithMode:(EventQueue::UpdateMode)mode {
   if (!_state) {
     return;
   }
 
   TrueSheetFooterViewState newState;
   newState.bottomInset = _keyboardVisible ? 0 : _bottomInset;
+  newState.translateY = -_currentKeyboardOffset;
   newState.initialized = true;
-  // Immediate so the inset lands before anything reads the footer's height —
-  // the async path races the keyboard caret scroll and detent setup, leaving
-  // them an inset stale (same reason Android bridges through
-  // TrueSheetStateUpdater).
-  _state->updateState(std::move(newState), EventQueue::UpdateMode::unstable_Immediate);
+  // Inset changes go Immediate so they land before anything reads the
+  // footer's height — the async path races the keyboard caret scroll and
+  // detent setup, leaving them an inset stale (same reason Android bridges
+  // through TrueSheetStateUpdater).
+  _state->updateState(std::move(newState), mode);
   _didPushBottomInset = YES;
 }
 
@@ -215,7 +229,7 @@ using namespace facebook::react;
   [self setKeyboardVisible:YES];
 
   CGFloat slide = [self keyboardSlideForHeight:height];
-  _currentKeyboardOffset = slide;
+  [self setKeyboardOffset:slide];
 
   [UIView animateWithDuration:duration
     delay:0
@@ -230,8 +244,9 @@ using namespace facebook::react;
 }
 
 - (void)keyboardWillHide:(NSTimeInterval)duration curve:(UIViewAnimationOptions)curve {
+  // Offset first — the visible push replaces it in the queue, one commit
+  [self setKeyboardOffset:0];
   [self setKeyboardVisible:NO];
-  _currentKeyboardOffset = 0;
 
   [UIView animateWithDuration:duration
                         delay:0
@@ -266,8 +281,8 @@ using namespace facebook::react;
 
   // avoidKeyboard flipped off mid-keyboard — drop the slide already applied
   if (![self floatsAboveKeyboard]) {
+    [self setKeyboardOffset:0];
     [self setKeyboardVisible:NO];
-    _currentKeyboardOffset = 0;
     self.transform = CGAffineTransformIdentity;
     return;
   }
@@ -275,7 +290,7 @@ using namespace facebook::react;
   [self setKeyboardVisible:YES];
 
   CGFloat slide = [self keyboardSlideForHeight:height];
-  _currentKeyboardOffset = slide;
+  [self setKeyboardOffset:slide];
   self.transform = CGAffineTransformMakeTranslation(0, -slide);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "4.0.0-beta.26",
+  "version": "4.0.0-beta.27",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",