react-native-keyboard-controller 1.10.1 → 1.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/EditText.kt +31 -1
  2. package/ios/observers/FocusedInputObserver.swift +1 -0
  3. package/ios/views/KeyboardControllerViewManager.swift +12 -2
  4. package/jest/index.js +11 -1
  5. package/lib/commonjs/components/KeyboardAvoidingView/hooks.js +16 -4
  6. package/lib/commonjs/components/KeyboardAvoidingView/hooks.js.map +1 -1
  7. package/lib/commonjs/components/KeyboardAwareScrollView/index.js +5 -3
  8. package/lib/commonjs/components/KeyboardAwareScrollView/index.js.map +1 -1
  9. package/lib/commonjs/components/KeyboardStickyView/index.js +2 -2
  10. package/lib/commonjs/components/KeyboardStickyView/index.js.map +1 -1
  11. package/lib/commonjs/components/hooks/useKeyboardInterpolation.js +9 -2
  12. package/lib/commonjs/components/hooks/useKeyboardInterpolation.js.map +1 -1
  13. package/lib/module/components/KeyboardAvoidingView/hooks.js +15 -3
  14. package/lib/module/components/KeyboardAvoidingView/hooks.js.map +1 -1
  15. package/lib/module/components/KeyboardAwareScrollView/index.js +5 -3
  16. package/lib/module/components/KeyboardAwareScrollView/index.js.map +1 -1
  17. package/lib/module/components/KeyboardStickyView/index.js +1 -1
  18. package/lib/module/components/KeyboardStickyView/index.js.map +1 -1
  19. package/lib/module/components/hooks/useKeyboardInterpolation.js +8 -1
  20. package/lib/module/components/hooks/useKeyboardInterpolation.js.map +1 -1
  21. package/package.json +1 -1
  22. package/src/components/KeyboardAvoidingView/hooks.ts +14 -3
  23. package/src/components/KeyboardAwareScrollView/index.tsx +6 -2
  24. package/src/components/KeyboardStickyView/index.tsx +2 -1
  25. package/src/components/hooks/useKeyboardInterpolation.ts +13 -1
@@ -2,7 +2,10 @@ package com.reactnativekeyboardcontroller.extensions
2
2
 
3
3
  import android.text.Editable
4
4
  import android.text.TextWatcher
5
+ import android.util.Log
5
6
  import android.widget.EditText
7
+ import com.facebook.react.views.textinput.ReactEditText
8
+ import java.lang.reflect.Field
6
9
 
