react-native-keyboard-controller 1.10.2 → 1.10.4

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.
@@ -13,7 +13,7 @@ var _utils = require("./utils");
13
13
  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); }
14
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
15
  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); }
16
- /**
16
+ /*
17
17
  * Everything begins from `onStart` handler. This handler is called every time,
18
18
  * when keyboard changes its size or when focused `TextInput` was changed. In
19
19
  * this handler we are calculating/memoizing values which later will be used
@@ -51,10 +51,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
51
51
  * +============================+ +============================+ +=====================================+
52
52
  *
53
53
  */
54
- const KeyboardAwareScrollView = _ref => {
54
+ const KeyboardAwareScrollView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
55
55
  let {
56
56
  children,
57
57
  bottomOffset = 0,
58
+ disableScrollOnKeyboardHide = false,
58
59
  ...rest
59
60
  } = _ref;
60
61
  const scrollViewAnimatedRef = (0, _reactNativeReanimated.useAnimatedRef)();
@@ -62,6 +63,7 @@ const KeyboardAwareScrollView = _ref => {
62
63
  const position = (0, _reactNativeReanimated.useSharedValue)(0);
63
64
  const currentKeyboardFrameHeight = (0, _reactNativeReanimated.useSharedValue)(0);
64
65
  const keyboardHeight = (0, _reactNativeReanimated.useSharedValue)(0);
66
+ const keyboardWillAppear = (0, _reactNativeReanimated.useSharedValue)(false);
65
67
  const tag = (0, _reactNativeReanimated.useSharedValue)(-1);
66
68
  const initialKeyboardSize = (0, _reactNativeReanimated.useSharedValue)(0);
67
69
  const scrollBeforeKeyboardMovement = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -77,6 +79,14 @@ const KeyboardAwareScrollView = _ref => {
77
79
  position.value = e.contentOffset.y;
78
80
  }
79
81
  }, []);
82
+ const onRef = (0, _react.useCallback)(assignedRef => {
83
+ if (typeof ref === "function") {
84
+ ref(assignedRef);
85
+ } else if (ref) {
86
+ ref.current = assignedRef;
87
+ }
88
+ scrollViewAnimatedRef(assignedRef);
89
+ }, []);
80
90
 
