react-native-keyboard-controller 1.16.3 → 1.16.5

package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt

@@ -18,7 +18,7 @@ class KeyboardControllerViewManager(
   private val manager = KeyboardControllerViewManagerImpl(mReactContext)
   private val mDelegate = KeyboardControllerViewManagerDelegate(this)
 
-  override fun getDelegate(): ViewManagerDelegate<ReactViewGroup?> = mDelegate
+  override fun getDelegate(): ViewManagerDelegate<ReactViewGroup> = mDelegate
 
   override fun getName(): String = KeyboardControllerViewManagerImpl.NAME
 

package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardGestureAreaViewManager.kt

@@ -18,7 +18,7 @@ class KeyboardGestureAreaViewManager(
   private val manager = KeyboardGestureAreaViewManagerImpl(mReactContext)
   private val mDelegate = KeyboardGestureAreaManagerDelegate(this)
 
-  override fun getDelegate(): ViewManagerDelegate<ReactViewGroup?> = mDelegate
+  override fun getDelegate(): ViewManagerDelegate<ReactViewGroup> = mDelegate
 
   override fun getName(): String = KeyboardGestureAreaViewManagerImpl.NAME
 

package/android/src/fabric/java/com/reactnativekeyboardcontroller/OverKeyboardViewManager.kt

@@ -19,7 +19,7 @@ class OverKeyboardViewManager(
   private val manager = OverKeyboardViewManagerImpl(mReactContext)
   private val mDelegate = OverKeyboardViewManagerDelegate(this)
 
-  override fun getDelegate(): ViewManagerDelegate<OverKeyboardHostView?> = mDelegate
+  override fun getDelegate(): ViewManagerDelegate<OverKeyboardHostView> = mDelegate
 
   override fun getName(): String = OverKeyboardViewManagerImpl.NAME
 

package/android/src/main/java/com/reactnativekeyboardcontroller/interactive/InteractiveKeyboardProvider.kt

@@ -1,6 +1,5 @@
 package com.reactnativekeyboardcontroller.interactive
 
 object InteractiveKeyboardProvider {
-  var shown = false
   var isInteractive = false
 }

package/android/src/main/java/com/reactnativekeyboardcontroller/interactive/KeyboardAnimationController.kt

@@ -233,22 +233,18 @@ internal class KeyboardAnimationController {
     when (current) {
       // The current inset matches either the shown/hidden inset, finish() immediately
       shown -> {
-        InteractiveKeyboardProvider.shown = true
         controller.finish(true)
       }
       hidden -> {
-        InteractiveKeyboardProvider.shown = false
         controller.finish(false)
       }
       else -> {
         // Otherwise, we'll look at the current position...
         if (controller.currentFraction >= SCROLL_THRESHOLD) {
           // If the IME is past the 'threshold' we snap to the toggled state
-          InteractiveKeyboardProvider.shown = !isImeShownAtStart
           controller.finish(!isImeShownAtStart)
         } else {
           // ...otherwise, we snap back to the original visibility
-          InteractiveKeyboardProvider.shown = isImeShownAtStart
           controller.finish(isImeShownAtStart)
         }
       }
@@ -287,11 +283,9 @@ internal class KeyboardAnimationController {
         )
       // The current inset matches either the shown/hidden inset, finish() immediately
       current == shown -> {
-        InteractiveKeyboardProvider.shown = true
         controller.finish(true)
       }
       current == hidden -> {
-        InteractiveKeyboardProvider.shown = false
         controller.finish(false)
       }
       else -> {

package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/FocusedInputObserver.kt

@@ -101,7 +101,14 @@ class FocusedInputObserver(
       // unfocused or focus was changed
       if (newFocus == null || oldFocus != null) {
         lastFocusedInput?.removeOnLayoutChangeListener(layoutListener)
-        lastFocusedInput?.removeTextChangedListener(textWatcher)
+        lastFocusedInput?.let { input ->
+          val watcher = textWatcher
+          // remove it asynchronously to avoid crash in stripe input
+          // see https://github.com/stripe/stripe-android/issues/10178
+          input.post {
+            input.removeTextChangedListener(watcher)
+          }
+        }
         selectionSubscription?.invoke()
         lastFocusedInput = null
       }

package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt

@@ -33,7 +33,7 @@ data class KeyboardAnimationCallbackConfig(
   val persistentInsetTypes: Int,
   val deferredInsetTypes: Int,
   val dispatchMode: Int = WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_STOP,
-  val hasTranslucentNavigationBar: Boolean = false,
+  var hasTranslucentNavigationBar: Boolean,
 )
 
 interface Suspendable {
@@ -62,6 +62,8 @@ class KeyboardAnimationCallback(
   private var duration = 0
   private var viewTagFocused = -1
   private var animationsToSkip = hashSetOf<WindowInsetsAnimationCompat>()
+  private val isKeyboardInteractive: Boolean
+    get() = duration == -1
   override var isSuspended: Boolean = false
 
   // listeners
@@ -293,46 +295,47 @@ class KeyboardAnimationCallback(
     isTransitioning = false
     duration = animation.durationMillis.toInt()
 
-    var keyboardHeight = this.persistentKeyboardHeight
-    // if keyboard becomes shown after interactive animation completion
-    // getCurrentKeyboardHeight() will be `0` and isKeyboardVisible will be `false`
-    // it's not correct behavior, so we are handling it here
-    val isKeyboardShown = InteractiveKeyboardProvider.shown
-    if (!isKeyboardShown) {
-      keyboardHeight = getCurrentKeyboardHeight()
-    } else {
-      // if keyboard is shown after interactions and the animation has finished
-      // then we need to reset the state
-      InteractiveKeyboardProvider.shown = false
-    }
-    isKeyboardVisible = isKeyboardVisible || isKeyboardShown
-    prevKeyboardHeight = keyboardHeight
+    val runnable =
+      Runnable {
+        val keyboardHeight = getCurrentKeyboardHeight()
 
-    if (animation in animationsToSkip) {
-      duration = 0
-      animationsToSkip.remove(animation)
-      return
-    }
+        isKeyboardVisible = isKeyboardVisible()
+        prevKeyboardHeight = keyboardHeight
 
-    context.emitEvent(
-      "KeyboardController::" + if (!isKeyboardVisible) "keyboardDidHide" else "keyboardDidShow",
-      getEventParams(keyboardHeight),
-    )
-    context.dispatchEvent(
-      eventPropagationView.id,
-      KeyboardTransitionEvent(
-        surfaceId,
-        eventPropagationView.id,
-        KeyboardTransitionEvent.End,
-        keyboardHeight,
-        if (!isKeyboardVisible) 0.0 else 1.0,
-        duration,
-        viewTagFocused,
-      ),
-    )
+        if (animation in animationsToSkip) {
+          duration = 0
+          animationsToSkip.remove(animation)
+          return@Runnable
+        }
 
-    // reset to initial state
-    duration = 0
+        context.emitEvent(
+          "KeyboardController::" + if (!isKeyboardVisible) "keyboardDidHide" else "keyboardDidShow",
+          getEventParams(keyboardHeight),
+        )
+        context.dispatchEvent(
+          eventPropagationView.id,
+          KeyboardTransitionEvent(
+            surfaceId,
+            eventPropagationView.id,
+            KeyboardTransitionEvent.End,
+            keyboardHeight,
+            if (!isKeyboardVisible) 0.0 else 1.0,
+            duration,
+            viewTagFocused,
+          ),
+        )
+
+        // reset to initial state
+        duration = 0
+      }
+
+    if (isKeyboardInteractive) {
+      // in case of interactive keyboard we can not read keyboard frame straight away
+      // (because we'll always read `0`), so we are posting runnable to the main thread
+      view.post(runnable)
+    } else {
+      runnable.run()
+    }
   }
 
   fun syncKeyboardPosition(

package/android/src/main/java/com/reactnativekeyboardcontroller/modal/ModalAttachedWatcher.kt

@@ -23,15 +23,15 @@ private val areEventsComingFromOwnWindow = !Keyboard.IS_ANIMATION_EMULATED
 class ModalAttachedWatcher(
   private val view: ReactViewGroup,
   private val reactContext: ThemedReactContext,
-  private val config: () -> KeyboardAnimationCallbackConfig,
+  private val config: KeyboardAnimationCallbackConfig,
   private var callback: () -> KeyboardAnimationCallback?,
 ) : EventDispatcherListener {
   private val archType = if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) UIManagerType.FABRIC else UIManagerType.DEFAULT
   private val uiManager = UIManagerHelper.getUIManager(reactContext.reactApplicationContext, archType)
   private val eventDispatcher = UIManagerHelper.getEventDispatcher(reactContext.reactApplicationContext, archType)
 
-  override fun onEventDispatch(event: Event<out Event<*>>?) {
-    if (event?.eventName != MODAL_SHOW_EVENT) {
+  override fun onEventDispatch(event: Event<*>) {
+    if (event.eventName != MODAL_SHOW_EVENT) {
       return
     }
 
@@ -61,7 +61,7 @@ class ModalAttachedWatcher(
           view = rootView,
           eventPropagationView = view,
           context = reactContext,
-          config = config(),
+          config = config,
         )
 
       rootView.addView(eventView)

package/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt

@@ -39,17 +39,16 @@ class EdgeToEdgeReactViewGroup(
   private var eventView: ReactViewGroup? = null
   private var wasMounted = false
   private var callback: KeyboardAnimationCallback? = null
-  private val config: KeyboardAnimationCallbackConfig
-    get() =
-      KeyboardAnimationCallbackConfig(
-        persistentInsetTypes = WindowInsetsCompat.Type.systemBars(),
-        deferredInsetTypes = WindowInsetsCompat.Type.ime(),
-        dispatchMode = WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_CONTINUE_ON_SUBTREE,
-        hasTranslucentNavigationBar = isNavigationBarTranslucent,
-      )
+  private val config =
+    KeyboardAnimationCallbackConfig(
+      persistentInsetTypes = WindowInsetsCompat.Type.systemBars(),
+      deferredInsetTypes = WindowInsetsCompat.Type.ime(),
+      dispatchMode = WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_CONTINUE_ON_SUBTREE,
+      hasTranslucentNavigationBar = isNavigationBarTranslucent,
+    )
 
   // managers/watchers
-  private val modalAttachedWatcher = ModalAttachedWatcher(this, reactContext, ::config, ::getKeyboardCallback)
+  private val modalAttachedWatcher = ModalAttachedWatcher(this, reactContext, config, ::getKeyboardCallback)
 
   init {
     reactContext.setupWindowDimensionsListener()
@@ -212,6 +211,7 @@ class EdgeToEdgeReactViewGroup(
 
   fun setNavigationBarTranslucent(isNavigationBarTranslucent: Boolean) {
     this.isNavigationBarTranslucent = isNavigationBarTranslucent
+    this.config.hasTranslucentNavigationBar = isNavigationBarTranslucent
   }
 
   fun setPreserveEdgeToEdge(isPreservingEdgeToEdge: Boolean) {

package/android/src/main/java/com/reactnativekeyboardcontroller/views/overlay/OverKeyboardViewGroup.kt

@@ -163,7 +163,7 @@ class OverKeyboardRootViewGroup(
 
   // region RootView methods
   override fun onChildStartedNativeGesture(
-    childView: View,
+    childView: View?,
     ev: MotionEvent,
   ) {
     eventDispatcher?.let { eventDispatcher ->

package/android/src/main/java/com/reactnativekeyboardcontroller/views/overlay/RootViewCompat.kt

@@ -12,7 +12,7 @@ interface RootViewCompat : RootView {
     "This method shouldn't be used anymore.",
     ReplaceWith("onChildStartedNativeGesture(View childView, MotionEvent ev)"),
   )
-  override fun onChildStartedNativeGesture(ev: MotionEvent?) {
+  override fun onChildStartedNativeGesture(ev: MotionEvent) {
     onChildStartedNativeGesture(null, ev)
   }
 }

package/android/src/turbo/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt

@@ -1,6 +1,5 @@
 package com.reactnativekeyboardcontroller
 
-import androidx.annotation.Nullable
 import com.facebook.react.TurboReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
@@ -11,7 +10,6 @@ import com.reactnativekeyboardcontroller.modules.KeyboardControllerModuleImpl
 import com.reactnativekeyboardcontroller.modules.StatusBarManagerCompatModuleImpl
 
 class KeyboardControllerPackage : TurboReactPackage() {
-  @Nullable
   override fun getModule(
     name: String,
     reactContext: ReactApplicationContext,

package/lib/commonjs/components/KeyboardAvoidingView/hooks.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useKeyboardAnimation = void 0;
+exports.useTranslateAnimation = exports.useKeyboardAnimation = void 0;
 var _react = require("react");
+var _reactNative = require("react-native");
 var _reactNativeReanimated = require("react-native-reanimated");
 var _context = require("../../context");
 var _hooks = require("../../hooks");
+const OS = _reactNative.Platform.OS;
 const useKeyboardAnimation = () => {
   const {
     reanimated
@@ -58,4 +60,53 @@ const useKeyboardAnimation = () => {
   };
 };
 exports.useKeyboardAnimation = useKeyboardAnimation;
+const useTranslateAnimation = () => {
+  const {
+    reanimated
+  } = (0, _context.useKeyboardContext)();
+
+  // calculate it only once on mount, to avoid `SharedValue` reads during a render
+  const [initialProgress] = (0, _react.useState)(() => reanimated.progress.value);
+  const padding = (0, _reactNativeReanimated.useSharedValue)(initialProgress);
+  const translate = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _hooks.useKeyboardHandler)({
+    onStart: e => {
+      "worklet";
+
+      if (e.height === 0) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        padding.value = 0;
+      }
+      if (OS === "ios") {
+        translate.value = e.progress;
+      }
+    },
+    onMove: e => {
+      "worklet";
+
+      if (OS === "android") {
+        translate.value = e.progress;
+      }
+    },
+    onInteractive: e => {
+      "worklet";
+
+      padding.value = 0;
+      translate.value = e.progress;
+    },
+    onEnd: e => {
+      "worklet";
+
+      padding.value = e.progress;
+      if (OS === "android") {
+        translate.value = e.progress;
+      }
+    }
+  }, []);
+  return {
+    translate,
+    padding
+  };
+};
+exports.useTranslateAnimation = useTranslateAnimation;
 //# sourceMappingURL=hooks.js.map

package/lib/commonjs/components/KeyboardAvoidingView/hooks.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNativeReanimated","_context","_hooks","useKeyboardAnimation","reanimated","useKeyboardContext","initialHeight","useState","height","value","initialProgress","progress","heightWhenOpened","useSharedValue","isClosed","useKeyboardHandler","onStart","e","onMove","onInteractive","onEnd","exports"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nexport const useKeyboardAnimation = () => {\n  const { reanimated } = useKeyboardContext();\n\n  // calculate it only once on mount, to avoid `SharedValue` reads during a render\n  const [initialHeight] = useState(() => -reanimated.height.value);\n  const [initialProgress] = useState(() => reanimated.progress.value);\n\n  const heightWhenOpened = useSharedValue(initialHeight);\n  const height = useSharedValue(initialHeight);\n  const progress = useSharedValue(initialProgress);\n  const isClosed = useSharedValue(initialProgress === 0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        if (e.height > 0) {\n          // eslint-disable-next-line react-compiler/react-compiler\n          isClosed.value = false;\n          heightWhenOpened.value = e.height;\n        }\n      },\n      onMove: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onInteractive: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        isClosed.value = e.height === 0;\n\n        height.value = e.height;\n        progress.value = e.progress;\n      },\n    },\n    [],\n  );\n\n  return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAM;IAAEC;EAAW,CAAC,GAAG,IAAAC,2BAAkB,EAAC,CAAC;;EAE3C;EACA,MAAM,CAACC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM,CAACH,UAAU,CAACI,MAAM,CAACC,KAAK,CAAC;EAChE,MAAM,CAACC,eAAe,CAAC,GAAG,IAAAH,eAAQ,EAAC,MAAMH,UAAU,CAACO,QAAQ,CAACF,KAAK,CAAC;EAEnE,MAAMG,gBAAgB,GAAG,IAAAC,qCAAc,EAACP,aAAa,CAAC;EACtD,MAAME,MAAM,GAAG,IAAAK,qCAAc,EAACP,aAAa,CAAC;EAC5C,MAAMK,QAAQ,GAAG,IAAAE,qCAAc,EAACH,eAAe,CAAC;EAChD,MAAMI,QAAQ,GAAG,IAAAD,qCAAc,EAACH,eAAe,KAAK,CAAC,CAAC;EAEtD,IAAAK,yBAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACT,MAAM,GAAG,CAAC,EAAE;QAChB;QACAM,QAAQ,CAACL,KAAK,GAAG,KAAK;QACtBG,gBAAgB,CAACH,KAAK,GAAGQ,CAAC,CAACT,MAAM;MACnC;IACF,CAAC;IACDU,MAAM,EAAGD,CAAC,IAAK;MACb,SAAS;;MAETN,QAAQ,CAACF,KAAK,GAAGQ,CAAC,CAACN,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGQ,CAAC,CAACT,MAAM;IACzB,CAAC;IACDW,aAAa,EAAGF,CAAC,IAAK;MACpB,SAAS;;MAETN,QAAQ,CAACF,KAAK,GAAGQ,CAAC,CAACN,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGQ,CAAC,CAACT,MAAM;IACzB,CAAC;IACDY,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETH,QAAQ,CAACL,KAAK,GAAGQ,CAAC,CAACT,MAAM,KAAK,CAAC;MAE/BA,MAAM,CAACC,KAAK,GAAGQ,CAAC,CAACT,MAAM;MACvBG,QAAQ,CAACF,KAAK,GAAGQ,CAAC,CAACN,QAAQ;IAC7B;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEH,MAAM;IAAEG,QAAQ;IAAEC,gBAAgB;IAAEE;EAAS,CAAC;AACzD,CAAC;AAACO,OAAA,CAAAlB,oBAAA,GAAAA,oBAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_context","_hooks","OS","Platform","useKeyboardAnimation","reanimated","useKeyboardContext","initialHeight","useState","height","value","initialProgress","progress","heightWhenOpened","useSharedValue","isClosed","useKeyboardHandler","onStart","e","onMove","onInteractive","onEnd","exports","useTranslateAnimation","padding","translate"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Platform } from \"react-native\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst OS = Platform.OS;\n\nexport const useKeyboardAnimation = () => {\n  const { reanimated } = useKeyboardContext();\n\n  // calculate it only once on mount, to avoid `SharedValue` reads during a render\n  const [initialHeight] = useState(() => -reanimated.height.value);\n  const [initialProgress] = useState(() => reanimated.progress.value);\n\n  const heightWhenOpened = useSharedValue(initialHeight);\n  const height = useSharedValue(initialHeight);\n  const progress = useSharedValue(initialProgress);\n  const isClosed = useSharedValue(initialProgress === 0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        if (e.height > 0) {\n          // eslint-disable-next-line react-compiler/react-compiler\n          isClosed.value = false;\n          heightWhenOpened.value = e.height;\n        }\n      },\n      onMove: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onInteractive: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        isClosed.value = e.height === 0;\n\n        height.value = e.height;\n        progress.value = e.progress;\n      },\n    },\n    [],\n  );\n\n  return { height, progress, heightWhenOpened, isClosed };\n};\nexport const useTranslateAnimation = () => {\n  const { reanimated } = useKeyboardContext();\n\n  // calculate it only once on mount, to avoid `SharedValue` reads during a render\n  const [initialProgress] = useState(() => reanimated.progress.value);\n\n  const padding = useSharedValue(initialProgress);\n  const translate = useSharedValue(0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        if (e.height === 0) {\n          // eslint-disable-next-line react-compiler/react-compiler\n          padding.value = 0;\n        }\n        if (OS === \"ios\") {\n          translate.value = e.progress;\n        }\n      },\n      onMove: (e) => {\n        \"worklet\";\n\n        if (OS === \"android\") {\n          translate.value = e.progress;\n        }\n      },\n      onInteractive: (e) => {\n        \"worklet\";\n\n        padding.value = 0;\n\n        translate.value = e.progress;\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        padding.value = e.progress;\n\n        if (OS === \"android\") {\n          translate.value = e.progress;\n        }\n      },\n    },\n    [],\n  );\n\n  return { translate, padding };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/KeyboardAvoidingView/index.js

@@ -35,6 +35,10 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
 }, ref) => {
   const initialFrame = (0, _reactNativeReanimated.useSharedValue)(null);
   const frame = (0, _reactNativeReanimated.useDerivedValue)(() => initialFrame.value || defaultLayout);
+  const {
+    translate,
+    padding
+  } = (0, _hooks2.useTranslateAnimation)();
   const keyboard = (0, _hooks2.useKeyboardAnimation)();
   const {
     height: screenHeight
@@ -45,6 +49,11 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
     const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
     return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
   }, [screenHeight, keyboardVerticalOffset]);
+  const interpolateToRelativeKeyboardHeight = (0, _react.useCallback)(value => {
+    "worklet";
+
+    return (0, _reactNativeReanimated.interpolate)(value, [0, 1], [0, relativeKeyboardHeight()]);
+  }, [relativeKeyboardHeight]);
   const onLayoutWorklet = (0, _react.useCallback)(layout => {
     "worklet";
 
@@ -58,7 +67,9 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
     onLayoutProps === null || onLayoutProps === void 0 || onLayoutProps(e);
   }, [onLayoutProps]);
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const bottom = (0, _reactNativeReanimated.interpolate)(keyboard.progress.value, [0, 1], [0, relativeKeyboardHeight()]);
+    const bottom = interpolateToRelativeKeyboardHeight(keyboard.progress.value);
+    const translateY = interpolateToRelativeKeyboardHeight(translate.value);
+    const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);
     const bottomHeight = enabled ? bottom : 0;
     switch (behavior) {
       case "height":
@@ -77,10 +88,17 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
         return {
           paddingBottom: bottomHeight
         };
+      case "translate-with-padding":
+        return {
+          paddingTop: paddingBottom,
+          transform: [{
+            translateY: -translateY
+          }]
+        };
       default:
         return {};
     }
-  }, [behavior, enabled, relativeKeyboardHeight]);
+  }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
   const isPositionBehavior = behavior === "position";
   const containerStyle = isPositionBehavior ? contentContainerStyle : style;
   const combinedStyles = (0, _react.useMemo)(() => [containerStyle, animatedStyle], [containerStyle, animatedStyle]);

package/lib/commonjs/components/KeyboardAvoidingView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_hooks","_hooks2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","defaultLayout","x","y","width","height","KeyboardAvoidingView","forwardRef","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","useSharedValue","frame","useDerivedValue","value","keyboard","useKeyboardAnimation","screenHeight","useWindowDimensions","relativeKeyboardHeight","useCallback","keyboardY","heightWhenOpened","Math","max","onLayoutWorklet","layout","isClosed","runOnUI","nativeEvent","animatedStyle","useAnimatedStyle","bottom","interpolate","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles","useMemo","createElement","View","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport Reanimated, {\n  interpolate,\n  runOnUI,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport { useKeyboardAnimation } from \"./hooks\";\n\nimport type { LayoutRectangle, ViewProps } from \"react-native\";\n\nexport type KeyboardAvoidingViewBaseProps = {\n  /**\n   * Controls whether this `KeyboardAvoidingView` instance should take effect.\n   * This is useful when more than one is on the screen. Defaults to true.\n   */\n  enabled?: boolean;\n\n  /**\n   * Distance between the top of the user screen and the React Native view. This\n   * may be non-zero in some cases. Defaults to 0.\n   */\n  keyboardVerticalOffset?: number;\n} & ViewProps;\n\nexport type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &\n  (\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"position\";\n\n        /**\n         * Style of the content container when `behavior` is 'position'.\n         */\n        contentContainerStyle?: ViewProps[\"style\"];\n      }\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"height\" | \"padding\";\n\n        /**\n         * `contentContainerStyle` is not allowed for these behaviors.\n         */\n        contentContainerStyle?: never;\n      }\n  );\n\nconst defaultLayout: LayoutRectangle = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<\n  View,\n  React.PropsWithChildren<KeyboardAvoidingViewProps>\n>(\n  (\n    {\n      behavior,\n      children,\n      contentContainerStyle,\n      enabled = true,\n      keyboardVerticalOffset = 0,\n      style,\n      onLayout: onLayoutProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n    const keyboard = useKeyboardAnimation();\n    const { height: screenHeight } = useWindowDimensions();\n\n    const relativeKeyboardHeight = useCallback(() => {\n      \"worklet\";\n\n      const keyboardY =\n        screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n      return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n    }, [screenHeight, keyboardVerticalOffset]);\n\n    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {\n      \"worklet\";\n\n      if (keyboard.isClosed.value || initialFrame.value === null) {\n        // eslint-disable-next-line react-compiler/react-compiler\n        initialFrame.value = layout;\n      }\n    }, []);\n    const onLayout = useCallback<NonNullable<ViewProps[\"onLayout\"]>>(\n      (e) => {\n        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n        onLayoutProps?.(e);\n      },\n      [onLayoutProps],\n    );\n\n    const animatedStyle = useAnimatedStyle(() => {\n      const bottom = interpolate(\n        keyboard.progress.value,\n        [0, 1],\n        [0, relativeKeyboardHeight()],\n      );\n      const bottomHeight = enabled ? bottom : 0;\n\n      switch (behavior) {\n        case \"height\":\n          if (!keyboard.isClosed.value) {\n            return {\n              height: frame.value.height - bottomHeight,\n              flex: 0,\n            };\n          }\n\n          return {};\n\n        case \"position\":\n          return { bottom: bottomHeight };\n\n        case \"padding\":\n          return { paddingBottom: bottomHeight };\n\n        default:\n          return {};\n      }\n    }, [behavior, enabled, relativeKeyboardHeight]);\n    const isPositionBehavior = behavior === \"position\";\n    const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n    const combinedStyles = useMemo(\n      () => [containerStyle, animatedStyle],\n      [containerStyle, animatedStyle],\n    );\n\n    if (isPositionBehavior) {\n      return (\n        <View ref={ref} style={style} onLayout={onLayout} {...props}>\n          <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n        </View>\n      );\n    }\n\n    return (\n      <Reanimated.View\n        ref={ref}\n        style={combinedStyles}\n        onLayout={onLayout}\n        {...props}\n      >\n        {children}\n      </Reanimated.View>\n    );\n  },\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_hooks","_hooks2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","defaultLayout","x","y","width","height","KeyboardAvoidingView","forwardRef","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","useSharedValue","frame","useDerivedValue","value","translate","padding","useTranslateAnimation","keyboard","useKeyboardAnimation","screenHeight","useWindowDimensions","relativeKeyboardHeight","useCallback","keyboardY","heightWhenOpened","Math","max","interpolateToRelativeKeyboardHeight","interpolate","onLayoutWorklet","layout","isClosed","runOnUI","nativeEvent","animatedStyle","useAnimatedStyle","bottom","progress","translateY","paddingBottom","bottomHeight","flex","paddingTop","transform","isPositionBehavior","containerStyle","combinedStyles","useMemo","createElement","View","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport Reanimated, {\n  interpolate,\n  runOnUI,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport { useKeyboardAnimation, useTranslateAnimation } from \"./hooks\";\n\nimport type { LayoutRectangle, ViewProps } from \"react-native\";\n\nexport type KeyboardAvoidingViewBaseProps = {\n  /**\n   * Controls whether this `KeyboardAvoidingView` instance should take effect.\n   * This is useful when more than one is on the screen. Defaults to true.\n   */\n  enabled?: boolean;\n\n  /**\n   * Distance between the top of the user screen and the React Native view. This\n   * may be non-zero in some cases. Defaults to 0.\n   */\n  keyboardVerticalOffset?: number;\n} & ViewProps;\n\nexport type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &\n  (\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"position\";\n\n        /**\n         * Style of the content container when `behavior` is 'position'.\n         */\n        contentContainerStyle?: ViewProps[\"style\"];\n      }\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"height\" | \"padding\" | \"translate-with-padding\";\n\n        /**\n         * `contentContainerStyle` is not allowed for these behaviors.\n         */\n        contentContainerStyle?: never;\n      }\n  );\n\nconst defaultLayout: LayoutRectangle = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<\n  View,\n  React.PropsWithChildren<KeyboardAvoidingViewProps>\n>(\n  (\n    {\n      behavior,\n      children,\n      contentContainerStyle,\n      enabled = true,\n      keyboardVerticalOffset = 0,\n      style,\n      onLayout: onLayoutProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n    const { translate, padding } = useTranslateAnimation();\n    const keyboard = useKeyboardAnimation();\n    const { height: screenHeight } = useWindowDimensions();\n\n    const relativeKeyboardHeight = useCallback(() => {\n      \"worklet\";\n\n      const keyboardY =\n        screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n      return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n    }, [screenHeight, keyboardVerticalOffset]);\n    const interpolateToRelativeKeyboardHeight = useCallback(\n      (value: number) => {\n        \"worklet\";\n\n        return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);\n      },\n      [relativeKeyboardHeight],\n    );\n\n    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {\n      \"worklet\";\n\n      if (keyboard.isClosed.value || initialFrame.value === null) {\n        // eslint-disable-next-line react-compiler/react-compiler\n        initialFrame.value = layout;\n      }\n    }, []);\n    const onLayout = useCallback<NonNullable<ViewProps[\"onLayout\"]>>(\n      (e) => {\n        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n        onLayoutProps?.(e);\n      },\n      [onLayoutProps],\n    );\n\n    const animatedStyle = useAnimatedStyle(() => {\n      const bottom = interpolateToRelativeKeyboardHeight(\n        keyboard.progress.value,\n      );\n      const translateY = interpolateToRelativeKeyboardHeight(translate.value);\n      const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);\n      const bottomHeight = enabled ? bottom : 0;\n\n      switch (behavior) {\n        case \"height\":\n          if (!keyboard.isClosed.value) {\n            return {\n              height: frame.value.height - bottomHeight,\n              flex: 0,\n            };\n          }\n\n          return {};\n\n        case \"position\":\n          return { bottom: bottomHeight };\n\n        case \"padding\":\n          return { paddingBottom: bottomHeight };\n\n        case \"translate-with-padding\":\n          return {\n            paddingTop: paddingBottom,\n            transform: [{ translateY: -translateY }],\n          };\n\n        default:\n          return {};\n      }\n    }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);\n    const isPositionBehavior = behavior === \"position\";\n    const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n    const combinedStyles = useMemo(\n      () => [containerStyle, animatedStyle],\n      [containerStyle, animatedStyle],\n    );\n\n    if (isPositionBehavior) {\n      return (\n        <View ref={ref} style={style} onLayout={onLayout} {...props}>\n          <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n        </View>\n      );\n    }\n\n    return (\n      <Reanimated.View\n        ref={ref}\n        style={combinedStyles}\n        onLayout={onLayout}\n        {...props}\n      >\n        {children}\n      </Reanimated.View>\n    );\n  },\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/KeyboardAvoidingView/hooks.js

@@ -1,7 +1,9 @@
 import { useState } from "react";
+import { Platform } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { useKeyboardContext } from "../../context";
 import { useKeyboardHandler } from "../../hooks";
+const OS = Platform.OS;
 export const useKeyboardAnimation = () => {
   const {
     reanimated
@@ -51,4 +53,52 @@ export const useKeyboardAnimation = () => {
     isClosed
   };
 };
+export const useTranslateAnimation = () => {
+  const {
+    reanimated
+  } = useKeyboardContext();
+
+  // calculate it only once on mount, to avoid `SharedValue` reads during a render
+  const [initialProgress] = useState(() => reanimated.progress.value);
+  const padding = useSharedValue(initialProgress);
+  const translate = useSharedValue(0);
+  useKeyboardHandler({
+    onStart: e => {
+      "worklet";
+
+      if (e.height === 0) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        padding.value = 0;
+      }
+      if (OS === "ios") {
+        translate.value = e.progress;
+      }
+    },
+    onMove: e => {
+      "worklet";
+
+      if (OS === "android") {
+        translate.value = e.progress;
+      }
+    },
+    onInteractive: e => {
+      "worklet";
+
+      padding.value = 0;
+      translate.value = e.progress;
+    },
+    onEnd: e => {
+      "worklet";
+
+      padding.value = e.progress;
+      if (OS === "android") {
+        translate.value = e.progress;
+      }
+    }
+  }, []);
+  return {
+    translate,
+    padding
+  };
+};
 //# sourceMappingURL=hooks.js.map

package/lib/module/components/KeyboardAvoidingView/hooks.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","useSharedValue","useKeyboardContext","useKeyboardHandler","useKeyboardAnimation","reanimated","initialHeight","height","value","initialProgress","progress","heightWhenOpened","isClosed","onStart","e","onMove","onInteractive","onEnd"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nexport const useKeyboardAnimation = () => {\n  const { reanimated } = useKeyboardContext();\n\n  // calculate it only once on mount, to avoid `SharedValue` reads during a render\n  const [initialHeight] = useState(() => -reanimated.height.value);\n  const [initialProgress] = useState(() => reanimated.progress.value);\n\n  const heightWhenOpened = useSharedValue(initialHeight);\n  const height = useSharedValue(initialHeight);\n  const progress = useSharedValue(initialProgress);\n  const isClosed = useSharedValue(initialProgress === 0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        if (e.height > 0) {\n          // eslint-disable-next-line react-compiler/react-compiler\n          isClosed.value = false;\n          heightWhenOpened.value = e.height;\n        }\n      },\n      onMove: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onInteractive: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        isClosed.value = e.height === 0;\n\n        height.value = e.height;\n        progress.value = e.progress;\n      },\n    },\n    [],\n  );\n\n  return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAASC,kBAAkB,QAAQ,eAAe;AAClD,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAM;IAAEC;EAAW,CAAC,GAAGH,kBAAkB,CAAC,CAAC;;EAE3C;EACA,MAAM,CAACI,aAAa,CAAC,GAAGN,QAAQ,CAAC,MAAM,CAACK,UAAU,CAACE,MAAM,CAACC,KAAK,CAAC;EAChE,MAAM,CAACC,eAAe,CAAC,GAAGT,QAAQ,CAAC,MAAMK,UAAU,CAACK,QAAQ,CAACF,KAAK,CAAC;EAEnE,MAAMG,gBAAgB,GAAGV,cAAc,CAACK,aAAa,CAAC;EACtD,MAAMC,MAAM,GAAGN,cAAc,CAACK,aAAa,CAAC;EAC5C,MAAMI,QAAQ,GAAGT,cAAc,CAACQ,eAAe,CAAC;EAChD,MAAMG,QAAQ,GAAGX,cAAc,CAACQ,eAAe,KAAK,CAAC,CAAC;EAEtDN,kBAAkB,CAChB;IACEU,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACP,MAAM,GAAG,CAAC,EAAE;QAChB;QACAK,QAAQ,CAACJ,KAAK,GAAG,KAAK;QACtBG,gBAAgB,CAACH,KAAK,GAAGM,CAAC,CAACP,MAAM;MACnC;IACF,CAAC;IACDQ,MAAM,EAAGD,CAAC,IAAK;MACb,SAAS;;MAETJ,QAAQ,CAACF,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGM,CAAC,CAACP,MAAM;IACzB,CAAC;IACDS,aAAa,EAAGF,CAAC,IAAK;MACpB,SAAS;;MAETJ,QAAQ,CAACF,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGM,CAAC,CAACP,MAAM;IACzB,CAAC;IACDU,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETF,QAAQ,CAACJ,KAAK,GAAGM,CAAC,CAACP,MAAM,KAAK,CAAC;MAE/BA,MAAM,CAACC,KAAK,GAAGM,CAAC,CAACP,MAAM;MACvBG,QAAQ,CAACF,KAAK,GAAGM,CAAC,CAACJ,QAAQ;IAC7B;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEH,MAAM;IAAEG,QAAQ;IAAEC,gBAAgB;IAAEC;EAAS,CAAC;AACzD,CAAC","ignoreList":[]}
+{"version":3,"names":["useState","Platform","useSharedValue","useKeyboardContext","useKeyboardHandler","OS","useKeyboardAnimation","reanimated","initialHeight","height","value","initialProgress","progress","heightWhenOpened","isClosed","onStart","e","onMove","onInteractive","onEnd","useTranslateAnimation","padding","translate"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Platform } from \"react-native\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst OS = Platform.OS;\n\nexport const useKeyboardAnimation = () => {\n  const { reanimated } = useKeyboardContext();\n\n  // calculate it only once on mount, to avoid `SharedValue` reads during a render\n  const [initialHeight] = useState(() => -reanimated.height.value);\n  const [initialProgress] = useState(() => reanimated.progress.value);\n\n  const heightWhenOpened = useSharedValue(initialHeight);\n  const height = useSharedValue(initialHeight);\n  const progress = useSharedValue(initialProgress);\n  const isClosed = useSharedValue(initialProgress === 0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        if (e.height > 0) {\n          // eslint-disable-next-line react-compiler/react-compiler\n          isClosed.value = false;\n          heightWhenOpened.value = e.height;\n        }\n      },\n      onMove: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onInteractive: (e) => {\n        \"worklet\";\n\n        progress.value = e.progress;\n        height.value = e.height;\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        isClosed.value = e.height === 0;\n\n        height.value = e.height;\n        progress.value = e.progress;\n      },\n    },\n    [],\n  );\n\n  return { height, progress, heightWhenOpened, isClosed };\n};\nexport const useTranslateAnimation = () => {\n  const { reanimated } = useKeyboardContext();\n\n  // calculate it only once on mount, to avoid `SharedValue` reads during a render\n  const [initialProgress] = useState(() => reanimated.progress.value);\n\n  const padding = useSharedValue(initialProgress);\n  const translate = useSharedValue(0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        if (e.height === 0) {\n          // eslint-disable-next-line react-compiler/react-compiler\n          padding.value = 0;\n        }\n        if (OS === \"ios\") {\n          translate.value = e.progress;\n        }\n      },\n      onMove: (e) => {\n        \"worklet\";\n\n        if (OS === \"android\") {\n          translate.value = e.progress;\n        }\n      },\n      onInteractive: (e) => {\n        \"worklet\";\n\n        padding.value = 0;\n\n        translate.value = e.progress;\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        padding.value = e.progress;\n\n        if (OS === \"android\") {\n          translate.value = e.progress;\n        }\n      },\n    },\n    [],\n  );\n\n  return { translate, padding };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/KeyboardAvoidingView/index.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useCallback, useMemo } from "react";
 import { View } from "react-native";
 import Reanimated, { interpolate, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { useWindowDimensions } from "../../hooks";
-import { useKeyboardAnimation } from "./hooks";
+import { useKeyboardAnimation, useTranslateAnimation } from "./hooks";
 const defaultLayout = {
   x: 0,
   y: 0,
@@ -27,6 +27,10 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const initialFrame = useSharedValue(null);
   const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
+  const {
+    translate,
+    padding
+  } = useTranslateAnimation();
   const keyboard = useKeyboardAnimation();
   const {
     height: screenHeight
@@ -37,6 +41,11 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
     const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
     return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
   }, [screenHeight, keyboardVerticalOffset]);
+  const interpolateToRelativeKeyboardHeight = useCallback(value => {
+    "worklet";
+
+    return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);
+  }, [relativeKeyboardHeight]);
   const onLayoutWorklet = useCallback(layout => {
     "worklet";
 
@@ -50,7 +59,9 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
     onLayoutProps === null || onLayoutProps === void 0 || onLayoutProps(e);
   }, [onLayoutProps]);
   const animatedStyle = useAnimatedStyle(() => {
-    const bottom = interpolate(keyboard.progress.value, [0, 1], [0, relativeKeyboardHeight()]);
+    const bottom = interpolateToRelativeKeyboardHeight(keyboard.progress.value);
+    const translateY = interpolateToRelativeKeyboardHeight(translate.value);
+    const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);
     const bottomHeight = enabled ? bottom : 0;
     switch (behavior) {
       case "height":
@@ -69,10 +80,17 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
         return {
           paddingBottom: bottomHeight
         };
+      case "translate-with-padding":
+        return {
+          paddingTop: paddingBottom,
+          transform: [{
+            translateY: -translateY
+          }]
+        };
       default:
         return {};
     }
-  }, [behavior, enabled, relativeKeyboardHeight]);
+  }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
   const isPositionBehavior = behavior === "position";
   const containerStyle = isPositionBehavior ? contentContainerStyle : style;
   const combinedStyles = useMemo(() => [containerStyle, animatedStyle], [containerStyle, animatedStyle]);

package/lib/module/components/KeyboardAvoidingView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useCallback","useMemo","View","Reanimated","interpolate","runOnUI","useAnimatedStyle","useDerivedValue","useSharedValue","useWindowDimensions","useKeyboardAnimation","defaultLayout","x","y","width","height","KeyboardAvoidingView","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","frame","value","keyboard","screenHeight","relativeKeyboardHeight","keyboardY","heightWhenOpened","Math","max","onLayoutWorklet","layout","isClosed","e","nativeEvent","animatedStyle","bottom","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles","createElement","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport Reanimated, {\n  interpolate,\n  runOnUI,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport { useKeyboardAnimation } from \"./hooks\";\n\nimport type { LayoutRectangle, ViewProps } from \"react-native\";\n\nexport type KeyboardAvoidingViewBaseProps = {\n  /**\n   * Controls whether this `KeyboardAvoidingView` instance should take effect.\n   * This is useful when more than one is on the screen. Defaults to true.\n   */\n  enabled?: boolean;\n\n  /**\n   * Distance between the top of the user screen and the React Native view. This\n   * may be non-zero in some cases. Defaults to 0.\n   */\n  keyboardVerticalOffset?: number;\n} & ViewProps;\n\nexport type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &\n  (\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"position\";\n\n        /**\n         * Style of the content container when `behavior` is 'position'.\n         */\n        contentContainerStyle?: ViewProps[\"style\"];\n      }\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"height\" | \"padding\";\n\n        /**\n         * `contentContainerStyle` is not allowed for these behaviors.\n         */\n        contentContainerStyle?: never;\n      }\n  );\n\nconst defaultLayout: LayoutRectangle = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<\n  View,\n  React.PropsWithChildren<KeyboardAvoidingViewProps>\n>(\n  (\n    {\n      behavior,\n      children,\n      contentContainerStyle,\n      enabled = true,\n      keyboardVerticalOffset = 0,\n      style,\n      onLayout: onLayoutProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n    const keyboard = useKeyboardAnimation();\n    const { height: screenHeight } = useWindowDimensions();\n\n    const relativeKeyboardHeight = useCallback(() => {\n      \"worklet\";\n\n      const keyboardY =\n        screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n      return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n    }, [screenHeight, keyboardVerticalOffset]);\n\n    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {\n      \"worklet\";\n\n      if (keyboard.isClosed.value || initialFrame.value === null) {\n        // eslint-disable-next-line react-compiler/react-compiler\n        initialFrame.value = layout;\n      }\n    }, []);\n    const onLayout = useCallback<NonNullable<ViewProps[\"onLayout\"]>>(\n      (e) => {\n        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n        onLayoutProps?.(e);\n      },\n      [onLayoutProps],\n    );\n\n    const animatedStyle = useAnimatedStyle(() => {\n      const bottom = interpolate(\n        keyboard.progress.value,\n        [0, 1],\n        [0, relativeKeyboardHeight()],\n      );\n      const bottomHeight = enabled ? bottom : 0;\n\n      switch (behavior) {\n        case \"height\":\n          if (!keyboard.isClosed.value) {\n            return {\n              height: frame.value.height - bottomHeight,\n              flex: 0,\n            };\n          }\n\n          return {};\n\n        case \"position\":\n          return { bottom: bottomHeight };\n\n        case \"padding\":\n          return { paddingBottom: bottomHeight };\n\n        default:\n          return {};\n      }\n    }, [behavior, enabled, relativeKeyboardHeight]);\n    const isPositionBehavior = behavior === \"position\";\n    const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n    const combinedStyles = useMemo(\n      () => [containerStyle, animatedStyle],\n      [containerStyle, animatedStyle],\n    );\n\n    if (isPositionBehavior) {\n      return (\n        <View ref={ref} style={style} onLayout={onLayout} {...props}>\n          <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n        </View>\n      );\n    }\n\n    return (\n      <Reanimated.View\n        ref={ref}\n        style={combinedStyles}\n        onLayout={onLayout}\n        {...props}\n      >\n        {children}\n      </Reanimated.View>\n    );\n  },\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","useCallback","useMemo","View","Reanimated","interpolate","runOnUI","useAnimatedStyle","useDerivedValue","useSharedValue","useWindowDimensions","useKeyboardAnimation","useTranslateAnimation","defaultLayout","x","y","width","height","KeyboardAvoidingView","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","frame","value","translate","padding","keyboard","screenHeight","relativeKeyboardHeight","keyboardY","heightWhenOpened","Math","max","interpolateToRelativeKeyboardHeight","onLayoutWorklet","layout","isClosed","e","nativeEvent","animatedStyle","bottom","progress","translateY","paddingBottom","bottomHeight","flex","paddingTop","transform","isPositionBehavior","containerStyle","combinedStyles","createElement","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport Reanimated, {\n  interpolate,\n  runOnUI,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport { useKeyboardAnimation, useTranslateAnimation } from \"./hooks\";\n\nimport type { LayoutRectangle, ViewProps } from \"react-native\";\n\nexport type KeyboardAvoidingViewBaseProps = {\n  /**\n   * Controls whether this `KeyboardAvoidingView` instance should take effect.\n   * This is useful when more than one is on the screen. Defaults to true.\n   */\n  enabled?: boolean;\n\n  /**\n   * Distance between the top of the user screen and the React Native view. This\n   * may be non-zero in some cases. Defaults to 0.\n   */\n  keyboardVerticalOffset?: number;\n} & ViewProps;\n\nexport type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &\n  (\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"position\";\n\n        /**\n         * Style of the content container when `behavior` is 'position'.\n         */\n        contentContainerStyle?: ViewProps[\"style\"];\n      }\n    | {\n        /**\n         * Specify how to react to the presence of the keyboard.\n         */\n        behavior?: \"height\" | \"padding\" | \"translate-with-padding\";\n\n        /**\n         * `contentContainerStyle` is not allowed for these behaviors.\n         */\n        contentContainerStyle?: never;\n      }\n  );\n\nconst defaultLayout: LayoutRectangle = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<\n  View,\n  React.PropsWithChildren<KeyboardAvoidingViewProps>\n>(\n  (\n    {\n      behavior,\n      children,\n      contentContainerStyle,\n      enabled = true,\n      keyboardVerticalOffset = 0,\n      style,\n      onLayout: onLayoutProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n    const { translate, padding } = useTranslateAnimation();\n    const keyboard = useKeyboardAnimation();\n    const { height: screenHeight } = useWindowDimensions();\n\n    const relativeKeyboardHeight = useCallback(() => {\n      \"worklet\";\n\n      const keyboardY =\n        screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n      return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n    }, [screenHeight, keyboardVerticalOffset]);\n    const interpolateToRelativeKeyboardHeight = useCallback(\n      (value: number) => {\n        \"worklet\";\n\n        return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);\n      },\n      [relativeKeyboardHeight],\n    );\n\n    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {\n      \"worklet\";\n\n      if (keyboard.isClosed.value || initialFrame.value === null) {\n        // eslint-disable-next-line react-compiler/react-compiler\n        initialFrame.value = layout;\n      }\n    }, []);\n    const onLayout = useCallback<NonNullable<ViewProps[\"onLayout\"]>>(\n      (e) => {\n        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n        onLayoutProps?.(e);\n      },\n      [onLayoutProps],\n    );\n\n    const animatedStyle = useAnimatedStyle(() => {\n      const bottom = interpolateToRelativeKeyboardHeight(\n        keyboard.progress.value,\n      );\n      const translateY = interpolateToRelativeKeyboardHeight(translate.value);\n      const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);\n      const bottomHeight = enabled ? bottom : 0;\n\n      switch (behavior) {\n        case \"height\":\n          if (!keyboard.isClosed.value) {\n            return {\n              height: frame.value.height - bottomHeight,\n              flex: 0,\n            };\n          }\n\n          return {};\n\n        case \"position\":\n          return { bottom: bottomHeight };\n\n        case \"padding\":\n          return { paddingBottom: bottomHeight };\n\n        case \"translate-with-padding\":\n          return {\n            paddingTop: paddingBottom,\n            transform: [{ translateY: -translateY }],\n          };\n\n        default:\n          return {};\n      }\n    }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);\n    const isPositionBehavior = behavior === \"position\";\n    const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n    const combinedStyles = useMemo(\n      () => [containerStyle, animatedStyle],\n      [containerStyle, animatedStyle],\n    );\n\n    if (isPositionBehavior) {\n      return (\n        <View ref={ref} style={style} onLayout={onLayout} {...props}>\n          <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n        </View>\n      );\n    }\n\n    return (\n      <Reanimated.View\n        ref={ref}\n        style={combinedStyles}\n        onLayout={onLayout}\n        {...props}\n      >\n        {children}\n      </Reanimated.View>\n    );\n  },\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/components/KeyboardAvoidingView/hooks.d.ts

@@ -4,3 +4,7 @@ export declare const useKeyboardAnimation: () => {
     heightWhenOpened: import("react-native-reanimated").SharedValue<number>;
     isClosed: import("react-native-reanimated").SharedValue<boolean>;
 };
+export declare const useTranslateAnimation: () => {
+    translate: import("react-native-reanimated").SharedValue<number>;
+    padding: import("react-native-reanimated").SharedValue<number>;
+};

package/lib/typescript/components/KeyboardAvoidingView/index.d.ts

@@ -26,7 +26,7 @@ export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps & ({
     /**
      * Specify how to react to the presence of the keyboard.
      */
-    behavior?: "height" | "padding";
+    behavior?: "height" | "padding" | "translate-with-padding";
     /**
      * `contentContainerStyle` is not allowed for these behaviors.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.16.3",
+  "version": "1.16.5",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -1,9 +1,12 @@
 import { useState } from "react";
+import { Platform } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 
 import { useKeyboardContext } from "../../context";
 import { useKeyboardHandler } from "../../hooks";
 
+const OS = Platform.OS;
+
 export const useKeyboardAnimation = () => {
   const { reanimated } = useKeyboardContext();
 
@@ -53,3 +56,54 @@ export const useKeyboardAnimation = () => {
 
   return { height, progress, heightWhenOpened, isClosed };
 };
+export const useTranslateAnimation = () => {
+  const { reanimated } = useKeyboardContext();
+
+  // calculate it only once on mount, to avoid `SharedValue` reads during a render
+  const [initialProgress] = useState(() => reanimated.progress.value);
+
+  const padding = useSharedValue(initialProgress);
+  const translate = useSharedValue(0);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        if (e.height === 0) {
+          // eslint-disable-next-line react-compiler/react-compiler
+          padding.value = 0;
+        }
+        if (OS === "ios") {
+          translate.value = e.progress;
+        }
+      },
+      onMove: (e) => {
+        "worklet";
+
+        if (OS === "android") {
+          translate.value = e.progress;
+        }
+      },
+      onInteractive: (e) => {
+        "worklet";
+
+        padding.value = 0;
+
+        translate.value = e.progress;
+      },
+      onEnd: (e) => {
+        "worklet";
+
+        padding.value = e.progress;
+
+        if (OS === "android") {
+          translate.value = e.progress;
+        }
+      },
+    },
+    [],
+  );
+
+  return { translate, padding };
+};

package/src/components/KeyboardAvoidingView/index.tsx

@@ -10,7 +10,7 @@ import Reanimated, {
 
 import { useWindowDimensions } from "../../hooks";
 
-import { useKeyboardAnimation } from "./hooks";
+import { useKeyboardAnimation, useTranslateAnimation } from "./hooks";
 
 import type { LayoutRectangle, ViewProps } from "react-native";
 
@@ -45,7 +45,7 @@ export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &
         /**
          * Specify how to react to the presence of the keyboard.
          */
-        behavior?: "height" | "padding";
+        behavior?: "height" | "padding" | "translate-with-padding";
 
         /**
          * `contentContainerStyle` is not allowed for these behaviors.
@@ -85,6 +85,7 @@ const KeyboardAvoidingView = forwardRef<
     const initialFrame = useSharedValue<LayoutRectangle | null>(null);
     const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
 
+    const { translate, padding } = useTranslateAnimation();
     const keyboard = useKeyboardAnimation();
     const { height: screenHeight } = useWindowDimensions();
 
@@ -96,6 +97,14 @@ const KeyboardAvoidingView = forwardRef<
 
       return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
     }, [screenHeight, keyboardVerticalOffset]);
+    const interpolateToRelativeKeyboardHeight = useCallback(
+      (value: number) => {
+        "worklet";
+
+        return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);
+      },
+      [relativeKeyboardHeight],
+    );
 
     const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
       "worklet";
@@ -114,11 +123,11 @@ const KeyboardAvoidingView = forwardRef<
     );
 
     const animatedStyle = useAnimatedStyle(() => {
-      const bottom = interpolate(
+      const bottom = interpolateToRelativeKeyboardHeight(
         keyboard.progress.value,
-        [0, 1],
-        [0, relativeKeyboardHeight()],
       );
+      const translateY = interpolateToRelativeKeyboardHeight(translate.value);
+      const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);
       const bottomHeight = enabled ? bottom : 0;
 
       switch (behavior) {
@@ -138,10 +147,16 @@ const KeyboardAvoidingView = forwardRef<
         case "padding":
           return { paddingBottom: bottomHeight };
 
+        case "translate-with-padding":
+          return {
+            paddingTop: paddingBottom,
+            transform: [{ translateY: -translateY }],
+          };
+
         default:
           return {};
       }
-    }, [behavior, enabled, relativeKeyboardHeight]);
+    }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
     const isPositionBehavior = behavior === "position";
     const containerStyle = isPositionBehavior ? contentContainerStyle : style;
     const combinedStyles = useMemo(