7
10
  /**
8
11
  * Adds a listener that will be fired only once for each unique value.
@@ -30,7 +33,34 @@ fun EditText.addOnTextChangedListener(action: (String) -> Unit): TextWatcher {
30
33
  }
31
34
  }
32
35
 
33
- addTextChangedListener(listener)
36
+ // we can not simply call `addTextChangedListener(listener)`, because the issue
37
+ // https://github.com/kirillzyusko/react-native-keyboard-controller/issues/324
38
+ // will be reproducible again.
39
+ //
40
+ // so here we push our listener to first position to avoid the soft crash
41
+ try {
42
+ val clazz: Class<*> = ReactEditText::class.java
43
+ val field: Field = clazz.getDeclaredField("mListeners")
44
+ field.isAccessible = true
45
+ val fieldValue = field[this]
46
+ val listeners = fieldValue as? ArrayList<*>
47
+
48
+ if (listeners != null && listeners.all { it is TextWatcher }) {
49
+ // fieldValue is an ArrayList<TextWatch>
50
+ val textWatchListeners = listeners as ArrayList<TextWatcher>
51
+
52
+ textWatchListeners.add(0, listener)
53
+ } else {
54
+ Log.w(
55
+ javaClass.simpleName,
56
+ "Can not attach listener because `fieldValue` does not belong to `ArrayList<TextWatcher>`",
57
+ )
58
+ }
59
+ } catch (e: ClassCastException) {
60
+ Log.w(javaClass.simpleName, "Can not attach listener because casting failed: ${e.message}")
61
+ } catch (e: NoSuchFieldException) {
62
+ Log.w(javaClass.simpleName, "Can not attach listener because field `mListeners` not found: ${e.message}")
63
+ }
34
64
 
35
65
  return listener
36
66
  }
@@ -79,6 +79,7 @@ public class FocusedInputObserver: NSObject {
79
79
 
80
80
  @objc func keyboardWillHide(_: Notification) {
81
81
  removeObservers()
82
+ currentInput = nil
82
83
  dispatchEventToJS(data: noFocusedInputEvent)
83
84
  }
84
85
 
@@ -39,8 +39,18 @@ class KeyboardControllerView: UIView {
39
39
  self.bridge = bridge
40
40
  eventDispatcher = bridge.eventDispatcher()
41
41
  super.init(frame: frame)
42
- inputObserver = FocusedInputObserver(onLayoutChangedHandler: onLayoutChanged, onTextChangedHandler: onTextChanged)
43
- keyboardObserver = KeyboardMovementObserver(handler: onEvent, onNotify: onNotify)
42
+ inputObserver = FocusedInputObserver(
43
+ onLayoutChangedHandler: { [weak self] event in self?.onLayoutChanged(event: event) },
44
+ onTextChangedHandler: { [weak self] text in self?.onTextChanged(text: text) }
45
+ )
46
+ keyboardObserver = KeyboardMovementObserver(
47
+ handler: { [weak self] event, height, progress, duration, target in
48
+ self?.onEvent(event: event, height: height, progress: progress, duration: duration, target: target)
49
+ },
50
+ onNotify: { [weak self] event, data in
51
+ self?.onNotify(event: event, data: data)
52
+ }
53
+ )
44
54
  }
45
55
 
46
56
  @available(*, unavailable)
package/jest/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Animated } from "react-native";
1
+ import { Animated, ScrollView, View } from "react-native";
2
2
 
3
3
  const values = {
4
4
  animated: {
@@ -28,13 +28,19 @@ const focusedInput = {
28
28
 
29
29
  const mock = {
30
30
  // hooks
31
+ /// keyboard
31
32
  useKeyboardAnimation: jest.fn().mockReturnValue(values.animated),
32
33
  useReanimatedKeyboardAnimation: jest.fn().mockReturnValue(values.reanimated),
33
34
  useResizeMode: jest.fn(),
34
35
  useGenericKeyboardHandler: jest.fn(),
35
36
  useKeyboardHandler: jest.fn(),
37
+ /// input
36
38
  useReanimatedFocusedInput: jest.fn().mockReturnValue(focusedInput),
37
39
  useFocusedInputHandler: jest.fn(),
40
+ /// module
41
+ useKeyboardController: jest
42
+ .fn()
43
+ .mockReturnValue({ setEnabled: jest.fn(), enabled: true }),
38
44
  // modules
39
45
  KeyboardController: {
40
46
  setInputMode: jest.fn(),
@@ -49,6 +55,10 @@ const mock = {
49
55
  KeyboardGestureArea: "KeyboardGestureArea",
50
56
  // providers
51
57
  KeyboardProvider: "KeyboardProvider",
58
+ // components
59
+ KeyboardStickyView: View,
60
+ KeyboardAvoidingView: View,
61
+ KeyboardAwareScrollView: ScrollView,
52
62
  };
53
63
 
54
64
  module.exports = mock;
@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.useKeyboardAnimation = void 0;
7
7
  var _reactNativeReanimated = require("react-native-reanimated");
8
- var _hooks = require("../../hooks");
8
+ var _reactNativeKeyboardController = require("react-native-keyboard-controller");
9
9
  const useKeyboardAnimation = () => {
10
10
  const heightWhenOpened = (0, _reactNativeReanimated.useSharedValue)(0);
11
11
  const height = (0, _reactNativeReanimated.useSharedValue)(0);
12
12
  const progress = (0, _reactNativeReanimated.useSharedValue)(0);
13
13
  const isClosed = (0, _reactNativeReanimated.useSharedValue)(true);
14
- (0, _hooks.useKeyboardHandler)({
14
+ (0, _reactNativeKeyboardController.useKeyboardHandler)({
15
15
  onStart: e => {
16
16
  "worklet";
17
17
 
@@ -30,8 +30,20 @@ const useKeyboardAnimation = () => {
30
30
  "worklet";
31
31
 
32
32
  isClosed.value = e.height === 0;
33
- progress.value = e.progress;
34
- height.value = e.height;
33
+
34
+ // `height` update happens in `onMove` handler
35
+ // in `onEnd` we need to update only if `onMove`
36
+ // wasn't called (i. e. duration === 0)
37
+ //
38
+ // we can not call this code without condition below
39
+ // because in some corner cases (iOS with `secureTextEntry`)
40
+ // `onEnd` can be emitted before `onMove` and in this case
41
+ // it may lead to choppy/glitchy/jumpy UI
42
+ // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
43
+ if (e.duration === 0) {
44
+ progress.value = e.progress;
45
+ height.value = e.height;
46
+ }
35
47
  }
36
48
  }, []);
37
49
  return {
@@ -1 +1 @@
1
- {"version":3,"names":["_reactNativeReanimated","require","_hooks","useKeyboardAnimation","heightWhenOpened","useSharedValue","height","progress","isClosed","useKeyboardHandler","onStart","e","value","onMove","onEnd","exports"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\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 onEnd: (e) => {\n \"worklet\";\n\n isClosed.value = e.height === 0;\n\n progress.value = e.progress;\n height.value = e.height;\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,oBAAoB,GAAGA,CAAA,KAAM;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;EAClC,MAAMG,QAAQ,GAAG,IAAAH,qCAAc,EAAC,IAAI,CAAC;EAErC,IAAAI,yBAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACL,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACI,KAAK,GAAG,KAAK;QACtBR,gBAAgB,CAACQ,KAAK,GAAGD,CAAC,CAACL,MAAM;MACnC;IACF,CAAC;IACDO,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETJ,QAAQ,CAACK,KAAK,GAAGD,CAAC,CAACJ,QAAQ;MAC3BD,MAAM,CAACM,KAAK,GAAGD,CAAC,CAACL,MAAM;IACzB,CAAC;IACDQ,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETH,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACL,MAAM,KAAK,CAAC;MAE/BC,QAAQ,CAACK,KAAK,GAAGD,CAAC,CAACJ,QAAQ;MAC3BD,MAAM,CAACM,KAAK,GAAGD,CAAC,CAACL,MAAM;IACzB;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEH,gBAAgB;IAAEI;EAAS,CAAC;AACzD,CAAC;AAACO,OAAA,CAAAZ,oBAAA,GAAAA,oBAAA"}
1
+ {"version":3,"names":["_reactNativeReanimated","require","_reactNativeKeyboardController","useKeyboardAnimation","heightWhenOpened","useSharedValue","height","progress","isClosed","useKeyboardHandler","onStart","e","value","onMove","onEnd","duration","exports"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\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 onEnd: (e) => {\n \"worklet\";\n\n isClosed.value = e.height === 0;\n\n // `height` update happens in `onMove` handler\n // in `onEnd` we need to update only if `onMove`\n // wasn't called (i. e. duration === 0)\n //\n // we can not call this code without condition below\n // because in some corner cases (iOS with `secureTextEntry`)\n // `onEnd` can be emitted before `onMove` and in this case\n // it may lead to choppy/glitchy/jumpy UI\n // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (e.duration === 0) {\n progress.value = e.progress;\n height.value = e.height;\n }\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAEA,IAAAC,8BAAA,GAAAD,OAAA;AAEO,MAAME,oBAAoB,GAAGA,CAAA,KAAM;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;EAClC,MAAMG,QAAQ,GAAG,IAAAH,qCAAc,EAAC,IAAI,CAAC;EAErC,IAAAI,iDAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACL,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACI,KAAK,GAAG,KAAK;QACtBR,gBAAgB,CAACQ,KAAK,GAAGD,CAAC,CAACL,MAAM;MACnC;IACF,CAAC;IACDO,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETJ,QAAQ,CAACK,KAAK,GAAGD,CAAC,CAACJ,QAAQ;MAC3BD,MAAM,CAACM,KAAK,GAAGD,CAAC,CAACL,MAAM;IACzB,CAAC;IACDQ,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETH,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACL,MAAM,KAAK,CAAC;;MAE/B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,IAAIK,CAAC,CAACI,QAAQ,KAAK,CAAC,EAAE;QACpBR,QAAQ,CAACK,KAAK,GAAGD,CAAC,CAACJ,QAAQ;QAC3BD,MAAM,CAACM,KAAK,GAAGD,CAAC,CAACL,MAAM;MACzB;IACF;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEH,gBAAgB;IAAEI;EAAS,CAAC;AACzD,CAAC;AAACQ,OAAA,CAAAb,oBAAA,GAAAA,oBAAA"}
@@ -60,6 +60,7 @@ const KeyboardAwareScrollView = _ref => {
60
60
  const scrollViewAnimatedRef = (0, _reactNativeReanimated.useAnimatedRef)();
61
61
  const scrollPosition = (0, _reactNativeReanimated.useSharedValue)(0);
62
62
  const position = (0, _reactNativeReanimated.useSharedValue)(0);
63
+ const currentKeyboardFrameHeight = (0, _reactNativeReanimated.useSharedValue)(0);
63
64
  const keyboardHeight = (0, _reactNativeReanimated.useSharedValue)(0);
64
65
  const tag = (0, _reactNativeReanimated.useSharedValue)(-1);
65
66
  const initialKeyboardSize = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -165,6 +166,7 @@ const KeyboardAwareScrollView = _ref => {
165
166
  onMove: e => {
166
167
  "worklet";
167
168
 
169
+ currentKeyboardFrameHeight.value = e.height;
168
170
  maybeScroll(e.height);
169
171
  },
170
172
  onEnd: e => {
@@ -183,16 +185,16 @@ const KeyboardAwareScrollView = _ref => {
183
185
  }
184
186
  }, []);
185
187
  const view = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
186
- paddingBottom: keyboardHeight.value
188
+ paddingBottom: currentKeyboardFrameHeight.value
187
189
  }), []);
188
190
  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({
189
191
  ref: scrollViewAnimatedRef
190
192
  }, rest, {
191
193
  onScroll: onScroll,
192
194
  scrollEventThrottle: 16
193
- }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
195
+ }), children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
194
196
  style: view
195
- }, children));
197
+ }));
196
198
  };
197
199
  var _default = KeyboardAwareScrollView;
198
200
  exports.default = _default;
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeKeyboardController","_useSmoothKeyboardHandler","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","KeyboardAwareScrollView","_ref","children","bottomOffset","rest","scrollViewAnimatedRef","useAnimatedRef","scrollPosition","useSharedValue","position","keyboardHeight","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","useReanimatedFocusedInput","layout","height","useWindowDimensions","onScroll","useAnimatedScrollHandler","e","value","contentOffset","y","maybeScroll","useCallback","_layout$value","_layout$value2","animated","undefined","visibleRect","absoluteY","inputHeight","point","interpolatedScrollTo","interpolate","targetScrollY","Math","max","scrollTo","positionOnScreen","topOfScreen","onChangeText","_layout$value3","_input$value","prevScrollPosition","prevLayout","onChangeTextHandler","useMemo","debounce","useFocusedInputHandler","useSmoothKeyboardHandler","onStart","keyboardWillChangeSize","keyboardWillAppear","keyboardWillHide","focusWasChanged","onMove","onEnd","useAnimatedReaction","current","previous","view","useAnimatedStyle","paddingBottom","createElement","ScrollView","ref","scrollEventThrottle","View","style","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport Reanimated, {\n interpolate,\n scrollTo,\n useAnimatedReaction,\n useAnimatedRef,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport {\n useFocusedInputHandler,\n useReanimatedFocusedInput,\n} from \"react-native-keyboard-controller\";\n\nimport { useSmoothKeyboardHandler } from \"./useSmoothKeyboardHandler\";\nimport { debounce } from \"./utils\";\n\nimport type { FC } from \"react\";\nimport type { ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n bottomOffset?: number;\n} & ScrollViewProps;\n\n/**\n * Everything begins from `onStart` handler. This handler is called every time,\n * when keyboard changes its size or when focused `TextInput` was changed. In\n * this handler we are calculating/memoizing values which later will be used\n * during layout movement. For that we calculate:\n * - layout of focused field (`layout`) - to understand whether there will be overlap\n * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation\n * - future keyboard height (`keyboardHeight`) - used in scroll interpolation\n * - current scroll position (`scrollPosition`) - used to scroll from this point\n *\n * Once we've calculated all necessary variables - we can actually start to use them.\n * It happens in `onMove` handler - this function simply calls `maybeScroll` with\n * current keyboard frame height. This functions makes the smooth transition.\n *\n * When the transition has finished we go to `onEnd` handler. In this handler\n * we verify, that the current field is not overlapped within a keyboard frame.\n * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,\n * however there could be some cases, when `onMove` is not called:\n * - on iOS when TextInput was changed - keyboard transition is instant\n * - on Android when TextInput was changed and keyboard size wasn't changed\n * So `onEnd` handler handle the case, when `onMove` wasn't triggered.\n *\n * ====================================================================================================================+\n * -----------------------------------------------------Flow chart-----------------------------------------------------+\n * ====================================================================================================================+\n *\n * +============================+ +============================+ +==================================+\n * + User Press on TextInput + => + Keyboard starts showing + => + As keyboard moves frame by frame + =>\n * + + + (run `onStart`) + + `onMove` is getting called +\n * +============================+ +============================+ +==================================+\n *\n *\n * +============================+ +============================+ +=====================================+\n * + Keyboard is shown and we + => + User moved focus to + => + Only `onStart`/`onEnd` maybe called +\n * + call `onEnd` handler + + another `TextInput` + + (without involving `onMove`) +\n * +============================+ +============================+ +=====================================+\n *\n */\nconst KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n ...rest\n}) => {\n const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();\n const scrollPosition = useSharedValue(0);\n const position = useSharedValue(0);\n const keyboardHeight = useSharedValue(0);\n const tag = useSharedValue(-1);\n const initialKeyboardSize = useSharedValue(0);\n const scrollBeforeKeyboardMovement = useSharedValue(0);\n const { input } = useReanimatedFocusedInput();\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n\n const { height } = useWindowDimensions();\n\n const onScroll = useAnimatedScrollHandler(\n {\n onScroll: (e) => {\n position.value = e.contentOffset.y;\n },\n },\n [],\n );\n\n /**\n * Function that will scroll a ScrollView as keyboard gets moving\n */\n const maybeScroll = useCallback(\n (e: number, animated: boolean = false) => {\n \"worklet\";\n\n const visibleRect = height - keyboardHeight.value;\n const absoluteY = layout.value?.layout.absoluteY || 0;\n const inputHeight = layout.value?.layout.height || 0;\n const point = absoluteY + inputHeight;\n\n if (visibleRect - point <= bottomOffset) {\n const interpolatedScrollTo = interpolate(\n e,\n [initialKeyboardSize.value, keyboardHeight.value],\n [0, keyboardHeight.value - (height - point) + bottomOffset],\n );\n const targetScrollY =\n Math.max(interpolatedScrollTo, 0) + scrollPosition.value;\n scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);\n\n return interpolatedScrollTo;\n }\n\n if (absoluteY < 0) {\n const positionOnScreen = visibleRect - inputHeight - bottomOffset;\n const topOfScreen = scrollPosition.value + absoluteY;\n\n scrollTo(\n scrollViewAnimatedRef,\n 0,\n topOfScreen - positionOnScreen,\n animated,\n );\n }\n\n return 0;\n },\n [bottomOffset],\n );\n\n const onChangeText = useCallback(() => {\n \"worklet\";\n\n // if typing a text caused layout shift, then we need to ignore this handler\n // because this event will be handled in `useAnimatedReaction` below\n if (layout.value?.layout.height !== input.value?.layout.height) {\n return;\n }\n\n const prevScrollPosition = scrollPosition.value;\n const prevLayout = layout.value;\n\n scrollPosition.value = position.value;\n layout.value = input.value;\n maybeScroll(keyboardHeight.value, true);\n scrollPosition.value = prevScrollPosition;\n layout.value = prevLayout;\n }, [maybeScroll]);\n const onChangeTextHandler = useMemo(\n () => debounce(onChangeText, 200),\n [onChangeText],\n );\n\n useFocusedInputHandler(\n {\n onChangeText: onChangeTextHandler,\n },\n [onChangeTextHandler],\n );\n\n useSmoothKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillChangeSize =\n keyboardHeight.value !== e.height && e.height > 0;\n const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;\n\n if (keyboardWillChangeSize) {\n initialKeyboardSize.value = keyboardHeight.value;\n }\n\n if (keyboardWillHide) {\n // on back transition need to interpolate as [0, keyboardHeight]\n initialKeyboardSize.value = 0;\n scrollPosition.value = scrollBeforeKeyboardMovement.value;\n }\n\n if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {\n // persist scroll value\n scrollPosition.value = position.value;\n // just persist height - later will be used in interpolation\n keyboardHeight.value = e.height;\n }\n\n // focus was changed\n if (focusWasChanged) {\n tag.value = e.target;\n\n // save position of focused text input when keyboard starts to move\n layout.value = input.value;\n // save current scroll position - when keyboard will hide we'll reuse\n // this value to achieve smooth hide effect\n scrollBeforeKeyboardMovement.value = position.value;\n }\n\n if (focusWasChanged && !keyboardWillAppear) {\n // update position on scroll value, so `onEnd` handler\n // will pick up correct values\n position.value += maybeScroll(e.height, true);\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n maybeScroll(e.height);\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll],\n );\n\n useAnimatedReaction(\n () => input.value,\n (current, previous) => {\n if (\n current?.target === previous?.target &&\n current?.layout.height !== previous?.layout.height\n ) {\n const prevLayout = layout.value;\n\n layout.value = input.value;\n scrollPosition.value += maybeScroll(keyboardHeight.value, true);\n layout.value = prevLayout;\n }\n },\n [],\n );\n\n const view = useAnimatedStyle(\n () => ({\n paddingBottom: keyboardHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\n {...rest}\n onScroll={onScroll}\n scrollEventThrottle={16}\n >\n <Reanimated.View style={view}>{children}</Reanimated.View>\n </Reanimated.ScrollView>\n );\n};\n\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeKeyboardController","_useSmoothKeyboardHandler","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","KeyboardAwareScrollView","_ref","children","bottomOffset","rest","scrollViewAnimatedRef","useAnimatedRef","scrollPosition","useSharedValue","position","currentKeyboardFrameHeight","keyboardHeight","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","useReanimatedFocusedInput","layout","height","useWindowDimensions","onScroll","useAnimatedScrollHandler","e","value","contentOffset","y","maybeScroll","useCallback","_layout$value","_layout$value2","animated","undefined","visibleRect","absoluteY","inputHeight","point","interpolatedScrollTo","interpolate","targetScrollY","Math","max","scrollTo","positionOnScreen","topOfScreen","onChangeText","_layout$value3","_input$value","prevScrollPosition","prevLayout","onChangeTextHandler","useMemo","debounce","useFocusedInputHandler","useSmoothKeyboardHandler","onStart","keyboardWillChangeSize","keyboardWillAppear","keyboardWillHide","focusWasChanged","onMove","onEnd","useAnimatedReaction","current","previous","view","useAnimatedStyle","paddingBottom","createElement","ScrollView","ref","scrollEventThrottle","View","style","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport Reanimated, {\n interpolate,\n scrollTo,\n useAnimatedReaction,\n useAnimatedRef,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport {\n useFocusedInputHandler,\n useReanimatedFocusedInput,\n} from \"react-native-keyboard-controller\";\n\nimport { useSmoothKeyboardHandler } from \"./useSmoothKeyboardHandler\";\nimport { debounce } from \"./utils\";\n\nimport type { FC } from \"react\";\nimport type { ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n bottomOffset?: number;\n} & ScrollViewProps;\n\n/**\n * Everything begins from `onStart` handler. This handler is called every time,\n * when keyboard changes its size or when focused `TextInput` was changed. In\n * this handler we are calculating/memoizing values which later will be used\n * during layout movement. For that we calculate:\n * - layout of focused field (`layout`) - to understand whether there will be overlap\n * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation\n * - future keyboard height (`keyboardHeight`) - used in scroll interpolation\n * - current scroll position (`scrollPosition`) - used to scroll from this point\n *\n * Once we've calculated all necessary variables - we can actually start to use them.\n * It happens in `onMove` handler - this function simply calls `maybeScroll` with\n * current keyboard frame height. This functions makes the smooth transition.\n *\n * When the transition has finished we go to `onEnd` handler. In this handler\n * we verify, that the current field is not overlapped within a keyboard frame.\n * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,\n * however there could be some cases, when `onMove` is not called:\n * - on iOS when TextInput was changed - keyboard transition is instant\n * - on Android when TextInput was changed and keyboard size wasn't changed\n * So `onEnd` handler handle the case, when `onMove` wasn't triggered.\n *\n * ====================================================================================================================+\n * -----------------------------------------------------Flow chart-----------------------------------------------------+\n * ====================================================================================================================+\n *\n * +============================+ +============================+ +==================================+\n * + User Press on TextInput + => + Keyboard starts showing + => + As keyboard moves frame by frame + =>\n * + + + (run `onStart`) + + `onMove` is getting called +\n * +============================+ +============================+ +==================================+\n *\n *\n * +============================+ +============================+ +=====================================+\n * + Keyboard is shown and we + => + User moved focus to + => + Only `onStart`/`onEnd` maybe called +\n * + call `onEnd` handler + + another `TextInput` + + (without involving `onMove`) +\n * +============================+ +============================+ +=====================================+\n *\n */\nconst KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n ...rest\n}) => {\n const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();\n const scrollPosition = useSharedValue(0);\n const position = useSharedValue(0);\n const currentKeyboardFrameHeight = useSharedValue(0);\n const keyboardHeight = useSharedValue(0);\n const tag = useSharedValue(-1);\n const initialKeyboardSize = useSharedValue(0);\n const scrollBeforeKeyboardMovement = useSharedValue(0);\n const { input } = useReanimatedFocusedInput();\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n\n const { height } = useWindowDimensions();\n\n const onScroll = useAnimatedScrollHandler(\n {\n onScroll: (e) => {\n position.value = e.contentOffset.y;\n },\n },\n [],\n );\n\n /**\n * Function that will scroll a ScrollView as keyboard gets moving\n */\n const maybeScroll = useCallback(\n (e: number, animated: boolean = false) => {\n \"worklet\";\n\n const visibleRect = height - keyboardHeight.value;\n const absoluteY = layout.value?.layout.absoluteY || 0;\n const inputHeight = layout.value?.layout.height || 0;\n const point = absoluteY + inputHeight;\n\n if (visibleRect - point <= bottomOffset) {\n const interpolatedScrollTo = interpolate(\n e,\n [initialKeyboardSize.value, keyboardHeight.value],\n [0, keyboardHeight.value - (height - point) + bottomOffset],\n );\n const targetScrollY =\n Math.max(interpolatedScrollTo, 0) + scrollPosition.value;\n scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);\n\n return interpolatedScrollTo;\n }\n\n if (absoluteY < 0) {\n const positionOnScreen = visibleRect - inputHeight - bottomOffset;\n const topOfScreen = scrollPosition.value + absoluteY;\n\n scrollTo(\n scrollViewAnimatedRef,\n 0,\n topOfScreen - positionOnScreen,\n animated,\n );\n }\n\n return 0;\n },\n [bottomOffset],\n );\n\n const onChangeText = useCallback(() => {\n \"worklet\";\n\n // if typing a text caused layout shift, then we need to ignore this handler\n // because this event will be handled in `useAnimatedReaction` below\n if (layout.value?.layout.height !== input.value?.layout.height) {\n return;\n }\n\n const prevScrollPosition = scrollPosition.value;\n const prevLayout = layout.value;\n\n scrollPosition.value = position.value;\n layout.value = input.value;\n maybeScroll(keyboardHeight.value, true);\n scrollPosition.value = prevScrollPosition;\n layout.value = prevLayout;\n }, [maybeScroll]);\n const onChangeTextHandler = useMemo(\n () => debounce(onChangeText, 200),\n [onChangeText],\n );\n\n useFocusedInputHandler(\n {\n onChangeText: onChangeTextHandler,\n },\n [onChangeTextHandler],\n );\n\n useSmoothKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillChangeSize =\n keyboardHeight.value !== e.height && e.height > 0;\n const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;\n\n if (keyboardWillChangeSize) {\n initialKeyboardSize.value = keyboardHeight.value;\n }\n\n if (keyboardWillHide) {\n // on back transition need to interpolate as [0, keyboardHeight]\n initialKeyboardSize.value = 0;\n scrollPosition.value = scrollBeforeKeyboardMovement.value;\n }\n\n if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {\n // persist scroll value\n scrollPosition.value = position.value;\n // just persist height - later will be used in interpolation\n keyboardHeight.value = e.height;\n }\n\n // focus was changed\n if (focusWasChanged) {\n tag.value = e.target;\n\n // save position of focused text input when keyboard starts to move\n layout.value = input.value;\n // save current scroll position - when keyboard will hide we'll reuse\n // this value to achieve smooth hide effect\n scrollBeforeKeyboardMovement.value = position.value;\n }\n\n if (focusWasChanged && !keyboardWillAppear) {\n // update position on scroll value, so `onEnd` handler\n // will pick up correct values\n position.value += maybeScroll(e.height, true);\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n currentKeyboardFrameHeight.value = e.height;\n\n maybeScroll(e.height);\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll],\n );\n\n useAnimatedReaction(\n () => input.value,\n (current, previous) => {\n if (\n current?.target === previous?.target &&\n current?.layout.height !== previous?.layout.height\n ) {\n const prevLayout = layout.value;\n\n layout.value = input.value;\n scrollPosition.value += maybeScroll(keyboardHeight.value, true);\n layout.value = prevLayout;\n }\n },\n [],\n );\n\n const view = useAnimatedStyle(\n () => ({\n paddingBottom: currentKeyboardFrameHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\n {...rest}\n onScroll={onScroll}\n scrollEventThrottle={16}\n >\n {children}\n <Reanimated.View style={view} />\n </Reanimated.ScrollView>\n );\n};\n\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
9
- var _hooks = require("../../hooks");
9
+ var _reactNativeKeyboardController = require("react-native-keyboard-controller");
10
10
  var _useKeyboardInterpolation = _interopRequireDefault(require("../hooks/useKeyboardInterpolation"));
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
  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); }
@@ -24,7 +24,7 @@ const KeyboardStickyView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
24
24
  } = _ref;