81
91
  /**
82
92
  * Function that will scroll a ScrollView as keyboard gets moving
@@ -129,7 +139,7 @@ const KeyboardAwareScrollView = _ref => {
129
139
  "worklet";
130
140
 
131
141
  const keyboardWillChangeSize = keyboardHeight.value !== e.height && e.height > 0;
132
- const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;
142
+ keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
133
143
  const keyboardWillHide = e.height === 0;
134
144
  const focusWasChanged = tag.value !== e.target && e.target !== -1 || keyboardWillChangeSize;
135
145
  if (keyboardWillChangeSize) {
@@ -140,7 +150,7 @@ const KeyboardAwareScrollView = _ref => {
140
150
  initialKeyboardSize.value = 0;
141
151
  scrollPosition.value = scrollBeforeKeyboardMovement.value;
142
152
  }
143
- if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {
153
+ if (keyboardWillAppear.value || keyboardWillChangeSize || focusWasChanged) {
144
154
  // persist scroll value
145
155
  scrollPosition.value = position.value;
146
156
  // just persist height - later will be used in interpolation
@@ -157,7 +167,7 @@ const KeyboardAwareScrollView = _ref => {
157
167
  // this value to achieve smooth hide effect
158
168
  scrollBeforeKeyboardMovement.value = position.value;
159
169
  }
160
- if (focusWasChanged && !keyboardWillAppear) {
170
+ if (focusWasChanged && !keyboardWillAppear.value) {
161
171
  // update position on scroll value, so `onEnd` handler
162
172
  // will pick up correct values
163
173
  position.value += maybeScroll(e.height, true);
@@ -167,7 +177,11 @@ const KeyboardAwareScrollView = _ref => {
167
177
  "worklet";
168
178
 
169
179
  currentKeyboardFrameHeight.value = e.height;
170
- maybeScroll(e.height);
180
+
181
+ // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
182
+ if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
183
+ maybeScroll(e.height);
184
+ }
171
185
  },
172
186
  onEnd: e => {
173
187
  "worklet";
@@ -175,7 +189,7 @@ const KeyboardAwareScrollView = _ref => {
175
189
  keyboardHeight.value = e.height;
176
190
  scrollPosition.value = position.value;
177
191
  }
178
- }, [height, maybeScroll]);
192
+ }, [height, maybeScroll, disableScrollOnKeyboardHide]);
179
193
  (0, _reactNativeReanimated.useAnimatedReaction)(() => input.value, (current, previous) => {
180
194
  if ((current === null || current === void 0 ? void 0 : current.target) === (previous === null || previous === void 0 ? void 0 : previous.target) && (current === null || current === void 0 ? void 0 : current.layout.height) !== (previous === null || previous === void 0 ? void 0 : previous.layout.height)) {
181
195
  const prevLayout = layout.value;
@@ -185,17 +199,24 @@ const KeyboardAwareScrollView = _ref => {
185
199
  }
186
200
  }, []);
187
201
  const view = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
188
- paddingBottom: currentKeyboardFrameHeight.value
202
+ // animations become laggy when scrolling to the end of the `ScrollView` (when the last input is focused)
203
+ // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
204
+ // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
205
+ // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout
206
+ // re-calculation on every animation frame and it helps to achieve smooth animation.
207
+ // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
208
+ paddingBottom: currentKeyboardFrameHeight.value + 1
189
209
  }), []);
190
210
  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({
191
- ref: scrollViewAnimatedRef
211
+ ref: onRef
192
212
  }, rest, {
193
- onScroll: onScroll,
213
+ // @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
214
+ onScrollReanimated: onScroll,
194
215
  scrollEventThrottle: 16
195
216
  }), children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
196
217
  style: view
197
218
  }));
198
- };
219
+ });
199
220
  var _default = KeyboardAwareScrollView;
200
221
  exports.default = _default;
201
222
  //# sourceMappingURL=index.js.map
@@ -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","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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"}
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","forwardRef","_ref","ref","children","bottomOffset","disableScrollOnKeyboardHide","rest","scrollViewAnimatedRef","useAnimatedRef","scrollPosition","useSharedValue","position","currentKeyboardFrameHeight","keyboardHeight","keyboardWillAppear","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","useReanimatedFocusedInput","layout","height","useWindowDimensions","onScroll","useAnimatedScrollHandler","e","value","contentOffset","y","onRef","useCallback","assignedRef","current","maybeScroll","_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","keyboardWillHide","focusWasChanged","onMove","onEnd","useAnimatedReaction","previous","view","useAnimatedStyle","paddingBottom","createElement","ScrollView","onScrollReanimated","scrollEventThrottle","View","style","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, 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 { ScrollView, ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */\n bottomOffset?: number;\n /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */\n disableScrollOnKeyboardHide?: boolean;\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 = forwardRef<\n ScrollView,\n React.PropsWithChildren<KeyboardAwareScrollViewProps>\n>(\n (\n {\n children,\n bottomOffset = 0,\n disableScrollOnKeyboardHide = false,\n ...rest\n },\n ref,\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 keyboardWillAppear = useSharedValue(false);\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 const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {\n if (typeof ref === \"function\") {\n ref(assignedRef);\n } else if (ref) {\n ref.current = assignedRef;\n }\n\n scrollViewAnimatedRef(assignedRef);\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 keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) ||\n 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 (\n keyboardWillAppear.value ||\n keyboardWillChangeSize ||\n focusWasChanged\n ) {\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.value) {\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 // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens\n if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {\n maybeScroll(e.height);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll, disableScrollOnKeyboardHide],\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 // animations become laggy when scrolling to the end of the `ScrollView` (when the last input is focused)\n // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding\n // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation\n // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout\n // re-calculation on every animation frame and it helps to achieve smooth animation.\n // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342\n paddingBottom: currentKeyboardFrameHeight.value + 1,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={onRef}\n {...rest}\n // @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events\n onScrollReanimated={onScroll}\n scrollEventThrottle={16}\n >\n {children}\n <Reanimated.View style={view} />\n </Reanimated.ScrollView>\n );\n },\n);\n\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
@@ -24,16 +24,19 @@ const TELEGRAM_ANDROID_TIMING_CONFIG = {
24
24
  */
25
25
  const useSmoothKeyboardHandler = (handler, deps) => {
26
26
  const target = (0, _reactNativeReanimated.useSharedValue)(-1);
27
+ const height = (0, _reactNativeReanimated.useSharedValue)(0);
27
28
  const persistedHeight = (0, _reactNativeReanimated.useSharedValue)(0);
28
29
  const animatedKeyboardHeight = (0, _reactNativeReanimated.useSharedValue)(0);
29
30
  (0, _reactNativeReanimated.useAnimatedReaction)(() => {
30
31
  if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
31
32
  return;
32
33
  }
34
+ if (persistedHeight.value === 0) {
35
+ return;
36
+ }
33
37
  const event = {
34
- // it'll be always 250, since we're running animation via `withTiming` where
35
- // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms
36
- duration: 250,
38
+ // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`
39
+ duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,
37
40
  target: target.value,
38
41
  height: animatedKeyboardHeight.value,
39
42
  progress: animatedKeyboardHeight.value / persistedHeight.value
@@ -47,9 +50,10 @@ const useSmoothKeyboardHandler = (handler, deps) => {
47
50
  (_handler$onMove = handler.onMove) === null || _handler$onMove === void 0 ? void 0 : _handler$onMove.call(handler, evt);
48
51
 
49
52
  // dispatch `onEnd`
50
- if (evt.height === persistedHeight.value) {
53
+ if (evt.height === height.value) {
51
54
  var _handler$onEnd;
52
55
  (_handler$onEnd = handler.onEnd) === null || _handler$onEnd === void 0 ? void 0 : _handler$onEnd.call(handler, evt);
56
+ persistedHeight.value = height.value;
53
57
  }
54
58
  }, [handler]);
55
59
  (0, _reactNativeKeyboardController.useKeyboardHandler)({
@@ -66,6 +70,7 @@ const useSmoothKeyboardHandler = (handler, deps) => {
66
70
  return;
67
71
  }
68
72
  target.value = e.target;
73
+ height.value = e.height;
69
74
  if (e.height > 0) {
70
75
  persistedHeight.value = e.height;
71
76
  }
@@ -75,7 +80,10 @@ const useSmoothKeyboardHandler = (handler, deps) => {
75
80
  if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
76
81
  animatedKeyboardHeight.value = (0, _reactNativeReanimated.withTiming)(e.height, TELEGRAM_ANDROID_TIMING_CONFIG);
77
82
  }
78
- (_handler$onStart2 = handler.onStart) === null || _handler$onStart2 === void 0 ? void 0 : _handler$onStart2.call(handler, e);
83
+ (_handler$onStart2 = handler.onStart) === null || _handler$onStart2 === void 0 ? void 0 : _handler$onStart2.call(handler, {
84
+ ...e,
85
+ duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS ? e.duration : TELEGRAM_ANDROID_TIMING_CONFIG.duration
86
+ });
79
87
  },
80
88
  onMove: e => {
81
89
  "worklet";
@@ -92,7 +100,6 @@ const useSmoothKeyboardHandler = (handler, deps) => {
92
100
  var _handler$onEnd3;
93
101
  (_handler$onEnd3 = handler.onEnd) === null || _handler$onEnd3 === void 0 ? void 0 : _handler$onEnd3.call(handler, e);
94
102
  }
95
- persistedHeight.value = e.height;
96
103
  }
97
104
  }, deps);
98
105
  };
@@ -1 +1 @@
1
- {"version":3,"names":["_reactNative","require","_reactNativeReanimated","_reactNativeKeyboardController","IS_ANDROID_ELEVEN_OR_HIGHER","Platform","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","Easing","bezier","useSmoothKeyboardHandler","handler","deps","target","useSharedValue","persistedHeight","animatedKeyboardHeight","useAnimatedReaction","event","value","height","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","useKeyboardHandler","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","withTiming","_handler$onMove2","_handler$onEnd3","exports"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n const event = {\n // it'll be always 250, since we're running animation via `withTiming` where\n // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms\n duration: 250,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === persistedHeight.value) {\n handler.onEnd?.(evt);\n }\n },\n [handler],\n );\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n // immediately dispatch onStart/onEnd events if onStart dispatched with the same height\n // and don't wait for animation 250ms\n if (\n !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&\n e.height === persistedHeight.value\n ) {\n handler.onStart?.(e);\n handler.onEnd?.(e);\n\n return;\n }\n\n target.value = e.target;\n\n if (e.height > 0) {\n persistedHeight.value = e.height;\n }\n // if we are running on Android < 9, then we are using custom interpolation\n // to achieve smoother animation and use `animatedKeyboardHeight` as animation\n // driver\n if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n animatedKeyboardHeight.value = withTiming(\n e.height,\n TELEGRAM_ANDROID_TIMING_CONFIG,\n );\n }\n\n handler.onStart?.(e);\n },\n onMove: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onMove?.(e);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onEnd?.(e);\n }\n\n persistedHeight.value = e.height;\n },\n },\n deps,\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["_reactNative","require","_reactNativeReanimated","_reactNativeKeyboardController","IS_ANDROID_ELEVEN_OR_HIGHER","Platform","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","Easing","bezier","useSmoothKeyboardHandler","handler","deps","target","useSharedValue","height","persistedHeight","animatedKeyboardHeight","useAnimatedReaction","value","event","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","useKeyboardHandler","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","withTiming","_handler$onMove2","_handler$onEnd3","exports"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const height = useSharedValue(0);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n if (persistedHeight.value === 0) {\n return;\n }\n const event = {\n // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`\n duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === height.value) {\n handler.onEnd?.(evt);\n persistedHeight.value = height.value;\n }\n },\n [handler],\n );\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n // immediately dispatch onStart/onEnd events if onStart dispatched with the same height\n // and don't wait for animation 250ms\n if (\n !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&\n e.height === persistedHeight.value\n ) {\n handler.onStart?.(e);\n handler.onEnd?.(e);\n\n return;\n }\n\n target.value = e.target;\n height.value = e.height;\n\n if (e.height > 0) {\n persistedHeight.value = e.height;\n }\n // if we are running on Android < 9, then we are using custom interpolation\n // to achieve smoother animation and use `animatedKeyboardHeight` as animation\n // driver\n if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n animatedKeyboardHeight.value = withTiming(\n e.height,\n TELEGRAM_ANDROID_TIMING_CONFIG,\n );\n }\n\n handler.onStart?.({\n ...e,\n duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS\n ? e.duration\n : TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n });\n },\n onMove: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onMove?.(e);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onEnd?.(e);\n }\n },\n },\n deps,\n );\n};\n"],"mappings":"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"}
@@ -1,11 +1,11 @@
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
- import React, { useCallback, useMemo } from "react";
2
+ import React, { forwardRef, useCallback, useMemo } from "react";
3
3
  import { useWindowDimensions } from "react-native";
4
4
  import Reanimated, { interpolate, scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
5
5
  import { useFocusedInputHandler, useReanimatedFocusedInput } from "react-native-keyboard-controller";
6
6
  import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
7
7
  import { debounce } from "./utils";
8
- /**
8
+ /*
9
9
  * Everything begins from `onStart` handler. This handler is called every time,
10
10
  * when keyboard changes its size or when focused `TextInput` was changed. In
11
11
  * this handler we are calculating/memoizing values which later will be used
@@ -43,10 +43,11 @@ import { debounce } from "./utils";
43
43
  * +============================+ +============================+ +=====================================+
44
44
  *
45
45
  */
46
- const KeyboardAwareScrollView = _ref => {
46
+ const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((_ref, ref) => {
47
47
  let {
48
48
  children,
49
49
  bottomOffset = 0,
50
+ disableScrollOnKeyboardHide = false,
50
51
  ...rest
51
52
  } = _ref;
52
53
  const scrollViewAnimatedRef = useAnimatedRef();
@@ -54,6 +55,7 @@ const KeyboardAwareScrollView = _ref => {
54
55
  const position = useSharedValue(0);
55
56
  const currentKeyboardFrameHeight = useSharedValue(0);
56
57
  const keyboardHeight = useSharedValue(0);
58
+ const keyboardWillAppear = useSharedValue(false);
57
59
  const tag = useSharedValue(-1);
58
60
  const initialKeyboardSize = useSharedValue(0);
59
61
  const scrollBeforeKeyboardMovement = useSharedValue(0);
@@ -69,6 +71,14 @@ const KeyboardAwareScrollView = _ref => {
69
71
  position.value = e.contentOffset.y;
70
72
  }
71
73
  }, []);
74
+ const onRef = useCallback(assignedRef => {
75
+ if (typeof ref === "function") {
76
+ ref(assignedRef);
77
+ } else if (ref) {
78
+ ref.current = assignedRef;
79
+ }
80
+ scrollViewAnimatedRef(assignedRef);
81
+ }, []);
72
82
 
73
83
  /**
74
84
  * Function that will scroll a ScrollView as keyboard gets moving
@@ -121,7 +131,7 @@ const KeyboardAwareScrollView = _ref => {
121
131
  "worklet";
122
132
 
123
133
  const keyboardWillChangeSize = keyboardHeight.value !== e.height && e.height > 0;
124
- const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;
134
+ keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
125
135
  const keyboardWillHide = e.height === 0;
126
136
  const focusWasChanged = tag.value !== e.target && e.target !== -1 || keyboardWillChangeSize;
127
137
  if (keyboardWillChangeSize) {
@@ -132,7 +142,7 @@ const KeyboardAwareScrollView = _ref => {
132
142
  initialKeyboardSize.value = 0;
133
143
  scrollPosition.value = scrollBeforeKeyboardMovement.value;
134
144
  }
135
- if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {
145
+ if (keyboardWillAppear.value || keyboardWillChangeSize || focusWasChanged) {
136
146
  // persist scroll value
137
147
  scrollPosition.value = position.value;
138
148
  // just persist height - later will be used in interpolation
@@ -149,7 +159,7 @@ const KeyboardAwareScrollView = _ref => {
149
159
  // this value to achieve smooth hide effect
150
160
  scrollBeforeKeyboardMovement.value = position.value;
151
161
  }
152
- if (focusWasChanged && !keyboardWillAppear) {
162
+ if (focusWasChanged && !keyboardWillAppear.value) {
153
163
  // update position on scroll value, so `onEnd` handler
154
164
  // will pick up correct values
155
165
  position.value += maybeScroll(e.height, true);
@@ -159,7 +169,11 @@ const KeyboardAwareScrollView = _ref => {
159
169
  "worklet";
160
170
 
161
171
  currentKeyboardFrameHeight.value = e.height;
162
- maybeScroll(e.height);
172
+
173
+ // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
174
+ if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
175
+ maybeScroll(e.height);
176
+ }
163
177
  },
164
178
  onEnd: e => {
165
179
  "worklet";
@@ -167,7 +181,7 @@ const KeyboardAwareScrollView = _ref => {
167
181
  keyboardHeight.value = e.height;
168
182
  scrollPosition.value = position.value;
169
183
  }
170
- }, [height, maybeScroll]);
184
+ }, [height, maybeScroll, disableScrollOnKeyboardHide]);
171
185
  useAnimatedReaction(() => input.value, (current, previous) => {
172
186
  if ((current === null || current === void 0 ? void 0 : current.target) === (previous === null || previous === void 0 ? void 0 : previous.target) && (current === null || current === void 0 ? void 0 : current.layout.height) !== (previous === null || previous === void 0 ? void 0 : previous.layout.height)) {
173
187
  const prevLayout = layout.value;
@@ -177,16 +191,23 @@ const KeyboardAwareScrollView = _ref => {
177
191
  }
178
192
  }, []);
179
193
  const view = useAnimatedStyle(() => ({
180
- paddingBottom: currentKeyboardFrameHeight.value
194
+ // animations become laggy when scrolling to the end of the `ScrollView` (when the last input is focused)
195
+ // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
196
+ // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
197
+ // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout
198
+ // re-calculation on every animation frame and it helps to achieve smooth animation.
199
+ // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
200
+ paddingBottom: currentKeyboardFrameHeight.value + 1
181
201
  }), []);
182
202
  return /*#__PURE__*/React.createElement(Reanimated.ScrollView, _extends({
183
- ref: scrollViewAnimatedRef
203
+ ref: onRef
184
204
  }, rest, {
185
- onScroll: onScroll,
205
+ // @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
206
+ onScrollReanimated: onScroll,
186
207
  scrollEventThrottle: 16
187
208
  }), children, /*#__PURE__*/React.createElement(Reanimated.View, {
188
209
  style: view
189
210
  }));
190
- };
211
+ });
191
212
  export default KeyboardAwareScrollView;
192
213
  //# 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","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
+ {"version":3,"names":["React","forwardRef","useCallback","useMemo","useWindowDimensions","Reanimated","interpolate","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useFocusedInputHandler","useReanimatedFocusedInput","useSmoothKeyboardHandler","debounce","KeyboardAwareScrollView","_ref","ref","children","bottomOffset","disableScrollOnKeyboardHide","rest","scrollViewAnimatedRef","scrollPosition","position","currentKeyboardFrameHeight","keyboardHeight","keyboardWillAppear","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","layout","height","onScroll","e","value","contentOffset","y","onRef","assignedRef","current","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","keyboardWillHide","focusWasChanged","target","onMove","onEnd","previous","view","paddingBottom","createElement","ScrollView","_extends","onScrollReanimated","scrollEventThrottle","View","style"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, 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 { ScrollView, ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */\n bottomOffset?: number;\n /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */\n disableScrollOnKeyboardHide?: boolean;\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 = forwardRef<\n ScrollView,\n React.PropsWithChildren<KeyboardAwareScrollViewProps>\n>(\n (\n {\n children,\n bottomOffset = 0,\n disableScrollOnKeyboardHide = false,\n ...rest\n },\n ref,\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 keyboardWillAppear = useSharedValue(false);\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 const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {\n if (typeof ref === \"function\") {\n ref(assignedRef);\n } else if (ref) {\n ref.current = assignedRef;\n }\n\n scrollViewAnimatedRef(assignedRef);\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 keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) ||\n 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 (\n keyboardWillAppear.value ||\n keyboardWillChangeSize ||\n focusWasChanged\n ) {\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.value) {\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 // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens\n if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {\n maybeScroll(e.height);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll, disableScrollOnKeyboardHide],\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 // animations become laggy when scrolling to the end of the `ScrollView` (when the last input is focused)\n // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding\n // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation\n // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout\n // re-calculation on every animation frame and it helps to achieve smooth animation.\n // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342\n paddingBottom: currentKeyboardFrameHeight.value + 1,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={onRef}\n {...rest}\n // @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events\n onScrollReanimated={onScroll}\n scrollEventThrottle={16}\n >\n {children}\n <Reanimated.View style={view} />\n </Reanimated.ScrollView>\n );\n },\n);\n\nexport default KeyboardAwareScrollView;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC/D,SAASC,mBAAmB,QAAQ,cAAc;AAClD,OAAOC,UAAU,IACfC,WAAW,EACXC,QAAQ,EACRC,mBAAmB,EACnBC,cAAc,EACdC,wBAAwB,EACxBC,gBAAgB,EAChBC,cAAc,QACT,yBAAyB;AAEhC,SACEC,sBAAsB,EACtBC,yBAAyB,QACpB,kCAAkC;AAEzC,SAASC,wBAAwB,QAAQ,4BAA4B;AACrE,SAASC,QAAQ,QAAQ,SAAS;AAYlC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,uBAAuB,gBAAGhB,UAAU,CAIxC,CAAAiB,IAAA,EAOEC,GAAG,KACA;EAAA,IAPH;IACEC,QAAQ;IACRC,YAAY,GAAG,CAAC;IAChBC,2BAA2B,GAAG,KAAK;IACnC,GAAGC;EACL,CAAC,GAAAL,IAAA;EAGD,MAAMM,qBAAqB,GAAGf,cAAc,CAAwB,CAAC;EACrE,MAAMgB,cAAc,GAAGb,cAAc,CAAC,CAAC,CAAC;EACxC,MAAMc,QAAQ,GAAGd,cAAc,CAAC,CAAC,CAAC;EAClC,MAAMe,0BAA0B,GAAGf,cAAc,CAAC,CAAC,CAAC;EACpD,MAAMgB,cAAc,GAAGhB,cAAc,CAAC,CAAC,CAAC;EACxC,MAAMiB,kBAAkB,GAAGjB,cAAc,CAAC,KAAK,CAAC;EAChD,MAAMkB,GAAG,GAAGlB,cAAc,CAAC,CAAC,CAAC,CAAC;EAC9B,MAAMmB,mBAAmB,GAAGnB,cAAc,CAAC,CAAC,CAAC;EAC7C,MAAMoB,4BAA4B,GAAGpB,cAAc,CAAC,CAAC,CAAC;EACtD,MAAM;IAAEqB;EAAM,CAAC,GAAGnB,yBAAyB,CAAC,CAAC;EAC7C,MAAMoB,MAAM,GAAGtB,cAAc,CAAwC,IAAI,CAAC;EAE1E,MAAM;IAAEuB;EAAO,CAAC,GAAG/B,mBAAmB,CAAC,CAAC;EAExC,MAAMgC,QAAQ,GAAG1B,wBAAwB,CACvC;IACE0B,QAAQ,EAAGC,CAAC,IAAK;MACfX,QAAQ,CAACY,KAAK,GAAGD,CAAC,CAACE,aAAa,CAACC,CAAC;IACpC;EACF,CAAC,EACD,EACF,CAAC;EAED,MAAMC,KAAK,GAAGvC,WAAW,CAAEwC,WAAkC,IAAK;IAChE,IAAI,OAAOvB,GAAG,KAAK,UAAU,EAAE;MAC7BA,GAAG,CAACuB,WAAW,CAAC;IAClB,CAAC,MAAM,IAAIvB,GAAG,EAAE;MACdA,GAAG,CAACwB,OAAO,GAAGD,WAAW;IAC3B;IAEAlB,qBAAqB,CAACkB,WAAW,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACI,MAAME,WAAW,GAAG1C,WAAW,CAC7B,UAACmC,CAAS,EAAgC;IACxC,SAAS;;IAAC,IAAAQ,aAAA,EAAAC,cAAA;IAAA,IADAC,QAAiB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;IAGnC,MAAMG,WAAW,GAAGhB,MAAM,GAAGP,cAAc,CAACU,KAAK;IACjD,MAAMc,SAAS,GAAG,EAAAP,aAAA,GAAAX,MAAM,CAACI,KAAK,cAAAO,aAAA,uBAAZA,aAAA,CAAcX,MAAM,CAACkB,SAAS,KAAI,CAAC;IACrD,MAAMC,WAAW,GAAG,EAAAP,cAAA,GAAAZ,MAAM,CAACI,KAAK,cAAAQ,cAAA,uBAAZA,cAAA,CAAcZ,MAAM,CAACC,MAAM,KAAI,CAAC;IACpD,MAAMmB,KAAK,GAAGF,SAAS,GAAGC,WAAW;IAErC,IAAIF,WAAW,GAAGG,KAAK,IAAIjC,YAAY,EAAE;MACvC,MAAMkC,oBAAoB,GAAGjD,WAAW,CACtC+B,CAAC,EACD,CAACN,mBAAmB,CAACO,KAAK,EAAEV,cAAc,CAACU,KAAK,CAAC,EACjD,CAAC,CAAC,EAAEV,cAAc,CAACU,KAAK,IAAIH,MAAM,GAAGmB,KAAK,CAAC,GAAGjC,YAAY,CAC5D,CAAC;MACD,MAAMmC,aAAa,GACjBC,IAAI,CAACC,GAAG,CAACH,oBAAoB,EAAE,CAAC,CAAC,GAAG9B,cAAc,CAACa,KAAK;MAC1D/B,QAAQ,CAACiB,qBAAqB,EAAE,CAAC,EAAEgC,aAAa,EAAET,QAAQ,CAAC;MAE3D,OAAOQ,oBAAoB;IAC7B;IAEA,IAAIH,SAAS,GAAG,CAAC,EAAE;MACjB,MAAMO,gBAAgB,GAAGR,WAAW,GAAGE,WAAW,GAAGhC,YAAY;MACjE,MAAMuC,WAAW,GAAGnC,cAAc,CAACa,KAAK,GAAGc,SAAS;MAEpD7C,QAAQ,CACNiB,qBAAqB,EACrB,CAAC,EACDoC,WAAW,GAAGD,gBAAgB,EAC9BZ,QACF,CAAC;IACH;IAEA,OAAO,CAAC;EACV,CAAC,EACD,CAAC1B,YAAY,CACf,CAAC;EAED,MAAMwC,YAAY,GAAG3D,WAAW,CAAC,MAAM;IACrC,SAAS;;IAET;IACA;IAAA,IAAA4D,cAAA,EAAAC,YAAA;IACA,IAAI,EAAAD,cAAA,GAAA5B,MAAM,CAACI,KAAK,cAAAwB,cAAA,uBAAZA,cAAA,CAAc5B,MAAM,CAACC,MAAM,QAAA4B,YAAA,GAAK9B,KAAK,CAACK,KAAK,cAAAyB,YAAA,uBAAXA,YAAA,CAAa7B,MAAM,CAACC,MAAM,GAAE;MAC9D;IACF;IAEA,MAAM6B,kBAAkB,GAAGvC,cAAc,CAACa,KAAK;IAC/C,MAAM2B,UAAU,GAAG/B,MAAM,CAACI,KAAK;IAE/Bb,cAAc,CAACa,KAAK,GAAGZ,QAAQ,CAACY,KAAK;IACrCJ,MAAM,CAACI,KAAK,GAAGL,KAAK,CAACK,KAAK;IAC1BM,WAAW,CAAChB,cAAc,CAACU,KAAK,EAAE,IAAI,CAAC;IACvCb,cAAc,CAACa,KAAK,GAAG0B,kBAAkB;IACzC9B,MAAM,CAACI,KAAK,GAAG2B,UAAU;EAC3B,CAAC,EAAE,CAACrB,WAAW,CAAC,CAAC;EACjB,MAAMsB,mBAAmB,GAAG/D,OAAO,CACjC,MAAMa,QAAQ,CAAC6C,YAAY,EAAE,GAAG,CAAC,EACjC,CAACA,YAAY,CACf,CAAC;EAEDhD,sBAAsB,CACpB;IACEgD,YAAY,EAAEK;EAChB,CAAC,EACD,CAACA,mBAAmB,CACtB,CAAC;EAEDnD,wBAAwB,CACtB;IACEoD,OAAO,EAAG9B,CAAC,IAAK;MACd,SAAS;;MAET,MAAM+B,sBAAsB,GAC1BxC,cAAc,CAACU,KAAK,KAAKD,CAAC,CAACF,MAAM,IAAIE,CAAC,CAACF,MAAM,GAAG,CAAC;MACnDN,kBAAkB,CAACS,KAAK,GAAGD,CAAC,CAACF,MAAM,GAAG,CAAC,IAAIP,cAAc,CAACU,KAAK,KAAK,CAAC;MACrE,MAAM+B,gBAAgB,GAAGhC,CAAC,CAACF,MAAM,KAAK,CAAC;MACvC,MAAMmC,eAAe,GAClBxC,GAAG,CAACQ,KAAK,KAAKD,CAAC,CAACkC,MAAM,IAAIlC,CAAC,CAACkC,MAAM,KAAK,CAAC,CAAC,IAC1CH,sBAAsB;MAExB,IAAIA,sBAAsB,EAAE;QAC1BrC,mBAAmB,CAACO,KAAK,GAAGV,cAAc,CAACU,KAAK;MAClD;MAEA,IAAI+B,gBAAgB,EAAE;QACpB;QACAtC,mBAAmB,CAACO,KAAK,GAAG,CAAC;QAC7Bb,cAAc,CAACa,KAAK,GAAGN,4BAA4B,CAACM,KAAK;MAC3D;MAEA,IACET,kBAAkB,CAACS,KAAK,IACxB8B,sBAAsB,IACtBE,eAAe,EACf;QACA;QACA7C,cAAc,CAACa,KAAK,GAAGZ,QAAQ,CAACY,KAAK;QACrC;QACAV,cAAc,CAACU,KAAK,GAAGD,CAAC,CAACF,MAAM;MACjC;;MAEA;MACA,IAAImC,eAAe,EAAE;QACnBxC,GAAG,CAACQ,KAAK,GAAGD,CAAC,CAACkC,MAAM;;QAEpB;QACArC,MAAM,CAACI,KAAK,GAAGL,KAAK,CAACK,KAAK;QAC1B;QACA;QACAN,4BAA4B,CAACM,KAAK,GAAGZ,QAAQ,CAACY,KAAK;MACrD;MAEA,IAAIgC,eAAe,IAAI,CAACzC,kBAAkB,CAACS,KAAK,EAAE;QAChD;QACA;QACAZ,QAAQ,CAACY,KAAK,IAAIM,WAAW,CAACP,CAAC,CAACF,MAAM,EAAE,IAAI,CAAC;MAC/C;IACF,CAAC;IACDqC,MAAM,EAAGnC,CAAC,IAAK;MACb,SAAS;;MAETV,0BAA0B,CAACW,KAAK,GAAGD,CAAC,CAACF,MAAM;;MAE3C;MACA,IAAI,CAACb,2BAA2B,IAAIO,kBAAkB,CAACS,KAAK,EAAE;QAC5DM,WAAW,CAACP,CAAC,CAACF,MAAM,CAAC;MACvB;IACF,CAAC;IACDsC,KAAK,EAAGpC,CAAC,IAAK;MACZ,SAAS;;MAETT,cAAc,CAACU,KAAK,GAAGD,CAAC,CAACF,MAAM;MAC/BV,cAAc,CAACa,KAAK,GAAGZ,QAAQ,CAACY,KAAK;IACvC;EACF,CAAC,EACD,CAACH,MAAM,EAAES,WAAW,EAAEtB,2BAA2B,CACnD,CAAC;EAEDd,mBAAmB,CACjB,MAAMyB,KAAK,CAACK,KAAK,EACjB,CAACK,OAAO,EAAE+B,QAAQ,KAAK;IACrB,IACE,CAAA/B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE4B,MAAM,OAAKG,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEH,MAAM,KACpC,CAAA5B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAET,MAAM,CAACC,MAAM,OAAKuC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAExC,MAAM,CAACC,MAAM,GAClD;MACA,MAAM8B,UAAU,GAAG/B,MAAM,CAACI,KAAK;MAE/BJ,MAAM,CAACI,KAAK,GAAGL,KAAK,CAACK,KAAK;MAC1Bb,cAAc,CAACa,KAAK,IAAIM,WAAW,CAAChB,cAAc,CAACU,KAAK,EAAE,IAAI,CAAC;MAC/DJ,MAAM,CAACI,KAAK,GAAG2B,UAAU;IAC3B;EACF,CAAC,EACD,EACF,CAAC;EAED,MAAMU,IAAI,GAAGhE,gBAAgB,CAC3B,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACAiE,aAAa,EAAEjD,0BAA0B,CAACW,KAAK,GAAG;EACpD,CAAC,CAAC,EACF,EACF,CAAC;EAED,oBACEtC,KAAA,CAAA6E,aAAA,CAACxE,UAAU,CAACyE,UAAU,EAAAC,QAAA;IACpB5D,GAAG,EAAEsB;EAAM,GACPlB,IAAI;IACR;IACAyD,kBAAkB,EAAE5C,QAAS;IAC7B6C,mBAAmB,EAAE;EAAG,IAEvB7D,QAAQ,eACTpB,KAAA,CAAA6E,aAAA,CAACxE,UAAU,CAAC6E,IAAI;IAACC,KAAK,EAAER;EAAK,CAAE,CACV,CAAC;AAE5B,CACF,CAAC;AAED,eAAe1D,uBAAuB"}
@@ -18,16 +18,19 @@ const TELEGRAM_ANDROID_TIMING_CONFIG = {
18
18
  */
19
19
  export const useSmoothKeyboardHandler = (handler, deps) => {
20
20
  const target = useSharedValue(-1);
21
+ const height = useSharedValue(0);
21
22
  const persistedHeight = useSharedValue(0);
22
23
  const animatedKeyboardHeight = useSharedValue(0);
23
24
  useAnimatedReaction(() => {
24
25
  if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
25
26
  return;
26
27
  }
28
+ if (persistedHeight.value === 0) {
29
+ return;
30
+ }
27
31
  const event = {
28
- // it'll be always 250, since we're running animation via `withTiming` where
29
- // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms
30
- duration: 250,
32
+ // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`
33
+ duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,
31
34
  target: target.value,
32
35
  height: animatedKeyboardHeight.value,
33
36
  progress: animatedKeyboardHeight.value / persistedHeight.value
@@ -41,9 +44,10 @@ export const useSmoothKeyboardHandler = (handler, deps) => {
41
44
  (_handler$onMove = handler.onMove) === null || _handler$onMove === void 0 ? void 0 : _handler$onMove.call(handler, evt);
42
45
 
43
46
  // dispatch `onEnd`
44
- if (evt.height === persistedHeight.value) {
47
+ if (evt.height === height.value) {
45
48
  var _handler$onEnd;
46
49
  (_handler$onEnd = handler.onEnd) === null || _handler$onEnd === void 0 ? void 0 : _handler$onEnd.call(handler, evt);
50
+ persistedHeight.value = height.value;
47
51
  }
48
52
  }, [handler]);
49
53
  useKeyboardHandler({
@@ -60,6 +64,7 @@ export const useSmoothKeyboardHandler = (handler, deps) => {
60
64
  return;
61
65
  }
62
66
  target.value = e.target;
67
+ height.value = e.height;
63
68
  if (e.height > 0) {
64
69
  persistedHeight.value = e.height;
65
70
  }
@@ -69,7 +74,10 @@ export const useSmoothKeyboardHandler = (handler, deps) => {
69
74
  if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
70
75
  animatedKeyboardHeight.value = withTiming(e.height, TELEGRAM_ANDROID_TIMING_CONFIG);
71
76
  }
72
- (_handler$onStart2 = handler.onStart) === null || _handler$onStart2 === void 0 ? void 0 : _handler$onStart2.call(handler, e);
77
+ (_handler$onStart2 = handler.onStart) === null || _handler$onStart2 === void 0 ? void 0 : _handler$onStart2.call(handler, {
78
+ ...e,
79
+ duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS ? e.duration : TELEGRAM_ANDROID_TIMING_CONFIG.duration
80
+ });
73
81
  },
74
82
  onMove: e => {
75
83
  "worklet";
@@ -86,7 +94,6 @@ export const useSmoothKeyboardHandler = (handler, deps) => {
86
94
  var _handler$onEnd3;
87
95
  (_handler$onEnd3 = handler.onEnd) === null || _handler$onEnd3 === void 0 ? void 0 : _handler$onEnd3.call(handler, e);
88
96
  }
89
- persistedHeight.value = e.height;
90
97
  }
91
98
  }, deps);
92
99
  };
@@ -1 +1 @@
1
- {"version":3,"names":["Platform","Easing","useAnimatedReaction","useSharedValue","withTiming","useKeyboardHandler","IS_ANDROID_ELEVEN_OR_HIGHER","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","bezier","useSmoothKeyboardHandler","handler","deps","target","persistedHeight","animatedKeyboardHeight","event","value","height","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","_handler$onMove2","_handler$onEnd3"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n const event = {\n // it'll be always 250, since we're running animation via `withTiming` where\n // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms\n duration: 250,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === persistedHeight.value) {\n handler.onEnd?.(evt);\n }\n },\n [handler],\n );\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n // immediately dispatch onStart/onEnd events if onStart dispatched with the same height\n // and don't wait for animation 250ms\n if (\n !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&\n e.height === persistedHeight.value\n ) {\n handler.onStart?.(e);\n handler.onEnd?.(e);\n\n return;\n }\n\n target.value = e.target;\n\n if (e.height > 0) {\n persistedHeight.value = e.height;\n }\n // if we are running on Android < 9, then we are using custom interpolation\n // to achieve smoother animation and use `animatedKeyboardHeight` as animation\n // driver\n if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n animatedKeyboardHeight.value = withTiming(\n e.height,\n TELEGRAM_ANDROID_TIMING_CONFIG,\n );\n }\n\n handler.onStart?.(e);\n },\n onMove: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onMove?.(e);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onEnd?.(e);\n }\n\n persistedHeight.value = e.height;\n },\n },\n deps,\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["Platform","Easing","useAnimatedReaction","useSharedValue","withTiming","useKeyboardHandler","IS_ANDROID_ELEVEN_OR_HIGHER","OS","Version","IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS","TELEGRAM_ANDROID_TIMING_CONFIG","duration","easing","bezier","useSmoothKeyboardHandler","handler","deps","target","height","persistedHeight","animatedKeyboardHeight","value","event","progress","evt","_handler$onMove","onMove","call","_handler$onEnd","onEnd","onStart","e","_handler$onStart2","_handler$onStart","_handler$onEnd2","_handler$onMove2","_handler$onEnd3"],"sources":["useSmoothKeyboardHandler.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n Easing,\n useAnimatedReaction,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nconst IS_ANDROID_ELEVEN_OR_HIGHER =\n Platform.OS === \"android\" && Platform.Version >= 30;\n// on these platforms keyboard transitions will be smooth\nconst IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =\n IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === \"ios\";\n// on Android Telegram is not using androidx.core values and uses custom interpolation\n// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39\n// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40\nconst TELEGRAM_ANDROID_TIMING_CONFIG = {\n duration: 250,\n easing: Easing.bezier(\n 0.19919472913616398,\n 0.010644531250000006,\n 0.27920937042459737,\n 0.91025390625,\n ),\n};\n\n/**\n * Hook that uses default transitions for iOS and Android > 11, and uses\n * custom interpolation on Android < 11 to achieve more smooth animation\n */\nexport const useSmoothKeyboardHandler: typeof useKeyboardHandler = (\n handler,\n deps,\n) => {\n const target = useSharedValue(-1);\n const height = useSharedValue(0);\n const persistedHeight = useSharedValue(0);\n const animatedKeyboardHeight = useSharedValue(0);\n\n useAnimatedReaction(\n () => {\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n return;\n }\n if (persistedHeight.value === 0) {\n return;\n }\n const event = {\n // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`\n duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n target: target.value,\n height: animatedKeyboardHeight.value,\n progress: animatedKeyboardHeight.value / persistedHeight.value,\n };\n return event;\n },\n (evt) => {\n if (!evt) {\n return;\n }\n handler.onMove?.(evt);\n\n // dispatch `onEnd`\n if (evt.height === height.value) {\n handler.onEnd?.(evt);\n persistedHeight.value = height.value;\n }\n },\n [handler],\n );\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n // immediately dispatch onStart/onEnd events if onStart dispatched with the same height\n // and don't wait for animation 250ms\n if (\n !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&\n e.height === persistedHeight.value\n ) {\n handler.onStart?.(e);\n handler.onEnd?.(e);\n\n return;\n }\n\n target.value = e.target;\n height.value = e.height;\n\n if (e.height > 0) {\n persistedHeight.value = e.height;\n }\n // if we are running on Android < 9, then we are using custom interpolation\n // to achieve smoother animation and use `animatedKeyboardHeight` as animation\n // driver\n if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n animatedKeyboardHeight.value = withTiming(\n e.height,\n TELEGRAM_ANDROID_TIMING_CONFIG,\n );\n }\n\n handler.onStart?.({\n ...e,\n duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS\n ? e.duration\n : TELEGRAM_ANDROID_TIMING_CONFIG.duration,\n });\n },\n onMove: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onMove?.(e);\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {\n handler.onEnd?.(e);\n }\n },\n },\n deps,\n );\n};\n"],"mappings":"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"}
@@ -1,45 +1,11 @@
1
- import type { FC } from "react";
2
- import type { ScrollViewProps } from "react-native";
3
- type KeyboardAwareScrollViewProps = {
4
- bottomOffset?: number;
5
- } & ScrollViewProps;
6
- /**
7
- * Everything begins from `onStart` handler. This handler is called every time,
8
- * when keyboard changes its size or when focused `TextInput` was changed. In
9
- * this handler we are calculating/memoizing values which later will be used
10
- * during layout movement. For that we calculate:
11
- * - layout of focused field (`layout`) - to understand whether there will be overlap
12
- * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation
13
- * - future keyboard height (`keyboardHeight`) - used in scroll interpolation
14
- * - current scroll position (`scrollPosition`) - used to scroll from this point
15
- *
16
- * Once we've calculated all necessary variables - we can actually start to use them.
17
- * It happens in `onMove` handler - this function simply calls `maybeScroll` with
18
- * current keyboard frame height. This functions makes the smooth transition.
19
- *
20
- * When the transition has finished we go to `onEnd` handler. In this handler
21
- * we verify, that the current field is not overlapped within a keyboard frame.
22
- * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,
23
- * however there could be some cases, when `onMove` is not called:
24
- * - on iOS when TextInput was changed - keyboard transition is instant
25
- * - on Android when TextInput was changed and keyboard size wasn't changed
26
- * So `onEnd` handler handle the case, when `onMove` wasn't triggered.
27
- *
28
- * ====================================================================================================================+
29
- * -----------------------------------------------------Flow chart-----------------------------------------------------+
30
- * ====================================================================================================================+
31
- *
32
- * +============================+ +============================+ +==================================+
33
- * + User Press on TextInput + => + Keyboard starts showing + => + As keyboard moves frame by frame + =>
34
- * + + + (run `onStart`) + + `onMove` is getting called +
35
- * +============================+ +============================+ +==================================+
36
- *
37
- *
38
- * +============================+ +============================+ +=====================================+
39
- * + Keyboard is shown and we + => + User moved focus to + => + Only `onStart`/`onEnd` maybe called +
40
- * + call `onEnd` handler + + another `TextInput` + + (without involving `onMove`) +
41
- * +============================+ +============================+ +=====================================+
42
- *
43
- */
44
- declare const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps>;
1
+ import React from "react";
2
+ import type { ScrollView, ScrollViewProps } from "react-native";
3
+ declare const KeyboardAwareScrollView: React.ForwardRefExoticComponent<{
4
+ /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
5
+ bottomOffset?: number | undefined;
6
+ /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
7
+ disableScrollOnKeyboardHide?: boolean | undefined;
8
+ } & ScrollViewProps & {
9
+ children?: React.ReactNode;
10
+ } & React.RefAttributes<ScrollView>>;
45
11
  export default KeyboardAwareScrollView;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-keyboard-controller",
3
- "version": "1.10.2",
3
+ "version": "1.10.4",
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,4 +1,4 @@
1
- import React, { useCallback, useMemo } from "react";
1
+ import React, { forwardRef, useCallback, useMemo } from "react";
2
2
  import { useWindowDimensions } from "react-native";
3
3
  import Reanimated, {
4
4
  interpolate,
@@ -18,15 +18,17 @@ import {
18
18
  import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
19
19
  import { debounce } from "./utils";
20
20
 
21
- import type { FC } from "react";
22
- import type { ScrollViewProps } from "react-native";
21
+ import type { ScrollView, ScrollViewProps } from "react-native";
23
22
  import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
24
23
 
25
24
  type KeyboardAwareScrollViewProps = {
25
+ /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
26
26
  bottomOffset?: number;
27
+ /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
28
+ disableScrollOnKeyboardHide?: boolean;
27
29
  } & ScrollViewProps;
28
30
 
29
- /**
31
+ /*
30
32
  * Everything begins from `onStart` handler. This handler is called every time,
31
33
  * when keyboard changes its size or when focused `TextInput` was changed. In
32
34
  * this handler we are calculating/memoizing values which later will be used
@@ -64,203 +66,238 @@ type KeyboardAwareScrollViewProps = {
64
66
  * +============================+ +============================+ +=====================================+
65
67
  *
66
68
  */
67
- const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
68
- children,
69
- bottomOffset = 0,
70
- ...rest
71
- }) => {
72
- const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
73
- const scrollPosition = useSharedValue(0);
74
- const position = useSharedValue(0);
75
- const currentKeyboardFrameHeight = useSharedValue(0);
76
- const keyboardHeight = useSharedValue(0);
77
- const tag = useSharedValue(-1);
78
- const initialKeyboardSize = useSharedValue(0);
79
- const scrollBeforeKeyboardMovement = useSharedValue(0);
80
- const { input } = useReanimatedFocusedInput();
81
- const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
82
-
83
- const { height } = useWindowDimensions();
84
-
85
- const onScroll = useAnimatedScrollHandler(
69
+ const KeyboardAwareScrollView = forwardRef<
70
+ ScrollView,
71
+ React.PropsWithChildren<KeyboardAwareScrollViewProps>
72
+ >(
73
+ (
86
74
  {
87
- onScroll: (e) => {
88
- position.value = e.contentOffset.y;
89
- },
75
+ children,
76
+ bottomOffset = 0,
77
+ disableScrollOnKeyboardHide = false,
78
+ ...rest
90
79
  },
91
- [],
92
- );
93
-
94
- /**
95
- * Function that will scroll a ScrollView as keyboard gets moving
96
- */
97
- const maybeScroll = useCallback(
98
- (e: number, animated: boolean = false) => {
99
- "worklet";
100
-
101
- const visibleRect = height - keyboardHeight.value;
102
- const absoluteY = layout.value?.layout.absoluteY || 0;
103
- const inputHeight = layout.value?.layout.height || 0;
104
- const point = absoluteY + inputHeight;
105
-
106
- if (visibleRect - point <= bottomOffset) {
107
- const interpolatedScrollTo = interpolate(
108
- e,
109
- [initialKeyboardSize.value, keyboardHeight.value],
110
- [0, keyboardHeight.value - (height - point) + bottomOffset],
111
- );
112
- const targetScrollY =
113
- Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
114
- scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);
115
-
116
- return interpolatedScrollTo;
117
- }
118
-
119
- if (absoluteY < 0) {
120
- const positionOnScreen = visibleRect - inputHeight - bottomOffset;
121
- const topOfScreen = scrollPosition.value + absoluteY;
122
-
123
- scrollTo(
124
- scrollViewAnimatedRef,
125
- 0,
126
- topOfScreen - positionOnScreen,
127
- animated,
128
- );
80
+ ref,
81
+ ) => {
82
+ const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
83
+ const scrollPosition = useSharedValue(0);
84
+ const position = useSharedValue(0);
85
+ const currentKeyboardFrameHeight = useSharedValue(0);
86
+ const keyboardHeight = useSharedValue(0);
87
+ const keyboardWillAppear = useSharedValue(false);
88
+ const tag = useSharedValue(-1);
89
+ const initialKeyboardSize = useSharedValue(0);
90
+ const scrollBeforeKeyboardMovement = useSharedValue(0);
91
+ const { input } = useReanimatedFocusedInput();
92
+ const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
93
+
94
+ const { height } = useWindowDimensions();
95
+
96
+ const onScroll = useAnimatedScrollHandler(
97
+ {
98
+ onScroll: (e) => {
99
+ position.value = e.contentOffset.y;
100
+ },
101
+ },
102
+ [],
103
+ );
104
+
105
+ const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {
106
+ if (typeof ref === "function") {
107
+ ref(assignedRef);
108
+ } else if (ref) {
109
+ ref.current = assignedRef;
129
110
  }
130
111
 
131
- return 0;
132
- },
133
- [bottomOffset],
134
- );
135
-
136
- const onChangeText = useCallback(() => {
137
- "worklet";
138
-
139
- // if typing a text caused layout shift, then we need to ignore this handler
140
- // because this event will be handled in `useAnimatedReaction` below
141
- if (layout.value?.layout.height !== input.value?.layout.height) {
142
- return;
143
- }
144
-
145
- const prevScrollPosition = scrollPosition.value;
146
- const prevLayout = layout.value;
147
-
148
- scrollPosition.value = position.value;
149
- layout.value = input.value;
150
- maybeScroll(keyboardHeight.value, true);
151
- scrollPosition.value = prevScrollPosition;
152
- layout.value = prevLayout;
153
- }, [maybeScroll]);
154
- const onChangeTextHandler = useMemo(
155
- () => debounce(onChangeText, 200),
156
- [onChangeText],
157
- );
158
-
159
- useFocusedInputHandler(
160
- {
161
- onChangeText: onChangeTextHandler,
162
- },
163
- [onChangeTextHandler],
164
- );
112
+ scrollViewAnimatedRef(assignedRef);
113
+ }, []);
165
114
 
166
- useSmoothKeyboardHandler(
167
- {
168
- onStart: (e) => {
115
+ /**
116
+ * Function that will scroll a ScrollView as keyboard gets moving
117
+ */
118
+ const maybeScroll = useCallback(
119
+ (e: number, animated: boolean = false) => {
169
120
  "worklet";
170
121
 
171
- const keyboardWillChangeSize =
172
- keyboardHeight.value !== e.height && e.height > 0;
173
- const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;
174
- const keyboardWillHide = e.height === 0;
175
- const focusWasChanged =
176
- (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;
177
-
178
- if (keyboardWillChangeSize) {
179
- initialKeyboardSize.value = keyboardHeight.value;
122
+ const visibleRect = height - keyboardHeight.value;
123
+ const absoluteY = layout.value?.layout.absoluteY || 0;
124
+ const inputHeight = layout.value?.layout.height || 0;
125
+ const point = absoluteY + inputHeight;
126
+
127
+ if (visibleRect - point <= bottomOffset) {
128
+ const interpolatedScrollTo = interpolate(
129
+ e,
130
+ [initialKeyboardSize.value, keyboardHeight.value],
131
+ [0, keyboardHeight.value - (height - point) + bottomOffset],
132
+ );
133
+ const targetScrollY =
134
+ Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
135
+ scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);
136
+
137
+ return interpolatedScrollTo;
180
138
  }
181
139
 
182
- if (keyboardWillHide) {
183
- // on back transition need to interpolate as [0, keyboardHeight]
184
- initialKeyboardSize.value = 0;
185
- scrollPosition.value = scrollBeforeKeyboardMovement.value;
186
- }
140
+ if (absoluteY < 0) {
141
+ const positionOnScreen = visibleRect - inputHeight - bottomOffset;
142
+ const topOfScreen = scrollPosition.value + absoluteY;
187
143
 
188
- if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {
189
- // persist scroll value
190
- scrollPosition.value = position.value;
191
- // just persist height - later will be used in interpolation
192
- keyboardHeight.value = e.height;
144
+ scrollTo(
145
+ scrollViewAnimatedRef,
146
+ 0,
147
+ topOfScreen - positionOnScreen,
148
+ animated,
149
+ );
193
150
  }
194
151
 
195
- // focus was changed
196
- if (focusWasChanged) {
197
- tag.value = e.target;
152
+ return 0;
153
+ },
154
+ [bottomOffset],
155
+ );
156
+
157
+ const onChangeText = useCallback(() => {
158
+ "worklet";
198
159
 
199
- // save position of focused text input when keyboard starts to move
200
- layout.value = input.value;
201
- // save current scroll position - when keyboard will hide we'll reuse
202
- // this value to achieve smooth hide effect
203
- scrollBeforeKeyboardMovement.value = position.value;
204
- }
160
+ // if typing a text caused layout shift, then we need to ignore this handler
161
+ // because this event will be handled in `useAnimatedReaction` below
162
+ if (layout.value?.layout.height !== input.value?.layout.height) {
163
+ return;
164
+ }
205
165
 
206
- if (focusWasChanged && !keyboardWillAppear) {
207
- // update position on scroll value, so `onEnd` handler
208
- // will pick up correct values
209
- position.value += maybeScroll(e.height, true);
210
- }
166
+ const prevScrollPosition = scrollPosition.value;
167
+ const prevLayout = layout.value;
168
+
169
+ scrollPosition.value = position.value;
170
+ layout.value = input.value;
171
+ maybeScroll(keyboardHeight.value, true);
172
+ scrollPosition.value = prevScrollPosition;
173
+ layout.value = prevLayout;
174
+ }, [maybeScroll]);
175
+ const onChangeTextHandler = useMemo(
176
+ () => debounce(onChangeText, 200),
177
+ [onChangeText],
178
+ );
179
+
180
+ useFocusedInputHandler(
181
+ {
182
+ onChangeText: onChangeTextHandler,
211
183
  },
212
- onMove: (e) => {
213
- "worklet";
214
-
215
- currentKeyboardFrameHeight.value = e.height;
184
+ [onChangeTextHandler],
185
+ );
186
+
187
+ useSmoothKeyboardHandler(
188
+ {
189
+ onStart: (e) => {
190
+ "worklet";
191
+
192
+ const keyboardWillChangeSize =
193
+ keyboardHeight.value !== e.height && e.height > 0;
194
+ keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
195
+ const keyboardWillHide = e.height === 0;
196
+ const focusWasChanged =
197
+ (tag.value !== e.target && e.target !== -1) ||
198
+ keyboardWillChangeSize;
199
+
200
+ if (keyboardWillChangeSize) {
201
+ initialKeyboardSize.value = keyboardHeight.value;
202
+ }
203
+
204
+ if (keyboardWillHide) {
205
+ // on back transition need to interpolate as [0, keyboardHeight]
206
+ initialKeyboardSize.value = 0;
207
+ scrollPosition.value = scrollBeforeKeyboardMovement.value;
208
+ }
209
+
210
+ if (
211
+ keyboardWillAppear.value ||
212
+ keyboardWillChangeSize ||
213
+ focusWasChanged
214
+ ) {
215
+ // persist scroll value
216
+ scrollPosition.value = position.value;
217
+ // just persist height - later will be used in interpolation
218
+ keyboardHeight.value = e.height;
219
+ }
220
+
221
+ // focus was changed
222
+ if (focusWasChanged) {
223
+ tag.value = e.target;
224
+
225
+ // save position of focused text input when keyboard starts to move
226
+ layout.value = input.value;
227
+ // save current scroll position - when keyboard will hide we'll reuse
228
+ // this value to achieve smooth hide effect
229
+ scrollBeforeKeyboardMovement.value = position.value;
230
+ }
231
+
232
+ if (focusWasChanged && !keyboardWillAppear.value) {
233
+ // update position on scroll value, so `onEnd` handler
234
+ // will pick up correct values
235
+ position.value += maybeScroll(e.height, true);
236
+ }
237
+ },
238
+ onMove: (e) => {
239
+ "worklet";
240
+
241
+ currentKeyboardFrameHeight.value = e.height;
242
+
243
+ // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
244
+ if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
245
+ maybeScroll(e.height);
246
+ }
247
+ },
248
+ onEnd: (e) => {
249
+ "worklet";
216
250
 
217
- maybeScroll(e.height);
251
+ keyboardHeight.value = e.height;
252
+ scrollPosition.value = position.value;
253
+ },
218
254
  },
219
- onEnd: (e) => {
220
- "worklet";
255
+ [height, maybeScroll, disableScrollOnKeyboardHide],
256
+ );
257
+
258
+ useAnimatedReaction(
259
+ () => input.value,
260
+ (current, previous) => {
261
+ if (
262
+ current?.target === previous?.target &&
263
+ current?.layout.height !== previous?.layout.height
264
+ ) {
265
+ const prevLayout = layout.value;
221
266
 
222
- keyboardHeight.value = e.height;
223
- scrollPosition.value = position.value;
267
+ layout.value = input.value;
268
+ scrollPosition.value += maybeScroll(keyboardHeight.value, true);
269
+ layout.value = prevLayout;
270
+ }
224
271
  },
225
- },
226
- [height, maybeScroll],
227
- );
228
-
229
- useAnimatedReaction(
230
- () => input.value,
231
- (current, previous) => {
232
- if (
233
- current?.target === previous?.target &&
234
- current?.layout.height !== previous?.layout.height
235
- ) {
236
- const prevLayout = layout.value;
237
-
238
- layout.value = input.value;
239
- scrollPosition.value += maybeScroll(keyboardHeight.value, true);
240
- layout.value = prevLayout;
241
- }
242
- },
243
- [],
244
- );
245
-
246
- const view = useAnimatedStyle(
247
- () => ({
248
- paddingBottom: currentKeyboardFrameHeight.value,
249
- }),
250
- [],
251
- );
252
-
253
- return (
254
- <Reanimated.ScrollView
255
- ref={scrollViewAnimatedRef}
256
- {...rest}
257
- onScroll={onScroll}
258
- scrollEventThrottle={16}
259
- >
260
- {children}
261
- <Reanimated.View style={view} />
262
- </Reanimated.ScrollView>
263
- );
264
- };
272
+ [],
273
+ );
274
+
275
+ const view = useAnimatedStyle(
276
+ () => ({
277
+ // animations become laggy when scrolling to the end of the `ScrollView` (when the last input is focused)
278
+ // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
279
+ // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
280
+ // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout
281
+ // re-calculation on every animation frame and it helps to achieve smooth animation.
282
+ // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
283
+ paddingBottom: currentKeyboardFrameHeight.value + 1,
284
+ }),
285
+ [],
286
+ );
287
+
288
+ return (
289
+ <Reanimated.ScrollView
290
+ ref={onRef}
291
+ {...rest}
292
+ // @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
293
+ onScrollReanimated={onScroll}
294
+ scrollEventThrottle={16}
295
+ >
296
+ {children}
297
+ <Reanimated.View style={view} />
298
+ </Reanimated.ScrollView>
299
+ );
300
+ },
301
+ );
265
302
 
266
303
  export default KeyboardAwareScrollView;
@@ -35,6 +35,7 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
35
35
  deps,
36
36
  ) => {
37
37
  const target = useSharedValue(-1);
38
+ const height = useSharedValue(0);
38
39
  const persistedHeight = useSharedValue(0);
39
40
  const animatedKeyboardHeight = useSharedValue(0);
40
41
 
@@ -43,10 +44,12 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
43
44
  if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
44
45
  return;
45
46
  }
47
+ if (persistedHeight.value === 0) {
48
+ return;
49
+ }
46
50
  const event = {
47
- // it'll be always 250, since we're running animation via `withTiming` where
48
- // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms
49
- duration: 250,
51
+ // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`
52
+ duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,
50
53
  target: target.value,
51
54
  height: animatedKeyboardHeight.value,
52
55
  progress: animatedKeyboardHeight.value / persistedHeight.value,
@@ -60,8 +63,9 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
60
63
  handler.onMove?.(evt);
61
64
 
62
65
  // dispatch `onEnd`
63
- if (evt.height === persistedHeight.value) {
66
+ if (evt.height === height.value) {
64
67
  handler.onEnd?.(evt);
68
+ persistedHeight.value = height.value;
65
69
  }
66
70
  },
67
71
  [handler],
@@ -85,6 +89,7 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
85
89
  }
86
90
 
87
91
  target.value = e.target;
92
+ height.value = e.height;
88
93
 
89
94
  if (e.height > 0) {
90
95
  persistedHeight.value = e.height;
@@ -99,7 +104,12 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
99
104
  );
100
105
  }
101
106
 
102
- handler.onStart?.(e);
107
+ handler.onStart?.({
108
+ ...e,
109
+ duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS
110
+ ? e.duration
111
+ : TELEGRAM_ANDROID_TIMING_CONFIG.duration,
112
+ });
103
113
  },
104
114
  onMove: (e) => {
105
115
  "worklet";
@@ -114,8 +124,6 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
114
124
  if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
115
125
  handler.onEnd?.(e);
116
126
  }
117
-
118
- persistedHeight.value = e.height;
119
127
  },
120
128
  },
121
129
  deps,