react-native-keyboard-controller 1.6.1 → 1.7.0

package/README.md

@@ -13,6 +13,7 @@ Keyboard manager which works in identical way on both iOS and Android.
 - module for changing soft input mode on Android 🤔
 - reanimated support 🚀
 - interactive keyboard dismissing 👆📱
+- works with any navigation library 🧭
 - and more is coming... Stay tuned! 😊
 
 ## Installation

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

@@ -32,6 +32,7 @@ class KeyboardAnimationCallback(
   dispatchMode: Int = DISPATCH_MODE_STOP,
   val context: ThemedReactContext?,
 ) : WindowInsetsAnimationCompat.Callback(dispatchMode), OnApplyWindowInsetsListener {
+  private val surfaceId = UIManagerHelper.getSurfaceId(view)
   private var persistentKeyboardHeight = 0.0
   private var isKeyboardVisible = false
   private var isTransitioning = false
@@ -57,6 +58,7 @@ class KeyboardAnimationCallback(
           // can bring breaking changes
           this.sendEventToJS(
             KeyboardTransitionEvent(
+              surfaceId,
               view.id,
               "topKeyboardMoveStart",
               this.persistentKeyboardHeight,
@@ -67,6 +69,7 @@ class KeyboardAnimationCallback(
           )
           this.sendEventToJS(
             KeyboardTransitionEvent(
+              surfaceId,
               view.id,
               "topKeyboardMoveEnd",
               this.persistentKeyboardHeight,
@@ -115,6 +118,7 @@ class KeyboardAnimationCallback(
       this.emitEvent("KeyboardController::keyboardWillShow", getEventParams(keyboardHeight))
       this.sendEventToJS(
         KeyboardTransitionEvent(
+          surfaceId,
           view.id,
           "topKeyboardMoveStart",
           keyboardHeight,
@@ -129,6 +133,7 @@ class KeyboardAnimationCallback(
         val toValue = animator.animatedValue as Float
         this.sendEventToJS(
           KeyboardTransitionEvent(
+            surfaceId,
             view.id,
             "topKeyboardMove",
             toValue.toDouble(),
@@ -142,6 +147,7 @@ class KeyboardAnimationCallback(
         this.emitEvent("KeyboardController::keyboardDidShow", getEventParams(keyboardHeight))
         this.sendEventToJS(
           KeyboardTransitionEvent(
+            surfaceId,
             view.id,
             "topKeyboardMoveEnd",
             keyboardHeight,
@@ -182,6 +188,7 @@ class KeyboardAnimationCallback(
     Log.i(TAG, "HEIGHT:: $keyboardHeight TAG:: $viewTagFocused")
     this.sendEventToJS(
       KeyboardTransitionEvent(
+        surfaceId,
         view.id,
         "topKeyboardMoveStart",
         keyboardHeight,
@@ -223,7 +230,7 @@ class KeyboardAnimationCallback(
     Log.i(TAG, "DiffY: $diffY $height $progress ${InteractiveKeyboardProvider.isInteractive} $viewTagFocused")
 
     val event = if (InteractiveKeyboardProvider.isInteractive) "topKeyboardMoveInteractive" else "topKeyboardMove"
-    this.sendEventToJS(KeyboardTransitionEvent(view.id, event, height, progress, duration, viewTagFocused))
+    this.sendEventToJS(KeyboardTransitionEvent(surfaceId, view.id, event, height, progress, duration, viewTagFocused))
 
     return insets
   }
@@ -254,6 +261,7 @@ class KeyboardAnimationCallback(
     )
     this.sendEventToJS(
       KeyboardTransitionEvent(
+        surfaceId,
         view.id,
         "topKeyboardMoveEnd",
         keyboardHeight,

package/android/src/main/java/com/reactnativekeyboardcontroller/events/KeyboardTransitionEvent.kt

@@ -1,28 +1,28 @@
 package com.reactnativekeyboardcontroller.events
 
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
-import com.facebook.react.uimanager.events.RCTEventEmitter
 
+@Suppress("detekt:LongParameterList")
 class KeyboardTransitionEvent(
+  surfaceId: Int,
   viewId: Int,
   private val event: String,
   private val height: Double,
   private val progress: Double,
   private val duration: Int,
   private val target: Int,
-) : Event<KeyboardTransitionEvent>(viewId) {
+) : Event<KeyboardTransitionEvent>(surfaceId, viewId) {
   override fun getEventName() = event
 
   // All events for a given view can be coalesced?
   override fun getCoalescingKey(): Short = 0
 
-  override fun dispatch(rctEventEmitter: RCTEventEmitter) {
-    val map = Arguments.createMap()
-    map.putDouble("progress", progress)
-    map.putDouble("height", height)
-    map.putInt("duration", duration)
-    map.putInt("target", target)
-    rctEventEmitter.receiveEvent(viewTag, eventName, map)
+  override fun getEventData(): WritableMap? = Arguments.createMap().apply {
+    putDouble("progress", progress)
+    putDouble("height", height)
+    putInt("duration", duration)
+    putInt("target", target)
   }
 }

package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/ViewGroup.kt

@@ -0,0 +1,10 @@
+package com.reactnativekeyboardcontroller.extensions
+
+import android.view.ViewGroup
+
+fun ViewGroup?.removeSelf() {
+  this ?: return
+  val parent = parent as? ViewGroup ?: return
+
+  parent.removeView(this)
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/modules/KeyboardControllerModuleImpl.kt

@@ -5,12 +5,7 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.UiThreadUtil
 
 class KeyboardControllerModuleImpl(private val mReactContext: ReactApplicationContext) {
-  private val mDefaultMode: Int = mReactContext
-    .currentActivity
-    ?.window
-    ?.attributes
-    ?.softInputMode
-    ?: WindowManager.LayoutParams.SOFT_INPUT_STATE_UNSPECIFIED
+  private val mDefaultMode: Int = getCurrentMode()
 
   fun setInputMode(mode: Int) {
     setSoftInputMode(mode)
@@ -22,10 +17,21 @@ class KeyboardControllerModuleImpl(private val mReactContext: ReactApplicationCo
 
   private fun setSoftInputMode(mode: Int) {
     UiThreadUtil.runOnUiThread {
-      mReactContext.currentActivity?.window?.setSoftInputMode(mode)
+      if (getCurrentMode() != mode) {
+        mReactContext.currentActivity?.window?.setSoftInputMode(mode)
+      }
     }
   }
 
+  private fun getCurrentMode(): Int {
+    return mReactContext
+      .currentActivity
+      ?.window
+      ?.attributes
+      ?.softInputMode
+      ?: WindowManager.LayoutParams.SOFT_INPUT_STATE_UNSPECIFIED
+  }
+
   companion object {
     const val NAME = "KeyboardController"
   }

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

@@ -13,6 +13,7 @@ import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 import com.reactnativekeyboardcontroller.KeyboardAnimationCallback
+import com.reactnativekeyboardcontroller.extensions.removeSelf
 import com.reactnativekeyboardcontroller.extensions.requestApplyInsetsWhenAttached
 import com.reactnativekeyboardcontroller.extensions.rootView
 
@@ -22,36 +23,72 @@ private val TAG = EdgeToEdgeReactViewGroup::class.qualifiedName
 class EdgeToEdgeReactViewGroup(private val reactContext: ThemedReactContext) : ReactViewGroup(reactContext) {
   private var isStatusBarTranslucent = false
   private var isNavigationBarTranslucent = false
+  private var eventView: ReactViewGroup? = null
 
-  init {
-    val activity = reactContext.currentActivity
+  // region View lifecycles
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
 
-    if (activity != null) {
-      val callback = KeyboardAnimationCallback(
-        view = this,
-        persistentInsetTypes = WindowInsetsCompat.Type.systemBars(),
-        deferredInsetTypes = WindowInsetsCompat.Type.ime(),
-        // We explicitly allow dispatch to continue down to binding.messageHolder's
-        // child views, so that step 2.5 below receives the call
-        dispatchMode = WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_CONTINUE_ON_SUBTREE,
-        context = reactContext,
-      )
-      ViewCompat.setWindowInsetsAnimationCallback(this, callback)
-      ViewCompat.setOnApplyWindowInsetsListener(this, callback)
-      this.requestApplyInsetsWhenAttached()
-    } else {
+    val activity = reactContext.currentActivity
+    if (activity == null) {
       Log.w(TAG, "Can not setup keyboard animation listener, since `currentActivity` is null")
+      return
+    }
+
+    Handler(Looper.getMainLooper()).post(this::setupWindowInsets)
+    WindowCompat.setDecorFitsSystemWindows(
+      activity.window,
+      false,
+    )
+
+    eventView = ReactViewGroup(context)
+    val root = this.getContentView()
+    root?.addView(eventView)
+
+    val callback = KeyboardAnimationCallback(
+      view = this,
+      persistentInsetTypes = WindowInsetsCompat.Type.systemBars(),
+      deferredInsetTypes = WindowInsetsCompat.Type.ime(),
+      dispatchMode = WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_CONTINUE_ON_SUBTREE,
+      context = reactContext,
+    )
+
+    eventView?.let {
+      ViewCompat.setWindowInsetsAnimationCallback(it, callback)
+      ViewCompat.setOnApplyWindowInsetsListener(it, callback)
+      it.requestApplyInsetsWhenAttached()
     }
   }
 
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+
+    eventView.removeSelf()
+  }
+  // endregion
+
+  // region Props setters
+  fun setStatusBarTranslucent(isStatusBarTranslucent: Boolean) {
+    this.isStatusBarTranslucent = isStatusBarTranslucent
+  }
+
+  fun setNavigationBarTranslucent(isNavigationBarTranslucent: Boolean) {
+    this.isNavigationBarTranslucent = isNavigationBarTranslucent
+  }
+  // endregion
+
+  // region Private functions/class helpers
+  private fun getContentView(): FitWindowsLinearLayout? {
+    return reactContext.currentActivity?.window?.decorView?.rootView?.findViewById(
+      androidx.appcompat.R.id.action_bar_root,
+    )
+  }
+
   private fun setupWindowInsets() {
     val rootView = reactContext.rootView
     if (rootView != null) {
       ViewCompat.setOnApplyWindowInsetsListener(rootView) { v, insets ->
-        val content =
-          reactContext.rootView?.findViewById<FitWindowsLinearLayout>(
-            androidx.appcompat.R.id.action_bar_root,
-          )
+        val content = getContentView()
         val params = FrameLayout.LayoutParams(
           FrameLayout.LayoutParams.MATCH_PARENT,
           FrameLayout.LayoutParams.MATCH_PARENT,
@@ -80,24 +117,5 @@ class EdgeToEdgeReactViewGroup(private val reactContext: ThemedReactContext) : R
       }
     }
   }
-
-  override fun onAttachedToWindow() {
-    super.onAttachedToWindow()
-
-    Handler(Looper.getMainLooper()).post(this::setupWindowInsets)
-    reactContext.currentActivity?.let {
-      WindowCompat.setDecorFitsSystemWindows(
-        it.window,
-        false,
-      )
-    }
-  }
-
-  fun setStatusBarTranslucent(isStatusBarTranslucent: Boolean) {
-    this.isStatusBarTranslucent = isStatusBarTranslucent
-  }
-
-  fun setNavigationBarTranslucent(isNavigationBarTranslucent: Boolean) {
-    this.isNavigationBarTranslucent = isNavigationBarTranslucent
-  }
+  // endregion
 }

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyboardAnimation = void 0;
+var _reactNativeReanimated = require("react-native-reanimated");
+var _hooks = require("../../hooks");
+const useKeyboardAnimation = () => {
+  const heightWhenOpened = (0, _reactNativeReanimated.useSharedValue)(0);
+  const height = (0, _reactNativeReanimated.useSharedValue)(0);
+  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _hooks.useKeyboardHandler)({
+    onStart: e => {
+      'worklet';
+
+      if (e.height > 0) {
+        heightWhenOpened.value = e.height;
+      }
+    },
+    onMove: e => {
+      'worklet';
+
+      progress.value = e.progress;
+      height.value = e.height;
+    }
+  }, []);
+  return {
+    height,
+    progress,
+    heightWhenOpened
+  };
+};
+exports.useKeyboardAnimation = useKeyboardAnimation;
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useKeyboardAnimation","heightWhenOpened","useSharedValue","height","progress","useKeyboardHandler","onStart","e","value","onMove"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from 'react-native-reanimated';\nimport { useKeyboardHandler } from '../../hooks';\n\nexport const useKeyboardAnimation = () => {\n  const heightWhenOpened = useSharedValue(0);\n  const height = useSharedValue(0);\n  const progress = useSharedValue(0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        'worklet';\n\n        if (e.height > 0) {\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    },\n    []\n  );\n\n  return { height, progress, heightWhenOpened };\n};\n"],"mappings":";;;;;;AAAA;AACA;AAEO,MAAMA,oBAAoB,GAAG,MAAM;EACxC,MAAMC,gBAAgB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAC1C,MAAMC,MAAM,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAChC,MAAME,QAAQ,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAElC,IAAAG,yBAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACJ,MAAM,GAAG,CAAC,EAAE;QAChBF,gBAAgB,CAACO,KAAK,GAAGD,CAAC,CAACJ,MAAM;MACnC;IACF,CAAC;IACDM,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETH,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACH,QAAQ;MAC3BD,MAAM,CAACK,KAAK,GAAGD,CAAC,CAACJ,MAAM;IACzB;EACF,CAAC,EACD,EAAE,CACH;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEH;EAAiB,CAAC;AAC/C,CAAC;AAAC"}

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

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _hooks = require("./hooks");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const defaultLayout = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0
+};
+
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    behavior,
+    children,
+    contentContainerStyle,
+    enabled = true,
+    keyboardVerticalOffset = 0,
+    style,
+    onLayout: onLayoutProps,
+    ...props
+  } = _ref;
+  const initialFrame = (0, _reactNativeReanimated.useSharedValue)(null);
+  const frame = (0, _reactNativeReanimated.useDerivedValue)(() => initialFrame.value || defaultLayout);
+  const keyboard = (0, _hooks.useKeyboardAnimation)();
+  const {
+    height: screenHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const relativeKeyboardHeight = (0, _reactNativeReanimated.useWorkletCallback)(() => {
+    const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
+    return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
+  }, [screenHeight, keyboardVerticalOffset]);
+  const onLayout = (0, _react.useCallback)(e => {
+    if (initialFrame.value === null) {
+      initialFrame.value = e.nativeEvent.layout;
+    }
+    onLayoutProps === null || onLayoutProps === void 0 ? void 0 : onLayoutProps(e);
+  }, [onLayoutProps]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const bottom = (0, _reactNativeReanimated.interpolate)(keyboard.progress.value, [0, 1], [0, relativeKeyboardHeight()]);
+    const bottomHeight = enabled ? bottom : 0;
+    switch (behavior) {
+      case 'height':
+        if (bottomHeight > 0) {
+          return {
+            height: frame.value.height - bottomHeight,
+            flex: 0
+          };
+        }
+        return {};
+      case 'position':
+        return {
+          bottom: bottomHeight
+        };
+      case 'padding':
+        return {
+          paddingBottom: bottomHeight
+        };
+      default:
+        return {};
+    }
+  }, [behavior, enabled, relativeKeyboardHeight]);
+  const isPositionBehavior = behavior === 'position';
+  const containerStyle = isPositionBehavior ? contentContainerStyle : style;
+  const combinedStyles = (0, _react.useMemo)(() => [containerStyle, animatedStyle], [containerStyle, animatedStyle]);
+  if (isPositionBehavior) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
+      ref: ref,
+      style: style,
+      onLayout: onLayout
+    }, props), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+      style: combinedStyles
+    }, children));
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
+    // @ts-expect-error because `ref` from reanimated is not compatible with react-native
+    ref: ref,
+    onLayout: onLayout,
+    style: combinedStyles
+  }, props), children);
+});
+var _default = KeyboardAvoidingView;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["defaultLayout","x","y","width","height","KeyboardAvoidingView","forwardRef","ref","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","initialFrame","useSharedValue","frame","useDerivedValue","value","keyboard","useKeyboardAnimation","screenHeight","useWindowDimensions","relativeKeyboardHeight","useWorkletCallback","keyboardY","heightWhenOpened","Math","max","useCallback","e","nativeEvent","layout","animatedStyle","useAnimatedStyle","bottom","interpolate","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles","useMemo"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport {\n  LayoutRectangle,\n  useWindowDimensions,\n  View,\n  ViewProps,\n} from 'react-native';\nimport Reanimated, {\n  useAnimatedStyle,\n  useWorkletCallback,\n  useSharedValue,\n  useDerivedValue,\n  interpolate,\n} from 'react-native-reanimated';\nimport { useKeyboardAnimation } from './hooks';\n\ntype Props = {\n  /**\n   * Specify how to react to the presence of the keyboard.\n   */\n  behavior?: 'height' | 'position' | 'padding';\n\n  /**\n   * Style of the content container when `behavior` is 'position'.\n   */\n  contentContainerStyle?: ViewProps['style'];\n\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\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<View, React.PropsWithChildren<Props>>(\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 = useWorkletCallback(() => {\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 onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(\n      (e) => {\n        if (initialFrame.value === null) {\n          initialFrame.value = e.nativeEvent.layout;\n        }\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 (bottomHeight > 0) {\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        // @ts-expect-error because `ref` from reanimated is not compatible with react-native\n        ref={ref}\n        onLayout={onLayout}\n        style={combinedStyles}\n        {...props}\n      >\n        {children}\n      </Reanimated.View>\n    );\n  }\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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"}

package/lib/commonjs/components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KeyboardAvoidingView", {
+  enumerable: true,
+  get: function () {
+    return _KeyboardAvoidingView.default;
+  }
+});
+var _KeyboardAvoidingView = _interopRequireDefault(require("./KeyboardAvoidingView"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';\n"],"mappings":";;;;;;;;;;;AAAA;AAAyE"}

package/lib/commonjs/index.js

@@ -3,10 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  KeyboardAvoidingView: true
+};
+Object.defineProperty(exports, "KeyboardAvoidingView", {
+  enumerable: true,
+  get: function () {
+    return _components.KeyboardAvoidingView;
+  }
+});
 require("./monkey-patch");
 var _bindings = require("./bindings");
 Object.keys(_bindings).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _bindings[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -18,6 +28,7 @@ Object.keys(_bindings).forEach(function (key) {
 var _animated = require("./animated");
 Object.keys(_animated).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _animated[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -29,6 +40,7 @@ Object.keys(_animated).forEach(function (key) {
 var _replicas = require("./replicas");
 Object.keys(_replicas).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _replicas[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -40,6 +52,7 @@ Object.keys(_replicas).forEach(function (key) {
 var _context = require("./context");
 Object.keys(_context).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _context[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -51,6 +64,7 @@ Object.keys(_context).forEach(function (key) {
 var _hooks = require("./hooks");
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -62,6 +76,7 @@ Object.keys(_hooks).forEach(function (key) {
 var _constants = require("./constants");
 Object.keys(_constants).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _constants[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -73,6 +88,7 @@ Object.keys(_constants).forEach(function (key) {
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -81,4 +97,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
+var _components = require("./components");
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import './monkey-patch';\n\nexport * from './bindings';\nexport * from './animated';\nexport * from './replicas';\nexport * from './context';\nexport * from './hooks';\nexport * from './constants';\nexport * from './types';\n"],"mappings":";;;;;AAAA;AAEA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import './monkey-patch';\n\nexport * from './bindings';\nexport * from './animated';\nexport * from './replicas';\nexport * from './context';\nexport * from './hooks';\nexport * from './constants';\nexport * from './types';\n\nexport { KeyboardAvoidingView } from './components';\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAEA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEA"}

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

@@ -0,0 +1,28 @@
+import { useSharedValue } from 'react-native-reanimated';
+import { useKeyboardHandler } from '../../hooks';
+export const useKeyboardAnimation = () => {
+  const heightWhenOpened = useSharedValue(0);
+  const height = useSharedValue(0);
+  const progress = useSharedValue(0);
+  useKeyboardHandler({
+    onStart: e => {
+      'worklet';
+
+      if (e.height > 0) {
+        heightWhenOpened.value = e.height;
+      }
+    },
+    onMove: e => {
+      'worklet';
+
+      progress.value = e.progress;
+      height.value = e.height;
+    }
+  }, []);
+  return {
+    height,
+    progress,
+    heightWhenOpened
+  };
+};
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useSharedValue","useKeyboardHandler","useKeyboardAnimation","heightWhenOpened","height","progress","onStart","e","value","onMove"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from 'react-native-reanimated';\nimport { useKeyboardHandler } from '../../hooks';\n\nexport const useKeyboardAnimation = () => {\n  const heightWhenOpened = useSharedValue(0);\n  const height = useSharedValue(0);\n  const progress = useSharedValue(0);\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        'worklet';\n\n        if (e.height > 0) {\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    },\n    []\n  );\n\n  return { height, progress, heightWhenOpened };\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,yBAAyB;AACxD,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAO,MAAMC,oBAAoB,GAAG,MAAM;EACxC,MAAMC,gBAAgB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC1C,MAAMI,MAAM,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAChC,MAAMK,QAAQ,GAAGL,cAAc,CAAC,CAAC,CAAC;EAElCC,kBAAkB,CAChB;IACEK,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACH,MAAM,GAAG,CAAC,EAAE;QAChBD,gBAAgB,CAACK,KAAK,GAAGD,CAAC,CAACH,MAAM;MACnC;IACF,CAAC;IACDK,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETF,QAAQ,CAACG,KAAK,GAAGD,CAAC,CAACF,QAAQ;MAC3BD,MAAM,CAACI,KAAK,GAAGD,CAAC,CAACH,MAAM;IACzB;EACF,CAAC,EACD,EAAE,CACH;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEF;EAAiB,CAAC;AAC/C,CAAC"}

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

@@ -0,0 +1,88 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import Reanimated, { useAnimatedStyle, useWorkletCallback, useSharedValue, useDerivedValue, interpolate } from 'react-native-reanimated';
+import { useKeyboardAnimation } from './hooks';
+const defaultLayout = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0
+};
+
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+const KeyboardAvoidingView = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    behavior,
+    children,
+    contentContainerStyle,
+    enabled = true,
+    keyboardVerticalOffset = 0,
+    style,
+    onLayout: onLayoutProps,
+    ...props
+  } = _ref;
+  const initialFrame = useSharedValue(null);
+  const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
+  const keyboard = useKeyboardAnimation();
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  const relativeKeyboardHeight = useWorkletCallback(() => {
+    const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
+    return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
+  }, [screenHeight, keyboardVerticalOffset]);
+  const onLayout = useCallback(e => {
+    if (initialFrame.value === null) {
+      initialFrame.value = e.nativeEvent.layout;
+    }
+    onLayoutProps === null || onLayoutProps === void 0 ? void 0 : onLayoutProps(e);
+  }, [onLayoutProps]);
+  const animatedStyle = useAnimatedStyle(() => {
+    const bottom = interpolate(keyboard.progress.value, [0, 1], [0, relativeKeyboardHeight()]);
+    const bottomHeight = enabled ? bottom : 0;
+    switch (behavior) {
+      case 'height':
+        if (bottomHeight > 0) {
+          return {
+            height: frame.value.height - bottomHeight,
+            flex: 0
+          };
+        }
+        return {};
+      case 'position':
+        return {
+          bottom: bottomHeight
+        };
+      case 'padding':
+        return {
+          paddingBottom: bottomHeight
+        };
+      default:
+        return {};
+    }
+  }, [behavior, enabled, relativeKeyboardHeight]);
+  const isPositionBehavior = behavior === 'position';
+  const containerStyle = isPositionBehavior ? contentContainerStyle : style;
+  const combinedStyles = useMemo(() => [containerStyle, animatedStyle], [containerStyle, animatedStyle]);
+  if (isPositionBehavior) {
+    return /*#__PURE__*/React.createElement(View, _extends({
+      ref: ref,
+      style: style,
+      onLayout: onLayout
+    }, props), /*#__PURE__*/React.createElement(Reanimated.View, {
+      style: combinedStyles
+    }, children));
+  }
+  return /*#__PURE__*/React.createElement(Reanimated.View, _extends({
+    // @ts-expect-error because `ref` from reanimated is not compatible with react-native
+    ref: ref,
+    onLayout: onLayout,
+    style: combinedStyles
+  }, props), children);
+});
+export default KeyboardAvoidingView;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useCallback","useMemo","useWindowDimensions","View","Reanimated","useAnimatedStyle","useWorkletCallback","useSharedValue","useDerivedValue","interpolate","useKeyboardAnimation","defaultLayout","x","y","width","height","KeyboardAvoidingView","ref","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","initialFrame","frame","value","keyboard","screenHeight","relativeKeyboardHeight","keyboardY","heightWhenOpened","Math","max","e","nativeEvent","layout","animatedStyle","bottom","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport {\n  LayoutRectangle,\n  useWindowDimensions,\n  View,\n  ViewProps,\n} from 'react-native';\nimport Reanimated, {\n  useAnimatedStyle,\n  useWorkletCallback,\n  useSharedValue,\n  useDerivedValue,\n  interpolate,\n} from 'react-native-reanimated';\nimport { useKeyboardAnimation } from './hooks';\n\ntype Props = {\n  /**\n   * Specify how to react to the presence of the keyboard.\n   */\n  behavior?: 'height' | 'position' | 'padding';\n\n  /**\n   * Style of the content container when `behavior` is 'position'.\n   */\n  contentContainerStyle?: ViewProps['style'];\n\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\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<View, React.PropsWithChildren<Props>>(\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 = useWorkletCallback(() => {\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 onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(\n      (e) => {\n        if (initialFrame.value === null) {\n          initialFrame.value = e.nativeEvent.layout;\n        }\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 (bottomHeight > 0) {\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        // @ts-expect-error because `ref` from reanimated is not compatible with react-native\n        ref={ref}\n        onLayout={onLayout}\n        style={combinedStyles}\n        {...props}\n      >\n        {children}\n      </Reanimated.View>\n    );\n  }\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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"}

package/lib/module/components/index.js

@@ -0,0 +1,2 @@
+export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["default","KeyboardAvoidingView"],"sources":["index.ts"],"sourcesContent":["export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,wBAAwB"}

package/lib/module/index.js

@@ -6,4 +6,5 @@ export * from './context';
 export * from './hooks';
 export * from './constants';
 export * from './types';
+export { KeyboardAvoidingView } from './components';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import './monkey-patch';\n\nexport * from './bindings';\nexport * from './animated';\nexport * from './replicas';\nexport * from './context';\nexport * from './hooks';\nexport * from './constants';\nexport * from './types';\n"],"mappings":"AAAA,OAAO,gBAAgB;AAEvB,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,SAAS"}
+{"version":3,"names":["KeyboardAvoidingView"],"sources":["index.ts"],"sourcesContent":["import './monkey-patch';\n\nexport * from './bindings';\nexport * from './animated';\nexport * from './replicas';\nexport * from './context';\nexport * from './hooks';\nexport * from './constants';\nexport * from './types';\n\nexport { KeyboardAvoidingView } from './components';\n"],"mappings":"AAAA,OAAO,gBAAgB;AAEvB,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,SAAS;AAEvB,SAASA,oBAAoB,QAAQ,cAAc"}

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

@@ -0,0 +1,5 @@
+export declare const useKeyboardAnimation: () => {
+    height: import("react-native-reanimated").SharedValue<number>;
+    progress: import("react-native-reanimated").SharedValue<number>;
+    heightWhenOpened: import("react-native-reanimated").SharedValue<number>;
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+declare const KeyboardAvoidingView: React.ForwardRefExoticComponent<{
+    /**
+     * Specify how to react to the presence of the keyboard.
+     */
+    behavior?: "height" | "padding" | "position" | undefined;
+    /**
+     * Style of the content container when `behavior` is 'position'.
+     */
+    contentContainerStyle?: ViewProps['style'];
+    /**
+     * Controls whether this `KeyboardAvoidingView` instance should take effect.
+     * This is useful when more than one is on the screen. Defaults to true.
+     */
+    enabled?: boolean | undefined;
+    /**
+     * Distance between the top of the user screen and the React Native view. This
+     * may be non-zero in some cases. Defaults to 0.
+     */
+    keyboardVerticalOffset?: number | undefined;
+} & ViewProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<View>>;
+export default KeyboardAvoidingView;

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

@@ -0,0 +1 @@
+export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';

package/lib/typescript/index.d.ts

@@ -6,3 +6,4 @@ export * from './context';
 export * from './hooks';
 export * from './constants';
 export * from './types';
+export { KeyboardAvoidingView } from './components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "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

@@ -0,0 +1,29 @@
+import { useSharedValue } from 'react-native-reanimated';
+import { useKeyboardHandler } from '../../hooks';
+
+export const useKeyboardAnimation = () => {
+  const heightWhenOpened = useSharedValue(0);
+  const height = useSharedValue(0);
+  const progress = useSharedValue(0);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        'worklet';
+
+        if (e.height > 0) {
+          heightWhenOpened.value = e.height;
+        }
+      },
+      onMove: (e) => {
+        'worklet';
+
+        progress.value = e.progress;
+        height.value = e.height;
+      },
+    },
+    []
+  );
+
+  return { height, progress, heightWhenOpened };
+};

package/src/components/KeyboardAvoidingView/index.tsx

@@ -0,0 +1,147 @@
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import {
+  LayoutRectangle,
+  useWindowDimensions,
+  View,
+  ViewProps,
+} from 'react-native';
+import Reanimated, {
+  useAnimatedStyle,
+  useWorkletCallback,
+  useSharedValue,
+  useDerivedValue,
+  interpolate,
+} from 'react-native-reanimated';
+import { useKeyboardAnimation } from './hooks';
+
+type Props = {
+  /**
+   * Specify how to react to the presence of the keyboard.
+   */
+  behavior?: 'height' | 'position' | 'padding';
+
+  /**
+   * Style of the content container when `behavior` is 'position'.
+   */
+  contentContainerStyle?: ViewProps['style'];
+
+  /**
+   * Controls whether this `KeyboardAvoidingView` instance should take effect.
+   * This is useful when more than one is on the screen. Defaults to true.
+   */
+  enabled?: boolean;
+
+  /**
+   * Distance between the top of the user screen and the React Native view. This
+   * may be non-zero in some cases. Defaults to 0.
+   */
+  keyboardVerticalOffset?: number;
+} & ViewProps;
+
+const defaultLayout: LayoutRectangle = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
+  (
+    {
+      behavior,
+      children,
+      contentContainerStyle,
+      enabled = true,
+      keyboardVerticalOffset = 0,
+      style,
+      onLayout: onLayoutProps,
+      ...props
+    },
+    ref
+  ) => {
+    const initialFrame = useSharedValue<LayoutRectangle | null>(null);
+    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
+
+    const keyboard = useKeyboardAnimation();
+    const { height: screenHeight } = useWindowDimensions();
+
+    const relativeKeyboardHeight = useWorkletCallback(() => {
+      const keyboardY =
+        screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
+
+      return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
+    }, [screenHeight, keyboardVerticalOffset]);
+
+    const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
+      (e) => {
+        if (initialFrame.value === null) {
+          initialFrame.value = e.nativeEvent.layout;
+        }
+        onLayoutProps?.(e);
+      },
+      [onLayoutProps]
+    );
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const bottom = interpolate(
+        keyboard.progress.value,
+        [0, 1],
+        [0, relativeKeyboardHeight()]
+      );
+      const bottomHeight = enabled ? bottom : 0;
+
+      switch (behavior) {
+        case 'height':
+          if (bottomHeight > 0) {
+            return {
+              height: frame.value.height - bottomHeight,
+              flex: 0,
+            };
+          }
+
+          return {};
+
+        case 'position':
+          return { bottom: bottomHeight };
+
+        case 'padding':
+          return { paddingBottom: bottomHeight };
+
+        default:
+          return {};
+      }
+    }, [behavior, enabled, relativeKeyboardHeight]);
+    const isPositionBehavior = behavior === 'position';
+    const containerStyle = isPositionBehavior ? contentContainerStyle : style;
+    const combinedStyles = useMemo(
+      () => [containerStyle, animatedStyle],
+      [containerStyle, animatedStyle]
+    );
+
+    if (isPositionBehavior) {
+      return (
+        <View ref={ref} style={style} onLayout={onLayout} {...props}>
+          <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>
+        </View>
+      );
+    }
+
+    return (
+      <Reanimated.View
+        // @ts-expect-error because `ref` from reanimated is not compatible with react-native
+        ref={ref}
+        onLayout={onLayout}
+        style={combinedStyles}
+        {...props}
+      >
+        {children}
+      </Reanimated.View>
+    );
+  }
+);
+
+export default KeyboardAvoidingView;

package/src/components/index.ts

@@ -0,0 +1 @@
+export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';

package/src/index.ts

@@ -7,3 +7,5 @@ export * from './context';
 export * from './hooks';
 export * from './constants';
 export * from './types';
+
+export { KeyboardAvoidingView } from './components';