25
25
  const {
26
26
  height
27
- } = (0, _hooks.useReanimatedKeyboardAnimation)();
27
+ } = (0, _reactNativeKeyboardController.useReanimatedKeyboardAnimation)();
28
28
  const {
29
29
  interpolate
30
30
  } = (0, _useKeyboardInterpolation.default)();
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_hooks","_useKeyboardInterpolation","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","KeyboardStickyView","forwardRef","_ref","ref","children","offset","closed","opened","style","props","height","useReanimatedKeyboardAnimation","interpolate","useKeyboardInterpolation","stickyViewStyle","useAnimatedStyle","value","transform","translateY","styles","useMemo","createElement","View","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport Reanimated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport { useReanimatedKeyboardAnimation } from \"../../hooks\";\nimport useKeyboardInterpolation from \"../hooks/useKeyboardInterpolation\";\n\nimport type { View, ViewProps } from \"react-native\";\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref,\n ) => {\n const { height } = useReanimatedKeyboardAnimation();\n const { interpolate } = useKeyboardInterpolation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(-height.value, [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle],\n );\n\n return (\n <Reanimated.View ref={ref} style={styles} {...props}>\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":"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"}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_reactNativeKeyboardController","_useKeyboardInterpolation","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","KeyboardStickyView","forwardRef","_ref","ref","children","offset","closed","opened","style","props","height","useReanimatedKeyboardAnimation","interpolate","useKeyboardInterpolation","stickyViewStyle","useAnimatedStyle","value","transform","translateY","styles","useMemo","createElement","View","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport Reanimated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport { useReanimatedKeyboardAnimation } from \"react-native-keyboard-controller\";\n\nimport useKeyboardInterpolation from \"../hooks/useKeyboardInterpolation\";\n\nimport type { View, ViewProps } from \"react-native\";\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref,\n ) => {\n const { height } = useReanimatedKeyboardAnimation();\n const { interpolate } = useKeyboardInterpolation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(-height.value, [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle],\n );\n\n return (\n <Reanimated.View ref={ref} style={styles} {...props}>\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":"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"}
@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ var _reactNative = require("react-native");
7
8
  var _reactNativeReanimated = require("react-native-reanimated");
8
- var _hooks = require("../../hooks");
9
+ var _reactNativeKeyboardController = require("react-native-keyboard-controller");
9
10
  /**
10
11
  * Hook that can be used for interpolation keyboard movement. The main concern is the thing
11
12
  * when keyboard is opened and gets resized on Android. Let's say we are interpolating from
@@ -32,10 +33,16 @@ const useKeyboardInterpolation = () => {
32
33
  const interpolate = (keyboardPosition, output) => {
33
34
  "worklet";
34
35
 
36
+ // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when
37
+ // keyboard resized we will not have intermediate values and transition will be instant
38
+ // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
39
+ if (_reactNative.Platform.OS === "ios") {
40
+ return (0, _reactNativeReanimated.interpolate)(keyboardPosition, [0, nextKeyboardHeight.value], output);
41
+ }
35
42
  lastInterpolation.value = (0, _reactNativeReanimated.interpolate)(keyboardPosition, [prevKeyboardHeight.value, nextKeyboardHeight.value], shouldUseInternalInterpolation.value ? [lastInterpolation.value, output[1]] : output);
36
43
  return lastInterpolation.value;
37
44
  };
38
- (0, _hooks.useKeyboardHandler)({
45
+ (0, _reactNativeKeyboardController.useKeyboardHandler)({
39
46
  onStart: e => {
40
47
  "worklet";
41
48
 
@@ -1 +1 @@
1
- {"version":3,"names":["_reactNativeReanimated","require","_hooks","useKeyboardInterpolation","nextKeyboardHeight","useSharedValue","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","interpolate","keyboardPosition","output","value","interpolateREA","useKeyboardHandler","onStart","e","keyboardWillBeHidden","height","onEnd","_default","exports","default"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import {\n interpolate as interpolateREA,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n // keyboard heights\n const nextKeyboardHeight = useSharedValue(0);\n const prevKeyboardHeight = useSharedValue(0);\n // save latest interpolated position\n const lastInterpolation = useSharedValue(0);\n // boolean flag indicating which output range should be used\n const shouldUseInternalInterpolation = useSharedValue(false);\n\n const interpolate = (\n keyboardPosition: number,\n output: KeyboardInterpolationOutput,\n ) => {\n \"worklet\";\n\n lastInterpolation.value = interpolateREA(\n keyboardPosition,\n [prevKeyboardHeight.value, nextKeyboardHeight.value],\n shouldUseInternalInterpolation.value\n ? [lastInterpolation.value, output[1]]\n : output,\n );\n\n return lastInterpolation.value;\n };\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillBeHidden = e.height === 0;\n\n // keyboard will be hidden\n if (keyboardWillBeHidden) {\n shouldUseInternalInterpolation.value = false;\n prevKeyboardHeight.value = 0;\n }\n\n // keyboard will change its size\n if (\n // keyboard is shown on screen\n nextKeyboardHeight.value !== 0 &&\n // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n nextKeyboardHeight.value !== e.height &&\n // keyboard is not hiding\n !keyboardWillBeHidden\n ) {\n prevKeyboardHeight.value = nextKeyboardHeight.value;\n shouldUseInternalInterpolation.value = true;\n }\n\n // keyboard will show or change size\n if (!keyboardWillBeHidden) {\n nextKeyboardHeight.value = e.height;\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n // handles case show -> resize -> hide -> show\n // here we reset value to 0 when keyboard is hidden\n nextKeyboardHeight.value = e.height;\n },\n },\n [],\n );\n\n return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":";;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAC5C,MAAMC,kBAAkB,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAC5C;EACA,MAAME,iBAAiB,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAC3C;EACA,MAAMG,8BAA8B,GAAG,IAAAH,qCAAc,EAAC,KAAK,CAAC;EAE5D,MAAMI,WAAW,GAAGA,CAClBC,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAETJ,iBAAiB,CAACK,KAAK,GAAG,IAAAC,kCAAc,EACtCH,gBAAgB,EAChB,CAACJ,kBAAkB,CAACM,KAAK,EAAER,kBAAkB,CAACQ,KAAK,CAAC,EACpDJ,8BAA8B,CAACI,KAAK,GAChC,CAACL,iBAAiB,CAACK,KAAK,EAAED,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IAED,OAAOJ,iBAAiB,CAACK,KAAK;EAChC,CAAC;EAED,IAAAE,yBAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBT,8BAA8B,CAACI,KAAK,GAAG,KAAK;QAC5CN,kBAAkB,CAACM,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAR,kBAAkB,CAACQ,KAAK,KAAK,CAAC;MAC9B;MACAR,kBAAkB,CAACQ,KAAK,KAAKI,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAX,kBAAkB,CAACM,KAAK,GAAGR,kBAAkB,CAACQ,KAAK;QACnDJ,8BAA8B,CAACI,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACK,oBAAoB,EAAE;QACzBb,kBAAkB,CAACQ,KAAK,GAAGI,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAZ,kBAAkB,CAACQ,KAAK,GAAGI,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAET;EAAY,CAAC;AACxB,CAAC;AAAC,IAAAW,QAAA,GAEajB,wBAAwB;AAAAkB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
1
+ {"version":3,"names":["_reactNative","require","_reactNativeReanimated","_reactNativeKeyboardController","useKeyboardInterpolation","nextKeyboardHeight","useSharedValue","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","interpolate","keyboardPosition","output","Platform","OS","interpolateREA","value","useKeyboardHandler","onStart","e","keyboardWillBeHidden","height","onEnd","_default","exports","default"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n interpolate as interpolateREA,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n // keyboard heights\n const nextKeyboardHeight = useSharedValue(0);\n const prevKeyboardHeight = useSharedValue(0);\n // save latest interpolated position\n const lastInterpolation = useSharedValue(0);\n // boolean flag indicating which output range should be used\n const shouldUseInternalInterpolation = useSharedValue(false);\n\n const interpolate = (\n keyboardPosition: number,\n output: KeyboardInterpolationOutput,\n ) => {\n \"worklet\";\n\n // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when\n // keyboard resized we will not have intermediate values and transition will be instant\n // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (Platform.OS === \"ios\") {\n return interpolateREA(\n keyboardPosition,\n [0, nextKeyboardHeight.value],\n output,\n );\n }\n\n lastInterpolation.value = interpolateREA(\n keyboardPosition,\n [prevKeyboardHeight.value, nextKeyboardHeight.value],\n shouldUseInternalInterpolation.value\n ? [lastInterpolation.value, output[1]]\n : output,\n );\n\n return lastInterpolation.value;\n };\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillBeHidden = e.height === 0;\n\n // keyboard will be hidden\n if (keyboardWillBeHidden) {\n shouldUseInternalInterpolation.value = false;\n prevKeyboardHeight.value = 0;\n }\n\n // keyboard will change its size\n if (\n // keyboard is shown on screen\n nextKeyboardHeight.value !== 0 &&\n // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n nextKeyboardHeight.value !== e.height &&\n // keyboard is not hiding\n !keyboardWillBeHidden\n ) {\n prevKeyboardHeight.value = nextKeyboardHeight.value;\n shouldUseInternalInterpolation.value = true;\n }\n\n // keyboard will show or change size\n if (!keyboardWillBeHidden) {\n nextKeyboardHeight.value = e.height;\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n // handles case show -> resize -> hide -> show\n // here we reset value to 0 when keyboard is hidden\n nextKeyboardHeight.value = e.height;\n },\n },\n [],\n );\n\n return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAKA,IAAAE,8BAAA,GAAAF,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAC5C,MAAMC,kBAAkB,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAC5C;EACA,MAAME,iBAAiB,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAC3C;EACA,MAAMG,8BAA8B,GAAG,IAAAH,qCAAc,EAAC,KAAK,CAAC;EAE5D,MAAMI,WAAW,GAAGA,CAClBC,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAET;IACA;IACA;IACA,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;MACzB,OAAO,IAAAC,kCAAc,EACnBJ,gBAAgB,EAChB,CAAC,CAAC,EAAEN,kBAAkB,CAACW,KAAK,CAAC,EAC7BJ,MACF,CAAC;IACH;IAEAJ,iBAAiB,CAACQ,KAAK,GAAG,IAAAD,kCAAc,EACtCJ,gBAAgB,EAChB,CAACJ,kBAAkB,CAACS,KAAK,EAAEX,kBAAkB,CAACW,KAAK,CAAC,EACpDP,8BAA8B,CAACO,KAAK,GAChC,CAACR,iBAAiB,CAACQ,KAAK,EAAEJ,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IAED,OAAOJ,iBAAiB,CAACQ,KAAK;EAChC,CAAC;EAED,IAAAC,iDAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBX,8BAA8B,CAACO,KAAK,GAAG,KAAK;QAC5CT,kBAAkB,CAACS,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAX,kBAAkB,CAACW,KAAK,KAAK,CAAC;MAC9B;MACAX,kBAAkB,CAACW,KAAK,KAAKG,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAb,kBAAkB,CAACS,KAAK,GAAGX,kBAAkB,CAACW,KAAK;QACnDP,8BAA8B,CAACO,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACI,oBAAoB,EAAE;QACzBf,kBAAkB,CAACW,KAAK,GAAGG,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAd,kBAAkB,CAACW,KAAK,GAAGG,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEX;EAAY,CAAC;AACxB,CAAC;AAAC,IAAAa,QAAA,GAEanB,wBAAwB;AAAAoB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
@@ -1,5 +1,5 @@
1
1
  import { useSharedValue } from "react-native-reanimated";
2
- import { useKeyboardHandler } from "../../hooks";
2
+ import { useKeyboardHandler } from "react-native-keyboard-controller";
3
3
  export const useKeyboardAnimation = () => {
4
4
  const heightWhenOpened = useSharedValue(0);
5
5
  const height = useSharedValue(0);
@@ -24,8 +24,20 @@ export const useKeyboardAnimation = () => {
24
24
  "worklet";
25
25
 
26
26
  isClosed.value = e.height === 0;
27
- progress.value = e.progress;
28
- height.value = e.height;
27
+
28
+ // `height` update happens in `onMove` handler
29
+ // in `onEnd` we need to update only if `onMove`
30
+ // wasn't called (i. e. duration === 0)
31
+ //
32
+ // we can not call this code without condition below
33
+ // because in some corner cases (iOS with `secureTextEntry`)
34
+ // `onEnd` can be emitted before `onMove` and in this case
35
+ // it may lead to choppy/glitchy/jumpy UI
36
+ // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
37
+ if (e.duration === 0) {
38
+ progress.value = e.progress;
39
+ height.value = e.height;
40
+ }
29
41
  }
30
42
  }, []);
31
43
  return {
@@ -1 +1 @@
1
- {"version":3,"names":["useSharedValue","useKeyboardHandler","useKeyboardAnimation","heightWhenOpened","height","progress","isClosed","onStart","e","value","onMove","onEnd"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\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 onEnd: (e) => {\n \"worklet\";\n\n isClosed.value = e.height === 0;\n\n progress.value = e.progress;\n height.value = e.height;\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,yBAAyB;AAExD,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,gBAAgB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC1C,MAAMI,MAAM,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAChC,MAAMK,QAAQ,GAAGL,cAAc,CAAC,CAAC,CAAC;EAClC,MAAMM,QAAQ,GAAGN,cAAc,CAAC,IAAI,CAAC;EAErCC,kBAAkB,CAChB;IACEM,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACJ,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACG,KAAK,GAAG,KAAK;QACtBN,gBAAgB,CAACM,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,CAAC;IACDO,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETF,QAAQ,CAACG,KAAK,GAAGD,CAAC,CAACJ,MAAM,KAAK,CAAC;MAE/BC,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACH,QAAQ;MAC3BD,MAAM,CAACK,KAAK,GAAGD,CAAC,CAACJ,MAAM;IACzB;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEF,gBAAgB;IAAEG;EAAS,CAAC;AACzD,CAAC"}
1
+ {"version":3,"names":["useSharedValue","useKeyboardHandler","useKeyboardAnimation","heightWhenOpened","height","progress","isClosed","onStart","e","value","onMove","onEnd","duration"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\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 onEnd: (e) => {\n \"worklet\";\n\n isClosed.value = e.height === 0;\n\n // `height` update happens in `onMove` handler\n // in `onEnd` we need to update only if `onMove`\n // wasn't called (i. e. duration === 0)\n //\n // we can not call this code without condition below\n // because in some corner cases (iOS with `secureTextEntry`)\n // `onEnd` can be emitted before `onMove` and in this case\n // it may lead to choppy/glitchy/jumpy UI\n // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (e.duration === 0) {\n progress.value = e.progress;\n height.value = e.height;\n }\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,yBAAyB;AAExD,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,gBAAgB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC1C,MAAMI,MAAM,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAChC,MAAMK,QAAQ,GAAGL,cAAc,CAAC,CAAC,CAAC;EAClC,MAAMM,QAAQ,GAAGN,cAAc,CAAC,IAAI,CAAC;EAErCC,kBAAkB,CAChB;IACEM,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACJ,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACG,KAAK,GAAG,KAAK;QACtBN,gBAAgB,CAACM,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,CAAC;IACDO,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETF,QAAQ,CAACG,KAAK,GAAGD,CAAC,CAACJ,MAAM,KAAK,CAAC;;MAE/B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,IAAII,CAAC,CAACI,QAAQ,KAAK,CAAC,EAAE;QACpBP,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACH,QAAQ;QAC3BD,MAAM,CAACK,KAAK,GAAGD,CAAC,CAACJ,MAAM;MACzB;IACF;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEF,gBAAgB;IAAEG;EAAS,CAAC;AACzD,CAAC"}
@@ -52,6 +52,7 @@ const KeyboardAwareScrollView = _ref => {
52
52
  const scrollViewAnimatedRef = useAnimatedRef();
53
53
  const scrollPosition = useSharedValue(0);
54
54
  const position = useSharedValue(0);
55
+ const currentKeyboardFrameHeight = useSharedValue(0);
55
56
  const keyboardHeight = useSharedValue(0);
56
57
  const tag = useSharedValue(-1);
57
58
  const initialKeyboardSize = useSharedValue(0);
@@ -157,6 +158,7 @@ const KeyboardAwareScrollView = _ref => {
157
158
  onMove: e => {
158
159
  "worklet";
159
160
 
161
+ currentKeyboardFrameHeight.value = e.height;
160
162
  maybeScroll(e.height);
161
163
  },
162
164
  onEnd: e => {
@@ -175,16 +177,16 @@ const KeyboardAwareScrollView = _ref => {
175
177
  }
176
178
  }, []);
177
179
  const view = useAnimatedStyle(() => ({
178
- paddingBottom: keyboardHeight.value
180
+ paddingBottom: currentKeyboardFrameHeight.value
179
181
  }), []);
180
182
  return /*#__PURE__*/React.createElement(Reanimated.ScrollView, _extends({
181
183
  ref: scrollViewAnimatedRef
182
184
  }, rest, {
183
185
  onScroll: onScroll,
184
186
  scrollEventThrottle: 16
185
- }), /*#__PURE__*/React.createElement(Reanimated.View, {
187
+ }), children, /*#__PURE__*/React.createElement(Reanimated.View, {
186
188
  style: view
187
- }, children));
189
+ }));
188
190
  };
189
191
  export default KeyboardAwareScrollView;
190
192
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","useCallback","useMemo","useWindowDimensions","Reanimated","interpolate","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useFocusedInputHandler","useReanimatedFocusedInput","useSmoothKeyboardHandler","debounce","KeyboardAwareScrollView","_ref","children","bottomOffset","rest","scrollViewAnimatedRef","scrollPosition","position","keyboardHeight","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","layout","height","onScroll","e","value","contentOffset","y","maybeScroll","_layout$value","_layout$value2","animated","arguments","length","undefined","visibleRect","absoluteY","inputHeight","point","interpolatedScrollTo","targetScrollY","Math","max","positionOnScreen","topOfScreen","onChangeText","_layout$value3","_input$value","prevScrollPosition","prevLayout","onChangeTextHandler","onStart","keyboardWillChangeSize","keyboardWillAppear","keyboardWillHide","focusWasChanged","target","onMove","onEnd","current","previous","view","paddingBottom","createElement","ScrollView","_extends","ref","scrollEventThrottle","View","style"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport Reanimated, {\n interpolate,\n scrollTo,\n useAnimatedReaction,\n useAnimatedRef,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport {\n useFocusedInputHandler,\n useReanimatedFocusedInput,\n} from \"react-native-keyboard-controller\";\n\nimport { useSmoothKeyboardHandler } from \"./useSmoothKeyboardHandler\";\nimport { debounce } from \"./utils\";\n\nimport type { FC } from \"react\";\nimport type { ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n bottomOffset?: number;\n} & ScrollViewProps;\n\n/**\n * Everything begins from `onStart` handler. This handler is called every time,\n * when keyboard changes its size or when focused `TextInput` was changed. In\n * this handler we are calculating/memoizing values which later will be used\n * during layout movement. For that we calculate:\n * - layout of focused field (`layout`) - to understand whether there will be overlap\n * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation\n * - future keyboard height (`keyboardHeight`) - used in scroll interpolation\n * - current scroll position (`scrollPosition`) - used to scroll from this point\n *\n * Once we've calculated all necessary variables - we can actually start to use them.\n * It happens in `onMove` handler - this function simply calls `maybeScroll` with\n * current keyboard frame height. This functions makes the smooth transition.\n *\n * When the transition has finished we go to `onEnd` handler. In this handler\n * we verify, that the current field is not overlapped within a keyboard frame.\n * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,\n * however there could be some cases, when `onMove` is not called:\n * - on iOS when TextInput was changed - keyboard transition is instant\n * - on Android when TextInput was changed and keyboard size wasn't changed\n * So `onEnd` handler handle the case, when `onMove` wasn't triggered.\n *\n * ====================================================================================================================+\n * -----------------------------------------------------Flow chart-----------------------------------------------------+\n * ====================================================================================================================+\n *\n * +============================+ +============================+ +==================================+\n * + User Press on TextInput + => + Keyboard starts showing + => + As keyboard moves frame by frame + =>\n * + + + (run `onStart`) + + `onMove` is getting called +\n * +============================+ +============================+ +==================================+\n *\n *\n * +============================+ +============================+ +=====================================+\n * + Keyboard is shown and we + => + User moved focus to + => + Only `onStart`/`onEnd` maybe called +\n * + call `onEnd` handler + + another `TextInput` + + (without involving `onMove`) +\n * +============================+ +============================+ +=====================================+\n *\n */\nconst KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n ...rest\n}) => {\n const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();\n const scrollPosition = useSharedValue(0);\n const position = useSharedValue(0);\n const keyboardHeight = useSharedValue(0);\n const tag = useSharedValue(-1);\n const initialKeyboardSize = useSharedValue(0);\n const scrollBeforeKeyboardMovement = useSharedValue(0);\n const { input } = useReanimatedFocusedInput();\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n\n const { height } = useWindowDimensions();\n\n const onScroll = useAnimatedScrollHandler(\n {\n onScroll: (e) => {\n position.value = e.contentOffset.y;\n },\n },\n [],\n );\n\n /**\n * Function that will scroll a ScrollView as keyboard gets moving\n */\n const maybeScroll = useCallback(\n (e: number, animated: boolean = false) => {\n \"worklet\";\n\n const visibleRect = height - keyboardHeight.value;\n const absoluteY = layout.value?.layout.absoluteY || 0;\n const inputHeight = layout.value?.layout.height || 0;\n const point = absoluteY + inputHeight;\n\n if (visibleRect - point <= bottomOffset) {\n const interpolatedScrollTo = interpolate(\n e,\n [initialKeyboardSize.value, keyboardHeight.value],\n [0, keyboardHeight.value - (height - point) + bottomOffset],\n );\n const targetScrollY =\n Math.max(interpolatedScrollTo, 0) + scrollPosition.value;\n scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);\n\n return interpolatedScrollTo;\n }\n\n if (absoluteY < 0) {\n const positionOnScreen = visibleRect - inputHeight - bottomOffset;\n const topOfScreen = scrollPosition.value + absoluteY;\n\n scrollTo(\n scrollViewAnimatedRef,\n 0,\n topOfScreen - positionOnScreen,\n animated,\n );\n }\n\n return 0;\n },\n [bottomOffset],\n );\n\n const onChangeText = useCallback(() => {\n \"worklet\";\n\n // if typing a text caused layout shift, then we need to ignore this handler\n // because this event will be handled in `useAnimatedReaction` below\n if (layout.value?.layout.height !== input.value?.layout.height) {\n return;\n }\n\n const prevScrollPosition = scrollPosition.value;\n const prevLayout = layout.value;\n\n scrollPosition.value = position.value;\n layout.value = input.value;\n maybeScroll(keyboardHeight.value, true);\n scrollPosition.value = prevScrollPosition;\n layout.value = prevLayout;\n }, [maybeScroll]);\n const onChangeTextHandler = useMemo(\n () => debounce(onChangeText, 200),\n [onChangeText],\n );\n\n useFocusedInputHandler(\n {\n onChangeText: onChangeTextHandler,\n },\n [onChangeTextHandler],\n );\n\n useSmoothKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillChangeSize =\n keyboardHeight.value !== e.height && e.height > 0;\n const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;\n\n if (keyboardWillChangeSize) {\n initialKeyboardSize.value = keyboardHeight.value;\n }\n\n if (keyboardWillHide) {\n // on back transition need to interpolate as [0, keyboardHeight]\n initialKeyboardSize.value = 0;\n scrollPosition.value = scrollBeforeKeyboardMovement.value;\n }\n\n if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {\n // persist scroll value\n scrollPosition.value = position.value;\n // just persist height - later will be used in interpolation\n keyboardHeight.value = e.height;\n }\n\n // focus was changed\n if (focusWasChanged) {\n tag.value = e.target;\n\n // save position of focused text input when keyboard starts to move\n layout.value = input.value;\n // save current scroll position - when keyboard will hide we'll reuse\n // this value to achieve smooth hide effect\n scrollBeforeKeyboardMovement.value = position.value;\n }\n\n if (focusWasChanged && !keyboardWillAppear) {\n // update position on scroll value, so `onEnd` handler\n // will pick up correct values\n position.value += maybeScroll(e.height, true);\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n maybeScroll(e.height);\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll],\n );\n\n useAnimatedReaction(\n () => input.value,\n (current, previous) => {\n if (\n current?.target === previous?.target &&\n current?.layout.height !== previous?.layout.height\n ) {\n const prevLayout = layout.value;\n\n layout.value = input.value;\n scrollPosition.value += maybeScroll(keyboardHeight.value, true);\n layout.value = prevLayout;\n }\n },\n [],\n );\n\n const view = useAnimatedStyle(\n () => ({\n paddingBottom: keyboardHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\n {...rest}\n onScroll={onScroll}\n scrollEventThrottle={16}\n >\n <Reanimated.View style={view}>{children}</Reanimated.View>\n </Reanimated.ScrollView>\n );\n};\n\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","useCallback","useMemo","useWindowDimensions","Reanimated","interpolate","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useFocusedInputHandler","useReanimatedFocusedInput","useSmoothKeyboardHandler","debounce","KeyboardAwareScrollView","_ref","children","bottomOffset","rest","scrollViewAnimatedRef","scrollPosition","position","currentKeyboardFrameHeight","keyboardHeight","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","layout","height","onScroll","e","value","contentOffset","y","maybeScroll","_layout$value","_layout$value2","animated","arguments","length","undefined","visibleRect","absoluteY","inputHeight","point","interpolatedScrollTo","targetScrollY","Math","max","positionOnScreen","topOfScreen","onChangeText","_layout$value3","_input$value","prevScrollPosition","prevLayout","onChangeTextHandler","onStart","keyboardWillChangeSize","keyboardWillAppear","keyboardWillHide","focusWasChanged","target","onMove","onEnd","current","previous","view","paddingBottom","createElement","ScrollView","_extends","ref","scrollEventThrottle","View","style"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport Reanimated, {\n interpolate,\n scrollTo,\n useAnimatedReaction,\n useAnimatedRef,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport {\n useFocusedInputHandler,\n useReanimatedFocusedInput,\n} from \"react-native-keyboard-controller\";\n\nimport { useSmoothKeyboardHandler } from \"./useSmoothKeyboardHandler\";\nimport { debounce } from \"./utils\";\n\nimport type { FC } from \"react\";\nimport type { ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n bottomOffset?: number;\n} & ScrollViewProps;\n\n/**\n * Everything begins from `onStart` handler. This handler is called every time,\n * when keyboard changes its size or when focused `TextInput` was changed. In\n * this handler we are calculating/memoizing values which later will be used\n * during layout movement. For that we calculate:\n * - layout of focused field (`layout`) - to understand whether there will be overlap\n * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation\n * - future keyboard height (`keyboardHeight`) - used in scroll interpolation\n * - current scroll position (`scrollPosition`) - used to scroll from this point\n *\n * Once we've calculated all necessary variables - we can actually start to use them.\n * It happens in `onMove` handler - this function simply calls `maybeScroll` with\n * current keyboard frame height. This functions makes the smooth transition.\n *\n * When the transition has finished we go to `onEnd` handler. In this handler\n * we verify, that the current field is not overlapped within a keyboard frame.\n * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,\n * however there could be some cases, when `onMove` is not called:\n * - on iOS when TextInput was changed - keyboard transition is instant\n * - on Android when TextInput was changed and keyboard size wasn't changed\n * So `onEnd` handler handle the case, when `onMove` wasn't triggered.\n *\n * ====================================================================================================================+\n * -----------------------------------------------------Flow chart-----------------------------------------------------+\n * ====================================================================================================================+\n *\n * +============================+ +============================+ +==================================+\n * + User Press on TextInput + => + Keyboard starts showing + => + As keyboard moves frame by frame + =>\n * + + + (run `onStart`) + + `onMove` is getting called +\n * +============================+ +============================+ +==================================+\n *\n *\n * +============================+ +============================+ +=====================================+\n * + Keyboard is shown and we + => + User moved focus to + => + Only `onStart`/`onEnd` maybe called +\n * + call `onEnd` handler + + another `TextInput` + + (without involving `onMove`) +\n * +============================+ +============================+ +=====================================+\n *\n */\nconst KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n ...rest\n}) => {\n const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();\n const scrollPosition = useSharedValue(0);\n const position = useSharedValue(0);\n const currentKeyboardFrameHeight = useSharedValue(0);\n const keyboardHeight = useSharedValue(0);\n const tag = useSharedValue(-1);\n const initialKeyboardSize = useSharedValue(0);\n const scrollBeforeKeyboardMovement = useSharedValue(0);\n const { input } = useReanimatedFocusedInput();\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n\n const { height } = useWindowDimensions();\n\n const onScroll = useAnimatedScrollHandler(\n {\n onScroll: (e) => {\n position.value = e.contentOffset.y;\n },\n },\n [],\n );\n\n /**\n * Function that will scroll a ScrollView as keyboard gets moving\n */\n const maybeScroll = useCallback(\n (e: number, animated: boolean = false) => {\n \"worklet\";\n\n const visibleRect = height - keyboardHeight.value;\n const absoluteY = layout.value?.layout.absoluteY || 0;\n const inputHeight = layout.value?.layout.height || 0;\n const point = absoluteY + inputHeight;\n\n if (visibleRect - point <= bottomOffset) {\n const interpolatedScrollTo = interpolate(\n e,\n [initialKeyboardSize.value, keyboardHeight.value],\n [0, keyboardHeight.value - (height - point) + bottomOffset],\n );\n const targetScrollY =\n Math.max(interpolatedScrollTo, 0) + scrollPosition.value;\n scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);\n\n return interpolatedScrollTo;\n }\n\n if (absoluteY < 0) {\n const positionOnScreen = visibleRect - inputHeight - bottomOffset;\n const topOfScreen = scrollPosition.value + absoluteY;\n\n scrollTo(\n scrollViewAnimatedRef,\n 0,\n topOfScreen - positionOnScreen,\n animated,\n );\n }\n\n return 0;\n },\n [bottomOffset],\n );\n\n const onChangeText = useCallback(() => {\n \"worklet\";\n\n // if typing a text caused layout shift, then we need to ignore this handler\n // because this event will be handled in `useAnimatedReaction` below\n if (layout.value?.layout.height !== input.value?.layout.height) {\n return;\n }\n\n const prevScrollPosition = scrollPosition.value;\n const prevLayout = layout.value;\n\n scrollPosition.value = position.value;\n layout.value = input.value;\n maybeScroll(keyboardHeight.value, true);\n scrollPosition.value = prevScrollPosition;\n layout.value = prevLayout;\n }, [maybeScroll]);\n const onChangeTextHandler = useMemo(\n () => debounce(onChangeText, 200),\n [onChangeText],\n );\n\n useFocusedInputHandler(\n {\n onChangeText: onChangeTextHandler,\n },\n [onChangeTextHandler],\n );\n\n useSmoothKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillChangeSize =\n keyboardHeight.value !== e.height && e.height > 0;\n const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;\n\n if (keyboardWillChangeSize) {\n initialKeyboardSize.value = keyboardHeight.value;\n }\n\n if (keyboardWillHide) {\n // on back transition need to interpolate as [0, keyboardHeight]\n initialKeyboardSize.value = 0;\n scrollPosition.value = scrollBeforeKeyboardMovement.value;\n }\n\n if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {\n // persist scroll value\n scrollPosition.value = position.value;\n // just persist height - later will be used in interpolation\n keyboardHeight.value = e.height;\n }\n\n // focus was changed\n if (focusWasChanged) {\n tag.value = e.target;\n\n // save position of focused text input when keyboard starts to move\n layout.value = input.value;\n // save current scroll position - when keyboard will hide we'll reuse\n // this value to achieve smooth hide effect\n scrollBeforeKeyboardMovement.value = position.value;\n }\n\n if (focusWasChanged && !keyboardWillAppear) {\n // update position on scroll value, so `onEnd` handler\n // will pick up correct values\n position.value += maybeScroll(e.height, true);\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n currentKeyboardFrameHeight.value = e.height;\n\n maybeScroll(e.height);\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll],\n );\n\n useAnimatedReaction(\n () => input.value,\n (current, previous) => {\n if (\n current?.target === previous?.target &&\n current?.layout.height !== previous?.layout.height\n ) {\n const prevLayout = layout.value;\n\n layout.value = input.value;\n scrollPosition.value += maybeScroll(keyboardHeight.value, true);\n layout.value = prevLayout;\n }\n },\n [],\n );\n\n const view = useAnimatedStyle(\n () => ({\n paddingBottom: currentKeyboardFrameHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\n {...rest}\n onScroll={onScroll}\n scrollEventThrottle={16}\n >\n {children}\n <Reanimated.View style={view} />\n </Reanimated.ScrollView>\n );\n};\n\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  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); }
2
2
  import React, { forwardRef, useMemo } from "react";
3
3
  import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
4
- import { useReanimatedKeyboardAnimation } from "../../hooks";
4
+ import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
5
5
  import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
6
6
  const KeyboardStickyView = /*#__PURE__*/forwardRef((_ref, ref) => {
7
7
  let {
@@ -1 +1 @@
1
- {"version":3,"names":["React","forwardRef","useMemo","Reanimated","useAnimatedStyle","useReanimatedKeyboardAnimation","useKeyboardInterpolation","KeyboardStickyView","_ref","ref","children","offset","closed","opened","style","props","height","interpolate","stickyViewStyle","value","transform","translateY","styles","createElement","View","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport Reanimated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport { useReanimatedKeyboardAnimation } from \"../../hooks\";\nimport useKeyboardInterpolation from \"../hooks/useKeyboardInterpolation\";\n\nimport type { View, ViewProps } from \"react-native\";\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref,\n ) => {\n const { height } = useReanimatedKeyboardAnimation();\n const { interpolate } = useKeyboardInterpolation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(-height.value, [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle],\n );\n\n return (\n <Reanimated.View ref={ref} style={styles} {...props}>\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,IAAIC,gBAAgB,QAAQ,yBAAyB;AAEtE,SAASC,8BAA8B,QAAQ,aAAa;AAC5D,OAAOC,wBAAwB,MAAM,mCAAmC;AAoBxE,MAAMC,kBAAkB,gBAAGN,UAAU,CAInC,CAAAO,IAAA,EAEEC,GAAG,KACA;EAAA,IAFH;IAAEC,QAAQ;IAAEC,MAAM,EAAE;MAAEC,MAAM,GAAG,CAAC;MAAEC,MAAM,GAAG;IAAE,CAAC,GAAG,CAAC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC,GAAAP,IAAA;EAGtE,MAAM;IAAEQ;EAAO,CAAC,GAAGX,8BAA8B,CAAC,CAAC;EACnD,MAAM;IAAEY;EAAY,CAAC,GAAGX,wBAAwB,CAAC,CAAC;EAElD,MAAMY,eAAe,GAAGd,gBAAgB,CAAC,MAAM;IAC7C,MAAMO,MAAM,GAAGM,WAAW,CAAC,CAACD,MAAM,CAACG,KAAK,EAAE,CAACP,MAAM,EAAEC,MAAM,CAAC,CAAC;IAE3D,OAAO;MACLO,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEL,MAAM,CAACG,KAAK,GAAGR;MAAO,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,MAAMS,MAAM,GAAGpB,OAAO,CACpB,MAAM,CAACY,KAAK,EAAEI,eAAe,CAAC,EAC9B,CAACJ,KAAK,EAAEI,eAAe,CACzB,CAAC;EAED,oBACElB,KAAA,CAAAuB,aAAA,CAACpB,UAAU,CAACqB,IAAI,EAAAC,QAAA;IAAChB,GAAG,EAAEA,GAAI;IAACK,KAAK,EAAEQ;EAAO,GAAKP,KAAK,GAChDL,QACc,CAAC;AAEtB,CACF,CAAC;AAED,eAAeH,kBAAkB"}
1
+ {"version":3,"names":["React","forwardRef","useMemo","Reanimated","useAnimatedStyle","useReanimatedKeyboardAnimation","useKeyboardInterpolation","KeyboardStickyView","_ref","ref","children","offset","closed","opened","style","props","height","interpolate","stickyViewStyle","value","transform","translateY","styles","createElement","View","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport Reanimated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport { useReanimatedKeyboardAnimation } from \"react-native-keyboard-controller\";\n\nimport useKeyboardInterpolation from \"../hooks/useKeyboardInterpolation\";\n\nimport type { View, ViewProps } from \"react-native\";\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref,\n ) => {\n const { height } = useReanimatedKeyboardAnimation();\n const { interpolate } = useKeyboardInterpolation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(-height.value, [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle],\n );\n\n return (\n <Reanimated.View ref={ref} style={styles} {...props}>\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,IAAIC,gBAAgB,QAAQ,yBAAyB;AAEtE,SAASC,8BAA8B,QAAQ,kCAAkC;AAEjF,OAAOC,wBAAwB,MAAM,mCAAmC;AAoBxE,MAAMC,kBAAkB,gBAAGN,UAAU,CAInC,CAAAO,IAAA,EAEEC,GAAG,KACA;EAAA,IAFH;IAAEC,QAAQ;IAAEC,MAAM,EAAE;MAAEC,MAAM,GAAG,CAAC;MAAEC,MAAM,GAAG;IAAE,CAAC,GAAG,CAAC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC,GAAAP,IAAA;EAGtE,MAAM;IAAEQ;EAAO,CAAC,GAAGX,8BAA8B,CAAC,CAAC;EACnD,MAAM;IAAEY;EAAY,CAAC,GAAGX,wBAAwB,CAAC,CAAC;EAElD,MAAMY,eAAe,GAAGd,gBAAgB,CAAC,MAAM;IAC7C,MAAMO,MAAM,GAAGM,WAAW,CAAC,CAACD,MAAM,CAACG,KAAK,EAAE,CAACP,MAAM,EAAEC,MAAM,CAAC,CAAC;IAE3D,OAAO;MACLO,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEL,MAAM,CAACG,KAAK,GAAGR;MAAO,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,MAAMS,MAAM,GAAGpB,OAAO,CACpB,MAAM,CAACY,KAAK,EAAEI,eAAe,CAAC,EAC9B,CAACJ,KAAK,EAAEI,eAAe,CACzB,CAAC;EAED,oBACElB,KAAA,CAAAuB,aAAA,CAACpB,UAAU,CAACqB,IAAI,EAAAC,QAAA;IAAChB,GAAG,EAAEA,GAAI;IAACK,KAAK,EAAEQ;EAAO,GAAKP,KAAK,GAChDL,QACc,CAAC;AAEtB,CACF,CAAC;AAED,eAAeH,kBAAkB"}
@@ -1,5 +1,6 @@
1
+ import { Platform } from "react-native";
1
2
  import { interpolate as interpolateREA, useSharedValue } from "react-native-reanimated";
2
- import { useKeyboardHandler } from "../../hooks";
3
+ import { useKeyboardHandler } from "react-native-keyboard-controller";
3
4
  /**
4
5
  * Hook that can be used for interpolation keyboard movement. The main concern is the thing
5
6
  * when keyboard is opened and gets resized on Android. Let's say we are interpolating from
@@ -26,6 +27,12 @@ const useKeyboardInterpolation = () => {
26
27
  const interpolate = (keyboardPosition, output) => {
27
28
  "worklet";
28
29
 
30
+ // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when
31
+ // keyboard resized we will not have intermediate values and transition will be instant
32
+ // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
33
+ if (Platform.OS === "ios") {
34
+ return interpolateREA(keyboardPosition, [0, nextKeyboardHeight.value], output);
35
+ }
29
36
  lastInterpolation.value = interpolateREA(keyboardPosition, [prevKeyboardHeight.value, nextKeyboardHeight.value], shouldUseInternalInterpolation.value ? [lastInterpolation.value, output[1]] : output);
30
37
  return lastInterpolation.value;
31
38
  };
@@ -1 +1 @@
1
- {"version":3,"names":["interpolate","interpolateREA","useSharedValue","useKeyboardHandler","useKeyboardInterpolation","nextKeyboardHeight","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","keyboardPosition","output","value","onStart","e","keyboardWillBeHidden","height","onEnd"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import {\n interpolate as interpolateREA,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"../../hooks\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n // keyboard heights\n const nextKeyboardHeight = useSharedValue(0);\n const prevKeyboardHeight = useSharedValue(0);\n // save latest interpolated position\n const lastInterpolation = useSharedValue(0);\n // boolean flag indicating which output range should be used\n const shouldUseInternalInterpolation = useSharedValue(false);\n\n const interpolate = (\n keyboardPosition: number,\n output: KeyboardInterpolationOutput,\n ) => {\n \"worklet\";\n\n lastInterpolation.value = interpolateREA(\n keyboardPosition,\n [prevKeyboardHeight.value, nextKeyboardHeight.value],\n shouldUseInternalInterpolation.value\n ? [lastInterpolation.value, output[1]]\n : output,\n );\n\n return lastInterpolation.value;\n };\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillBeHidden = e.height === 0;\n\n // keyboard will be hidden\n if (keyboardWillBeHidden) {\n shouldUseInternalInterpolation.value = false;\n prevKeyboardHeight.value = 0;\n }\n\n // keyboard will change its size\n if (\n // keyboard is shown on screen\n nextKeyboardHeight.value !== 0 &&\n // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n nextKeyboardHeight.value !== e.height &&\n // keyboard is not hiding\n !keyboardWillBeHidden\n ) {\n prevKeyboardHeight.value = nextKeyboardHeight.value;\n shouldUseInternalInterpolation.value = true;\n }\n\n // keyboard will show or change size\n if (!keyboardWillBeHidden) {\n nextKeyboardHeight.value = e.height;\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n // handles case show -> resize -> hide -> show\n // here we reset value to 0 when keyboard is hidden\n nextKeyboardHeight.value = e.height;\n },\n },\n [],\n );\n\n return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":"AAAA,SACEA,WAAW,IAAIC,cAAc,EAC7BC,cAAc,QACT,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,aAAa;AAIhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC5C,MAAMI,kBAAkB,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAC5C;EACA,MAAMK,iBAAiB,GAAGL,cAAc,CAAC,CAAC,CAAC;EAC3C;EACA,MAAMM,8BAA8B,GAAGN,cAAc,CAAC,KAAK,CAAC;EAE5D,MAAMF,WAAW,GAAGA,CAClBS,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAETH,iBAAiB,CAACI,KAAK,GAAGV,cAAc,CACtCQ,gBAAgB,EAChB,CAACH,kBAAkB,CAACK,KAAK,EAAEN,kBAAkB,CAACM,KAAK,CAAC,EACpDH,8BAA8B,CAACG,KAAK,GAChC,CAACJ,iBAAiB,CAACI,KAAK,EAAED,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IAED,OAAOH,iBAAiB,CAACI,KAAK;EAChC,CAAC;EAEDR,kBAAkB,CAChB;IACES,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBN,8BAA8B,CAACG,KAAK,GAAG,KAAK;QAC5CL,kBAAkB,CAACK,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAN,kBAAkB,CAACM,KAAK,KAAK,CAAC;MAC9B;MACAN,kBAAkB,CAACM,KAAK,KAAKE,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAR,kBAAkB,CAACK,KAAK,GAAGN,kBAAkB,CAACM,KAAK;QACnDH,8BAA8B,CAACG,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACG,oBAAoB,EAAE;QACzBT,kBAAkB,CAACM,KAAK,GAAGE,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAR,kBAAkB,CAACM,KAAK,GAAGE,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEf;EAAY,CAAC;AACxB,CAAC;AAED,eAAeI,wBAAwB"}
1
+ {"version":3,"names":["Platform","interpolate","interpolateREA","useSharedValue","useKeyboardHandler","useKeyboardInterpolation","nextKeyboardHeight","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","keyboardPosition","output","OS","value","onStart","e","keyboardWillBeHidden","height","onEnd"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n interpolate as interpolateREA,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n // keyboard heights\n const nextKeyboardHeight = useSharedValue(0);\n const prevKeyboardHeight = useSharedValue(0);\n // save latest interpolated position\n const lastInterpolation = useSharedValue(0);\n // boolean flag indicating which output range should be used\n const shouldUseInternalInterpolation = useSharedValue(false);\n\n const interpolate = (\n keyboardPosition: number,\n output: KeyboardInterpolationOutput,\n ) => {\n \"worklet\";\n\n // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when\n // keyboard resized we will not have intermediate values and transition will be instant\n // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (Platform.OS === \"ios\") {\n return interpolateREA(\n keyboardPosition,\n [0, nextKeyboardHeight.value],\n output,\n );\n }\n\n lastInterpolation.value = interpolateREA(\n keyboardPosition,\n [prevKeyboardHeight.value, nextKeyboardHeight.value],\n shouldUseInternalInterpolation.value\n ? [lastInterpolation.value, output[1]]\n : output,\n );\n\n return lastInterpolation.value;\n };\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillBeHidden = e.height === 0;\n\n // keyboard will be hidden\n if (keyboardWillBeHidden) {\n shouldUseInternalInterpolation.value = false;\n prevKeyboardHeight.value = 0;\n }\n\n // keyboard will change its size\n if (\n // keyboard is shown on screen\n nextKeyboardHeight.value !== 0 &&\n // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n nextKeyboardHeight.value !== e.height &&\n // keyboard is not hiding\n !keyboardWillBeHidden\n ) {\n prevKeyboardHeight.value = nextKeyboardHeight.value;\n shouldUseInternalInterpolation.value = true;\n }\n\n // keyboard will show or change size\n if (!keyboardWillBeHidden) {\n nextKeyboardHeight.value = e.height;\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n // handles case show -> resize -> hide -> show\n // here we reset value to 0 when keyboard is hidden\n nextKeyboardHeight.value = e.height;\n },\n },\n [],\n );\n\n return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SACEC,WAAW,IAAIC,cAAc,EAC7BC,cAAc,QACT,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,kCAAkC;AAIrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC5C,MAAMI,kBAAkB,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAC5C;EACA,MAAMK,iBAAiB,GAAGL,cAAc,CAAC,CAAC,CAAC;EAC3C;EACA,MAAMM,8BAA8B,GAAGN,cAAc,CAAC,KAAK,CAAC;EAE5D,MAAMF,WAAW,GAAGA,CAClBS,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAET;IACA;IACA;IACA,IAAIX,QAAQ,CAACY,EAAE,KAAK,KAAK,EAAE;MACzB,OAAOV,cAAc,CACnBQ,gBAAgB,EAChB,CAAC,CAAC,EAAEJ,kBAAkB,CAACO,KAAK,CAAC,EAC7BF,MACF,CAAC;IACH;IAEAH,iBAAiB,CAACK,KAAK,GAAGX,cAAc,CACtCQ,gBAAgB,EAChB,CAACH,kBAAkB,CAACM,KAAK,EAAEP,kBAAkB,CAACO,KAAK,CAAC,EACpDJ,8BAA8B,CAACI,KAAK,GAChC,CAACL,iBAAiB,CAACK,KAAK,EAAEF,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IAED,OAAOH,iBAAiB,CAACK,KAAK;EAChC,CAAC;EAEDT,kBAAkB,CAChB;IACEU,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBP,8BAA8B,CAACI,KAAK,GAAG,KAAK;QAC5CN,kBAAkB,CAACM,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAP,kBAAkB,CAACO,KAAK,KAAK,CAAC;MAC9B;MACAP,kBAAkB,CAACO,KAAK,KAAKE,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAT,kBAAkB,CAACM,KAAK,GAAGP,kBAAkB,CAACO,KAAK;QACnDJ,8BAA8B,CAACI,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACG,oBAAoB,EAAE;QACzBV,kBAAkB,CAACO,KAAK,GAAGE,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAT,kBAAkB,CAACO,KAAK,GAAGE,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEhB;EAAY,CAAC;AACxB,CAAC;AAED,eAAeI,wBAAwB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-keyboard-controller",
3
- "version": "1.10.1",
3
+ "version": "1.10.2",
4
4
  "description": "Keyboard manager which works in identical way on both iOS and Android",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -1,6 +1,6 @@
1
1
  import { useSharedValue } from "react-native-reanimated";
2
2
 
3
- import { useKeyboardHandler } from "../../hooks";
3
+ import { useKeyboardHandler } from "react-native-keyboard-controller";
4
4
 
5
5
  export const useKeyboardAnimation = () => {
6
6
  const heightWhenOpened = useSharedValue(0);
@@ -29,8 +29,19 @@ export const useKeyboardAnimation = () => {
29
29
 
30
30
  isClosed.value = e.height === 0;
31
31
 
32
- progress.value = e.progress;
33
- height.value = e.height;
32
+ // `height` update happens in `onMove` handler
33
+ // in `onEnd` we need to update only if `onMove`
34
+ // wasn't called (i. e. duration === 0)
35
+ //
36
+ // we can not call this code without condition below
37
+ // because in some corner cases (iOS with `secureTextEntry`)
38
+ // `onEnd` can be emitted before `onMove` and in this case
39
+ // it may lead to choppy/glitchy/jumpy UI
40
+ // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
41
+ if (e.duration === 0) {
42
+ progress.value = e.progress;
43
+ height.value = e.height;
44
+ }
34
45
  },
35
46
  },
36
47
  [],
@@ -72,6 +72,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
72
72
  const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
73
73
  const scrollPosition = useSharedValue(0);
74
74
  const position = useSharedValue(0);
75
+ const currentKeyboardFrameHeight = useSharedValue(0);
75
76
  const keyboardHeight = useSharedValue(0);
76
77
  const tag = useSharedValue(-1);
77
78
  const initialKeyboardSize = useSharedValue(0);
@@ -211,6 +212,8 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
211
212
  onMove: (e) => {
212
213
  "worklet";
213
214
 
215
+ currentKeyboardFrameHeight.value = e.height;
216
+
214
217
  maybeScroll(e.height);
215
218
  },
216
219
  onEnd: (e) => {
@@ -242,7 +245,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
242
245
 
243
246
  const view = useAnimatedStyle(
244
247
  () => ({
245
- paddingBottom: keyboardHeight.value,
248
+ paddingBottom: currentKeyboardFrameHeight.value,
246
249
  }),
247
250
  [],
248
251
  );
@@ -254,7 +257,8 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
254
257
  onScroll={onScroll}
255
258
  scrollEventThrottle={16}
256
259
  >
257
- <Reanimated.View style={view}>{children}</Reanimated.View>
260
+ {children}
261
+ <Reanimated.View style={view} />
258
262
  </Reanimated.ScrollView>
259
263
  );
260
264
  };
@@ -1,7 +1,8 @@
1
1
  import React, { forwardRef, useMemo } from "react";
2
2
  import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
3
3
 
4
- import { useReanimatedKeyboardAnimation } from "../../hooks";
4
+ import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
5
+
5
6
  import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
6
7
 
7
8
  import type { View, ViewProps } from "react-native";
@@ -1,9 +1,10 @@
1
+ import { Platform } from "react-native";
1
2
  import {
2
3
  interpolate as interpolateREA,
3
4
  useSharedValue,
4
5
  } from "react-native-reanimated";
5
6
 
6
- import { useKeyboardHandler } from "../../hooks";
7
+ import { useKeyboardHandler } from "react-native-keyboard-controller";
7
8
 
8
9
  type KeyboardInterpolationOutput = [number, number];
9
10
 
@@ -37,6 +38,17 @@ const useKeyboardInterpolation = () => {
37
38
  ) => {
38
39
  "worklet";
39
40
 
41
+ // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when
42
+ // keyboard resized we will not have intermediate values and transition will be instant
43
+ // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
44
+ if (Platform.OS === "ios") {
45
+ return interpolateREA(
46
+ keyboardPosition,
47
+ [0, nextKeyboardHeight.value],
48
+ output,
49
+ );
50
+ }
51
+
40
52
  lastInterpolation.value = interpolateREA(
41
53
  keyboardPosition,
42
54
  [prevKeyboardHeight.value, nextKeyboardHeight.value],