react-native-keyboard-controller 1.10.1 → 1.10.3
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.
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/EditText.kt +31 -1
- package/ios/observers/FocusedInputObserver.swift +1 -0
- package/ios/views/KeyboardControllerViewManager.swift +12 -2
- package/jest/index.js +11 -1
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js +16 -4
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/commonjs/components/KeyboardAwareScrollView/index.js +19 -10
- package/lib/commonjs/components/KeyboardAwareScrollView/index.js.map +1 -1
- package/lib/commonjs/components/KeyboardStickyView/index.js +2 -2
- package/lib/commonjs/components/KeyboardStickyView/index.js.map +1 -1
- package/lib/commonjs/components/hooks/useKeyboardInterpolation.js +9 -2
- package/lib/commonjs/components/hooks/useKeyboardInterpolation.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/hooks.js +15 -3
- package/lib/module/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/module/components/KeyboardAwareScrollView/index.js +19 -10
- package/lib/module/components/KeyboardAwareScrollView/index.js.map +1 -1
- package/lib/module/components/KeyboardStickyView/index.js +1 -1
- package/lib/module/components/KeyboardStickyView/index.js.map +1 -1
- package/lib/module/components/hooks/useKeyboardInterpolation.js +8 -1
- package/lib/module/components/hooks/useKeyboardInterpolation.js.map +1 -1
- package/lib/typescript/components/KeyboardAwareScrollView/index.d.ts +3 -38
- package/package.json +1 -1
- package/src/components/KeyboardAvoidingView/hooks.ts +14 -3
- package/src/components/KeyboardAwareScrollView/index.tsx +26 -9
- package/src/components/KeyboardStickyView/index.tsx +2 -1
- package/src/components/hooks/useKeyboardInterpolation.ts +13 -1
|
@@ -2,7 +2,10 @@ package com.reactnativekeyboardcontroller.extensions
|
|
|
2
2
|
|
|
3
3
|
import android.text.Editable
|
|
4
4
|
import android.text.TextWatcher
|
|
5
|
+
import android.util.Log
|
|
5
6
|
import android.widget.EditText
|
|
7
|
+
import com.facebook.react.views.textinput.ReactEditText
|
|
8
|
+
import java.lang.reflect.Field
|
|
6
9
|
|
|
7
10
|
/**
|
|
8
11
|
* Adds a listener that will be fired only once for each unique value.
|
|
@@ -30,7 +33,34 @@ fun EditText.addOnTextChangedListener(action: (String) -> Unit): TextWatcher {
|
|
|
30
33
|
}
|
|
31
34
|
}
|
|
32
35
|
|
|
33
|
-
addTextChangedListener(listener)
|
|
36
|
+
// we can not simply call `addTextChangedListener(listener)`, because the issue
|
|
37
|
+
// https://github.com/kirillzyusko/react-native-keyboard-controller/issues/324
|
|
38
|
+
// will be reproducible again.
|
|
39
|
+
//
|
|
40
|
+
// so here we push our listener to first position to avoid the soft crash
|
|
41
|
+
try {
|
|
42
|
+
val clazz: Class<*> = ReactEditText::class.java
|
|
43
|
+
val field: Field = clazz.getDeclaredField("mListeners")
|
|
44
|
+
field.isAccessible = true
|
|
45
|
+
val fieldValue = field[this]
|
|
46
|
+
val listeners = fieldValue as? ArrayList<*>
|
|
47
|
+
|
|
48
|
+
if (listeners != null && listeners.all { it is TextWatcher }) {
|
|
49
|
+
// fieldValue is an ArrayList<TextWatch>
|
|
50
|
+
val textWatchListeners = listeners as ArrayList<TextWatcher>
|
|
51
|
+
|
|
52
|
+
textWatchListeners.add(0, listener)
|
|
53
|
+
} else {
|
|
54
|
+
Log.w(
|
|
55
|
+
javaClass.simpleName,
|
|
56
|
+
"Can not attach listener because `fieldValue` does not belong to `ArrayList<TextWatcher>`",
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
} catch (e: ClassCastException) {
|
|
60
|
+
Log.w(javaClass.simpleName, "Can not attach listener because casting failed: ${e.message}")
|
|
61
|
+
} catch (e: NoSuchFieldException) {
|
|
62
|
+
Log.w(javaClass.simpleName, "Can not attach listener because field `mListeners` not found: ${e.message}")
|
|
63
|
+
}
|
|
34
64
|
|
|
35
65
|
return listener
|
|
36
66
|
}
|
|
@@ -39,8 +39,18 @@ class KeyboardControllerView: UIView {
|
|
|
39
39
|
self.bridge = bridge
|
|
40
40
|
eventDispatcher = bridge.eventDispatcher()
|
|
41
41
|
super.init(frame: frame)
|
|
42
|
-
inputObserver = FocusedInputObserver(
|
|
43
|
-
|
|
42
|
+
inputObserver = FocusedInputObserver(
|
|
43
|
+
onLayoutChangedHandler: { [weak self] event in self?.onLayoutChanged(event: event) },
|
|
44
|
+
onTextChangedHandler: { [weak self] text in self?.onTextChanged(text: text) }
|
|
45
|
+
)
|
|
46
|
+
keyboardObserver = KeyboardMovementObserver(
|
|
47
|
+
handler: { [weak self] event, height, progress, duration, target in
|
|
48
|
+
self?.onEvent(event: event, height: height, progress: progress, duration: duration, target: target)
|
|
49
|
+
},
|
|
50
|
+
onNotify: { [weak self] event, data in
|
|
51
|
+
self?.onNotify(event: event, data: data)
|
|
52
|
+
}
|
|
53
|
+
)
|
|
44
54
|
}
|
|
45
55
|
|
|
46
56
|
@available(*, unavailable)
|
package/jest/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Animated } from "react-native";
|
|
1
|
+
import { Animated, ScrollView, View } from "react-native";
|
|
2
2
|
|
|
3
3
|
const values = {
|
|
4
4
|
animated: {
|
|
@@ -28,13 +28,19 @@ const focusedInput = {
|
|
|
28
28
|
|
|
29
29
|
const mock = {
|
|
30
30
|
// hooks
|
|
31
|
+
/// keyboard
|
|
31
32
|
useKeyboardAnimation: jest.fn().mockReturnValue(values.animated),
|
|
32
33
|
useReanimatedKeyboardAnimation: jest.fn().mockReturnValue(values.reanimated),
|
|
33
34
|
useResizeMode: jest.fn(),
|
|
34
35
|
useGenericKeyboardHandler: jest.fn(),
|
|
35
36
|
useKeyboardHandler: jest.fn(),
|
|
37
|
+
/// input
|
|
36
38
|
useReanimatedFocusedInput: jest.fn().mockReturnValue(focusedInput),
|
|
37
39
|
useFocusedInputHandler: jest.fn(),
|
|
40
|
+
/// module
|
|
41
|
+
useKeyboardController: jest
|
|
42
|
+
.fn()
|
|
43
|
+
.mockReturnValue({ setEnabled: jest.fn(), enabled: true }),
|
|
38
44
|
// modules
|
|
39
45
|
KeyboardController: {
|
|
40
46
|
setInputMode: jest.fn(),
|
|
@@ -49,6 +55,10 @@ const mock = {
|
|
|
49
55
|
KeyboardGestureArea: "KeyboardGestureArea",
|
|
50
56
|
// providers
|
|
51
57
|
KeyboardProvider: "KeyboardProvider",
|
|
58
|
+
// components
|
|
59
|
+
KeyboardStickyView: View,
|
|
60
|
+
KeyboardAvoidingView: View,
|
|
61
|
+
KeyboardAwareScrollView: ScrollView,
|
|
52
62
|
};
|
|
53
63
|
|
|
54
64
|
module.exports = mock;
|
|
@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useKeyboardAnimation = void 0;
|
|
7
7
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
8
|
-
var
|
|
8
|
+
var _reactNativeKeyboardController = require("react-native-keyboard-controller");
|
|
9
9
|
const useKeyboardAnimation = () => {
|
|
10
10
|
const heightWhenOpened = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
11
11
|
const height = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
12
12
|
const progress = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
13
13
|
const isClosed = (0, _reactNativeReanimated.useSharedValue)(true);
|
|
14
|
-
(0,
|
|
14
|
+
(0, _reactNativeKeyboardController.useKeyboardHandler)({
|
|
15
15
|
onStart: e => {
|
|
16
16
|
"worklet";
|
|
17
17
|
|
|
@@ -30,8 +30,20 @@ const useKeyboardAnimation = () => {
|
|
|
30
30
|
"worklet";
|
|
31
31
|
|
|
32
32
|
isClosed.value = e.height === 0;
|
|
33
|
-
|
|
34
|
-
height
|
|
33
|
+
|
|
34
|
+
// `height` update happens in `onMove` handler
|
|
35
|
+
// in `onEnd` we need to update only if `onMove`
|
|
36
|
+
// wasn't called (i. e. duration === 0)
|
|
37
|
+
//
|
|
38
|
+
// we can not call this code without condition below
|
|
39
|
+
// because in some corner cases (iOS with `secureTextEntry`)
|
|
40
|
+
// `onEnd` can be emitted before `onMove` and in this case
|
|
41
|
+
// it may lead to choppy/glitchy/jumpy UI
|
|
42
|
+
// see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
|
|
43
|
+
if (e.duration === 0) {
|
|
44
|
+
progress.value = e.progress;
|
|
45
|
+
height.value = e.height;
|
|
46
|
+
}
|
|
35
47
|
}
|
|
36
48
|
}, []);
|
|
37
49
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNativeReanimated","require","
|
|
1
|
+
{"version":3,"names":["_reactNativeReanimated","require","_reactNativeKeyboardController","useKeyboardAnimation","heightWhenOpened","useSharedValue","height","progress","isClosed","useKeyboardHandler","onStart","e","value","onMove","onEnd","duration","exports"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\n isClosed.value = false;\n heightWhenOpened.value = e.height;\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n progress.value = e.progress;\n height.value = e.height;\n },\n onEnd: (e) => {\n \"worklet\";\n\n isClosed.value = e.height === 0;\n\n // `height` update happens in `onMove` handler\n // in `onEnd` we need to update only if `onMove`\n // wasn't called (i. e. duration === 0)\n //\n // we can not call this code without condition below\n // because in some corner cases (iOS with `secureTextEntry`)\n // `onEnd` can be emitted before `onMove` and in this case\n // it may lead to choppy/glitchy/jumpy UI\n // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (e.duration === 0) {\n progress.value = e.progress;\n height.value = e.height;\n }\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAEA,IAAAC,8BAAA,GAAAD,OAAA;AAEO,MAAME,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,gBAAgB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAC1C,MAAMC,MAAM,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAChC,MAAME,QAAQ,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAClC,MAAMG,QAAQ,GAAG,IAAAH,qCAAc,EAAC,IAAI,CAAC;EAErC,IAAAI,iDAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACL,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACI,KAAK,GAAG,KAAK;QACtBR,gBAAgB,CAACQ,KAAK,GAAGD,CAAC,CAACL,MAAM;MACnC;IACF,CAAC;IACDO,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETJ,QAAQ,CAACK,KAAK,GAAGD,CAAC,CAACJ,QAAQ;MAC3BD,MAAM,CAACM,KAAK,GAAGD,CAAC,CAACL,MAAM;IACzB,CAAC;IACDQ,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETH,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACL,MAAM,KAAK,CAAC;;MAE/B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,IAAIK,CAAC,CAACI,QAAQ,KAAK,CAAC,EAAE;QACpBR,QAAQ,CAACK,KAAK,GAAGD,CAAC,CAACJ,QAAQ;QAC3BD,MAAM,CAACM,KAAK,GAAGD,CAAC,CAACL,MAAM;MACzB;IACF;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEH,gBAAgB;IAAEI;EAAS,CAAC;AACzD,CAAC;AAACQ,OAAA,CAAAb,oBAAA,GAAAA,oBAAA"}
|
|
@@ -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
|
|
@@ -55,12 +55,15 @@ const KeyboardAwareScrollView = _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)();
|
|
61
62
|
const scrollPosition = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
62
63
|
const position = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
64
|
+
const currentKeyboardFrameHeight = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
63
65
|
const keyboardHeight = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
66
|
+
const keyboardWillAppear = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
64
67
|
const tag = (0, _reactNativeReanimated.useSharedValue)(-1);
|
|
65
68
|
const initialKeyboardSize = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
66
69
|
const scrollBeforeKeyboardMovement = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
@@ -128,7 +131,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
128
131
|
"worklet";
|
|
129
132
|
|
|
130
133
|
const keyboardWillChangeSize = keyboardHeight.value !== e.height && e.height > 0;
|
|
131
|
-
|
|
134
|
+
keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
|
|
132
135
|
const keyboardWillHide = e.height === 0;
|
|
133
136
|
const focusWasChanged = tag.value !== e.target && e.target !== -1 || keyboardWillChangeSize;
|
|
134
137
|
if (keyboardWillChangeSize) {
|
|
@@ -139,7 +142,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
139
142
|
initialKeyboardSize.value = 0;
|
|
140
143
|
scrollPosition.value = scrollBeforeKeyboardMovement.value;
|
|
141
144
|
}
|
|
142
|
-
if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {
|
|
145
|
+
if (keyboardWillAppear.value || keyboardWillChangeSize || focusWasChanged) {
|
|
143
146
|
// persist scroll value
|
|
144
147
|
scrollPosition.value = position.value;
|
|
145
148
|
// just persist height - later will be used in interpolation
|
|
@@ -156,7 +159,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
156
159
|
// this value to achieve smooth hide effect
|
|
157
160
|
scrollBeforeKeyboardMovement.value = position.value;
|
|
158
161
|
}
|
|
159
|
-
if (focusWasChanged && !keyboardWillAppear) {
|
|
162
|
+
if (focusWasChanged && !keyboardWillAppear.value) {
|
|
160
163
|
// update position on scroll value, so `onEnd` handler
|
|
161
164
|
// will pick up correct values
|
|
162
165
|
position.value += maybeScroll(e.height, true);
|
|
@@ -165,7 +168,12 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
165
168
|
onMove: e => {
|
|
166
169
|
"worklet";
|
|
167
170
|
|
|
168
|
-
|
|
171
|
+
currentKeyboardFrameHeight.value = 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
|
+
}
|
|
169
177
|
},
|
|
170
178
|
onEnd: e => {
|
|
171
179
|
"worklet";
|
|
@@ -173,7 +181,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
173
181
|
keyboardHeight.value = e.height;
|
|
174
182
|
scrollPosition.value = position.value;
|
|
175
183
|
}
|
|
176
|
-
}, [height, maybeScroll]);
|
|
184
|
+
}, [height, maybeScroll, disableScrollOnKeyboardHide]);
|
|
177
185
|
(0, _reactNativeReanimated.useAnimatedReaction)(() => input.value, (current, previous) => {
|
|
178
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)) {
|
|
179
187
|
const prevLayout = layout.value;
|
|
@@ -183,16 +191,17 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
183
191
|
}
|
|
184
192
|
}, []);
|
|
185
193
|
const view = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
186
|
-
paddingBottom:
|
|
194
|
+
paddingBottom: currentKeyboardFrameHeight.value
|
|
187
195
|
}), []);
|
|
188
196
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({
|
|
189
197
|
ref: scrollViewAnimatedRef
|
|
190
198
|
}, rest, {
|
|
191
|
-
|
|
199
|
+
// @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
|
|
200
|
+
onScrollReanimated: onScroll,
|
|
192
201
|
scrollEventThrottle: 16
|
|
193
|
-
}), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
202
|
+
}), children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
194
203
|
style: view
|
|
195
|
-
}
|
|
204
|
+
}));
|
|
196
205
|
};
|
|
197
206
|
var _default = KeyboardAwareScrollView;
|
|
198
207
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeKeyboardController","_useSmoothKeyboardHandler","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","KeyboardAwareScrollView","_ref","children","bottomOffset","rest","scrollViewAnimatedRef","useAnimatedRef","scrollPosition","useSharedValue","position","keyboardHeight","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","useReanimatedFocusedInput","layout","height","useWindowDimensions","onScroll","useAnimatedScrollHandler","e","value","contentOffset","y","maybeScroll","useCallback","_layout$value","_layout$value2","animated","undefined","visibleRect","absoluteY","inputHeight","point","interpolatedScrollTo","interpolate","targetScrollY","Math","max","scrollTo","positionOnScreen","topOfScreen","onChangeText","_layout$value3","_input$value","prevScrollPosition","prevLayout","onChangeTextHandler","useMemo","debounce","useFocusedInputHandler","useSmoothKeyboardHandler","onStart","keyboardWillChangeSize","keyboardWillAppear","keyboardWillHide","focusWasChanged","onMove","onEnd","useAnimatedReaction","current","previous","view","useAnimatedStyle","paddingBottom","createElement","ScrollView","ref","scrollEventThrottle","View","style","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport Reanimated, {\n interpolate,\n scrollTo,\n useAnimatedReaction,\n useAnimatedRef,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport {\n useFocusedInputHandler,\n useReanimatedFocusedInput,\n} from \"react-native-keyboard-controller\";\n\nimport { useSmoothKeyboardHandler } from \"./useSmoothKeyboardHandler\";\nimport { debounce } from \"./utils\";\n\nimport type { FC } from \"react\";\nimport type { ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n bottomOffset?: number;\n} & ScrollViewProps;\n\n/**\n * Everything begins from `onStart` handler. This handler is called every time,\n * when keyboard changes its size or when focused `TextInput` was changed. In\n * this handler we are calculating/memoizing values which later will be used\n * during layout movement. For that we calculate:\n * - layout of focused field (`layout`) - to understand whether there will be overlap\n * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation\n * - future keyboard height (`keyboardHeight`) - used in scroll interpolation\n * - current scroll position (`scrollPosition`) - used to scroll from this point\n *\n * Once we've calculated all necessary variables - we can actually start to use them.\n * It happens in `onMove` handler - this function simply calls `maybeScroll` with\n * current keyboard frame height. This functions makes the smooth transition.\n *\n * When the transition has finished we go to `onEnd` handler. In this handler\n * we verify, that the current field is not overlapped within a keyboard frame.\n * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,\n * however there could be some cases, when `onMove` is not called:\n * - on iOS when TextInput was changed - keyboard transition is instant\n * - on Android when TextInput was changed and keyboard size wasn't changed\n * So `onEnd` handler handle the case, when `onMove` wasn't triggered.\n *\n * ====================================================================================================================+\n * -----------------------------------------------------Flow chart-----------------------------------------------------+\n * ====================================================================================================================+\n *\n * +============================+ +============================+ +==================================+\n * + User Press on TextInput + => + Keyboard starts showing + => + As keyboard moves frame by frame + =>\n * + + + (run `onStart`) + + `onMove` is getting called +\n * +============================+ +============================+ +==================================+\n *\n *\n * +============================+ +============================+ +=====================================+\n * + Keyboard is shown and we + => + User moved focus to + => + Only `onStart`/`onEnd` maybe called +\n * + call `onEnd` handler + + another `TextInput` + + (without involving `onMove`) +\n * +============================+ +============================+ +=====================================+\n *\n */\nconst KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n ...rest\n}) => {\n const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();\n const scrollPosition = useSharedValue(0);\n const position = useSharedValue(0);\n const keyboardHeight = useSharedValue(0);\n const tag = useSharedValue(-1);\n const initialKeyboardSize = useSharedValue(0);\n const scrollBeforeKeyboardMovement = useSharedValue(0);\n const { input } = useReanimatedFocusedInput();\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n\n const { height } = useWindowDimensions();\n\n const onScroll = useAnimatedScrollHandler(\n {\n onScroll: (e) => {\n position.value = e.contentOffset.y;\n },\n },\n [],\n );\n\n /**\n * Function that will scroll a ScrollView as keyboard gets moving\n */\n const maybeScroll = useCallback(\n (e: number, animated: boolean = false) => {\n \"worklet\";\n\n const visibleRect = height - keyboardHeight.value;\n const absoluteY = layout.value?.layout.absoluteY || 0;\n const inputHeight = layout.value?.layout.height || 0;\n const point = absoluteY + inputHeight;\n\n if (visibleRect - point <= bottomOffset) {\n const interpolatedScrollTo = interpolate(\n e,\n [initialKeyboardSize.value, keyboardHeight.value],\n [0, keyboardHeight.value - (height - point) + bottomOffset],\n );\n const targetScrollY =\n Math.max(interpolatedScrollTo, 0) + scrollPosition.value;\n scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);\n\n return interpolatedScrollTo;\n }\n\n if (absoluteY < 0) {\n const positionOnScreen = visibleRect - inputHeight - bottomOffset;\n const topOfScreen = scrollPosition.value + absoluteY;\n\n scrollTo(\n scrollViewAnimatedRef,\n 0,\n topOfScreen - positionOnScreen,\n animated,\n );\n }\n\n return 0;\n },\n [bottomOffset],\n );\n\n const onChangeText = useCallback(() => {\n \"worklet\";\n\n // if typing a text caused layout shift, then we need to ignore this handler\n // because this event will be handled in `useAnimatedReaction` below\n if (layout.value?.layout.height !== input.value?.layout.height) {\n return;\n }\n\n const prevScrollPosition = scrollPosition.value;\n const prevLayout = layout.value;\n\n scrollPosition.value = position.value;\n layout.value = input.value;\n maybeScroll(keyboardHeight.value, true);\n scrollPosition.value = prevScrollPosition;\n layout.value = prevLayout;\n }, [maybeScroll]);\n const onChangeTextHandler = useMemo(\n () => debounce(onChangeText, 200),\n [onChangeText],\n );\n\n useFocusedInputHandler(\n {\n onChangeText: onChangeTextHandler,\n },\n [onChangeTextHandler],\n );\n\n useSmoothKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillChangeSize =\n keyboardHeight.value !== e.height && e.height > 0;\n const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;\n\n if (keyboardWillChangeSize) {\n initialKeyboardSize.value = keyboardHeight.value;\n }\n\n if (keyboardWillHide) {\n // on back transition need to interpolate as [0, keyboardHeight]\n initialKeyboardSize.value = 0;\n scrollPosition.value = scrollBeforeKeyboardMovement.value;\n }\n\n if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {\n // persist scroll value\n scrollPosition.value = position.value;\n // just persist height - later will be used in interpolation\n keyboardHeight.value = e.height;\n }\n\n // focus was changed\n if (focusWasChanged) {\n tag.value = e.target;\n\n // save position of focused text input when keyboard starts to move\n layout.value = input.value;\n // save current scroll position - when keyboard will hide we'll reuse\n // this value to achieve smooth hide effect\n scrollBeforeKeyboardMovement.value = position.value;\n }\n\n if (focusWasChanged && !keyboardWillAppear) {\n // update position on scroll value, so `onEnd` handler\n // will pick up correct values\n position.value += maybeScroll(e.height, true);\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n maybeScroll(e.height);\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll],\n );\n\n useAnimatedReaction(\n () => input.value,\n (current, previous) => {\n if (\n current?.target === previous?.target &&\n current?.layout.height !== previous?.layout.height\n ) {\n const prevLayout = layout.value;\n\n layout.value = input.value;\n scrollPosition.value += maybeScroll(keyboardHeight.value, true);\n layout.value = prevLayout;\n }\n },\n [],\n );\n\n const view = useAnimatedStyle(\n () => ({\n paddingBottom: keyboardHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\n {...rest}\n onScroll={onScroll}\n scrollEventThrottle={16}\n >\n <Reanimated.View style={view}>{children}</Reanimated.View>\n </Reanimated.ScrollView>\n );\n};\n\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeKeyboardController","_useSmoothKeyboardHandler","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","KeyboardAwareScrollView","_ref","children","bottomOffset","disableScrollOnKeyboardHide","rest","scrollViewAnimatedRef","useAnimatedRef","scrollPosition","useSharedValue","position","currentKeyboardFrameHeight","keyboardHeight","keyboardWillAppear","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","keyboardWillHide","focusWasChanged","onMove","onEnd","useAnimatedReaction","current","previous","view","useAnimatedStyle","paddingBottom","createElement","ScrollView","ref","onScrollReanimated","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 /** 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: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n disableScrollOnKeyboardHide = false,\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 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 /**\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) || 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 paddingBottom: currentKeyboardFrameHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\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\nexport default KeyboardAwareScrollView;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AAUA,IAAAG,8BAAA,GAAAH,OAAA;AAKA,IAAAI,yBAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAAmC,SAAAM,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAR,wBAAAY,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAanC;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,MAAMI,uBAAyD,GAAGC,IAAA,IAK5D;EAAA,IAL6D;IACjEC,QAAQ;IACRC,YAAY,GAAG,CAAC;IAChBC,2BAA2B,GAAG,KAAK;IACnC,GAAGC;EACL,CAAC,GAAAJ,IAAA;EACC,MAAMK,qBAAqB,GAAG,IAAAC,qCAAc,EAAwB,CAAC;EACrE,MAAMC,cAAc,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EACxC,MAAMC,QAAQ,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAClC,MAAME,0BAA0B,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EACpD,MAAMG,cAAc,GAAG,IAAAH,qCAAc,EAAC,CAAC,CAAC;EACxC,MAAMI,kBAAkB,GAAG,IAAAJ,qCAAc,EAAC,KAAK,CAAC;EAChD,MAAMK,GAAG,GAAG,IAAAL,qCAAc,EAAC,CAAC,CAAC,CAAC;EAC9B,MAAMM,mBAAmB,GAAG,IAAAN,qCAAc,EAAC,CAAC,CAAC;EAC7C,MAAMO,4BAA4B,GAAG,IAAAP,qCAAc,EAAC,CAAC,CAAC;EACtD,MAAM;IAAEQ;EAAM,CAAC,GAAG,IAAAC,wDAAyB,EAAC,CAAC;EAC7C,MAAMC,MAAM,GAAG,IAAAV,qCAAc,EAAwC,IAAI,CAAC;EAE1E,MAAM;IAAEW;EAAO,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EAExC,MAAMC,QAAQ,GAAG,IAAAC,+CAAwB,EACvC;IACED,QAAQ,EAAGE,CAAC,IAAK;MACfd,QAAQ,CAACe,KAAK,GAAGD,CAAC,CAACE,aAAa,CAACC,CAAC;IACpC;EACF,CAAC,EACD,EACF,CAAC;;EAED;AACF;AACA;EACE,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC7B,UAACL,CAAS,EAAgC;IACxC,SAAS;;IAAC,IAAAM,aAAA,EAAAC,cAAA;IAAA,IADAC,QAAiB,GAAApC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAqC,SAAA,GAAArC,SAAA,MAAG,KAAK;IAGnC,MAAMsC,WAAW,GAAGd,MAAM,GAAGR,cAAc,CAACa,KAAK;IACjD,MAAMU,SAAS,GAAG,EAAAL,aAAA,GAAAX,MAAM,CAACM,KAAK,cAAAK,aAAA,uBAAZA,aAAA,CAAcX,MAAM,CAACgB,SAAS,KAAI,CAAC;IACrD,MAAMC,WAAW,GAAG,EAAAL,cAAA,GAAAZ,MAAM,CAACM,KAAK,cAAAM,cAAA,uBAAZA,cAAA,CAAcZ,MAAM,CAACC,MAAM,KAAI,CAAC;IACpD,MAAMiB,KAAK,GAAGF,SAAS,GAAGC,WAAW;IAErC,IAAIF,WAAW,GAAGG,KAAK,IAAIlC,YAAY,EAAE;MACvC,MAAMmC,oBAAoB,GAAG,IAAAC,kCAAW,EACtCf,CAAC,EACD,CAACT,mBAAmB,CAACU,KAAK,EAAEb,cAAc,CAACa,KAAK,CAAC,EACjD,CAAC,CAAC,EAAEb,cAAc,CAACa,KAAK,IAAIL,MAAM,GAAGiB,KAAK,CAAC,GAAGlC,YAAY,CAC5D,CAAC;MACD,MAAMqC,aAAa,GACjBC,IAAI,CAACC,GAAG,CAACJ,oBAAoB,EAAE,CAAC,CAAC,GAAG9B,cAAc,CAACiB,KAAK;MAC1D,IAAAkB,+BAAQ,EAACrC,qBAAqB,EAAE,CAAC,EAAEkC,aAAa,EAAER,QAAQ,CAAC;MAE3D,OAAOM,oBAAoB;IAC7B;IAEA,IAAIH,SAAS,GAAG,CAAC,EAAE;MACjB,MAAMS,gBAAgB,GAAGV,WAAW,GAAGE,WAAW,GAAGjC,YAAY;MACjE,MAAM0C,WAAW,GAAGrC,cAAc,CAACiB,KAAK,GAAGU,SAAS;MAEpD,IAAAQ,+BAAQ,EACNrC,qBAAqB,EACrB,CAAC,EACDuC,WAAW,GAAGD,gBAAgB,EAC9BZ,QACF,CAAC;IACH;IAEA,OAAO,CAAC;EACV,CAAC,EACD,CAAC7B,YAAY,CACf,CAAC;EAED,MAAM2C,YAAY,GAAG,IAAAjB,kBAAW,EAAC,MAAM;IACrC,SAAS;;IAET;IACA;IAAA,IAAAkB,cAAA,EAAAC,YAAA;IACA,IAAI,EAAAD,cAAA,GAAA5B,MAAM,CAACM,KAAK,cAAAsB,cAAA,uBAAZA,cAAA,CAAc5B,MAAM,CAACC,MAAM,QAAA4B,YAAA,GAAK/B,KAAK,CAACQ,KAAK,cAAAuB,YAAA,uBAAXA,YAAA,CAAa7B,MAAM,CAACC,MAAM,GAAE;MAC9D;IACF;IAEA,MAAM6B,kBAAkB,GAAGzC,cAAc,CAACiB,KAAK;IAC/C,MAAMyB,UAAU,GAAG/B,MAAM,CAACM,KAAK;IAE/BjB,cAAc,CAACiB,KAAK,GAAGf,QAAQ,CAACe,KAAK;IACrCN,MAAM,CAACM,KAAK,GAAGR,KAAK,CAACQ,KAAK;IAC1BG,WAAW,CAAChB,cAAc,CAACa,KAAK,EAAE,IAAI,CAAC;IACvCjB,cAAc,CAACiB,KAAK,GAAGwB,kBAAkB;IACzC9B,MAAM,CAACM,KAAK,GAAGyB,UAAU;EAC3B,CAAC,EAAE,CAACtB,WAAW,CAAC,CAAC;EACjB,MAAMuB,mBAAmB,GAAG,IAAAC,cAAO,EACjC,MAAM,IAAAC,eAAQ,EAACP,YAAY,EAAE,GAAG,CAAC,EACjC,CAACA,YAAY,CACf,CAAC;EAED,IAAAQ,qDAAsB,EACpB;IACER,YAAY,EAAEK;EAChB,CAAC,EACD,CAACA,mBAAmB,CACtB,CAAC;EAED,IAAAI,kDAAwB,EACtB;IACEC,OAAO,EAAGhC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMiC,sBAAsB,GAC1B7C,cAAc,CAACa,KAAK,KAAKD,CAAC,CAACJ,MAAM,IAAII,CAAC,CAACJ,MAAM,GAAG,CAAC;MACnDP,kBAAkB,CAACY,KAAK,GAAGD,CAAC,CAACJ,MAAM,GAAG,CAAC,IAAIR,cAAc,CAACa,KAAK,KAAK,CAAC;MACrE,MAAMiC,gBAAgB,GAAGlC,CAAC,CAACJ,MAAM,KAAK,CAAC;MACvC,MAAMuC,eAAe,GAClB7C,GAAG,CAACW,KAAK,KAAKD,CAAC,CAAC9B,MAAM,IAAI8B,CAAC,CAAC9B,MAAM,KAAK,CAAC,CAAC,IAAK+D,sBAAsB;MAEvE,IAAIA,sBAAsB,EAAE;QAC1B1C,mBAAmB,CAACU,KAAK,GAAGb,cAAc,CAACa,KAAK;MAClD;MAEA,IAAIiC,gBAAgB,EAAE;QACpB;QACA3C,mBAAmB,CAACU,KAAK,GAAG,CAAC;QAC7BjB,cAAc,CAACiB,KAAK,GAAGT,4BAA4B,CAACS,KAAK;MAC3D;MAEA,IACEZ,kBAAkB,CAACY,KAAK,IACxBgC,sBAAsB,IACtBE,eAAe,EACf;QACA;QACAnD,cAAc,CAACiB,KAAK,GAAGf,QAAQ,CAACe,KAAK;QACrC;QACAb,cAAc,CAACa,KAAK,GAAGD,CAAC,CAACJ,MAAM;MACjC;;MAEA;MACA,IAAIuC,eAAe,EAAE;QACnB7C,GAAG,CAACW,KAAK,GAAGD,CAAC,CAAC9B,MAAM;;QAEpB;QACAyB,MAAM,CAACM,KAAK,GAAGR,KAAK,CAACQ,KAAK;QAC1B;QACA;QACAT,4BAA4B,CAACS,KAAK,GAAGf,QAAQ,CAACe,KAAK;MACrD;MAEA,IAAIkC,eAAe,IAAI,CAAC9C,kBAAkB,CAACY,KAAK,EAAE;QAChD;QACA;QACAf,QAAQ,CAACe,KAAK,IAAIG,WAAW,CAACJ,CAAC,CAACJ,MAAM,EAAE,IAAI,CAAC;MAC/C;IACF,CAAC;IACDwC,MAAM,EAAGpC,CAAC,IAAK;MACb,SAAS;;MAETb,0BAA0B,CAACc,KAAK,GAAGD,CAAC,CAACJ,MAAM;;MAE3C;MACA,IAAI,CAAChB,2BAA2B,IAAIS,kBAAkB,CAACY,KAAK,EAAE;QAC5DG,WAAW,CAACJ,CAAC,CAACJ,MAAM,CAAC;MACvB;IACF,CAAC;IACDyC,KAAK,EAAGrC,CAAC,IAAK;MACZ,SAAS;;MAETZ,cAAc,CAACa,KAAK,GAAGD,CAAC,CAACJ,MAAM;MAC/BZ,cAAc,CAACiB,KAAK,GAAGf,QAAQ,CAACe,KAAK;IACvC;EACF,CAAC,EACD,CAACL,MAAM,EAAEQ,WAAW,EAAExB,2BAA2B,CACnD,CAAC;EAED,IAAA0D,0CAAmB,EACjB,MAAM7C,KAAK,CAACQ,KAAK,EACjB,CAACsC,OAAO,EAAEC,QAAQ,KAAK;IACrB,IACE,CAAAD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAErE,MAAM,OAAKsE,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEtE,MAAM,KACpC,CAAAqE,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE5C,MAAM,CAACC,MAAM,OAAK4C,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAE7C,MAAM,CAACC,MAAM,GAClD;MACA,MAAM8B,UAAU,GAAG/B,MAAM,CAACM,KAAK;MAE/BN,MAAM,CAACM,KAAK,GAAGR,KAAK,CAACQ,KAAK;MAC1BjB,cAAc,CAACiB,KAAK,IAAIG,WAAW,CAAChB,cAAc,CAACa,KAAK,EAAE,IAAI,CAAC;MAC/DN,MAAM,CAACM,KAAK,GAAGyB,UAAU;IAC3B;EACF,CAAC,EACD,EACF,CAAC;EAED,MAAMe,IAAI,GAAG,IAAAC,uCAAgB,EAC3B,OAAO;IACLC,aAAa,EAAExD,0BAA0B,CAACc;EAC5C,CAAC,CAAC,EACF,EACF,CAAC;EAED,oBACEhE,MAAA,CAAAe,OAAA,CAAA4F,aAAA,CAACvG,sBAAA,CAAAW,OAAU,CAAC6F,UAAU,EAAA9E,QAAA;IACpB+E,GAAG,EAAEhE;EAAsB,GACvBD,IAAI;IACR;IACAkE,kBAAkB,EAAEjD,QAAS;IAC7BkD,mBAAmB,EAAE;EAAG,IAEvBtE,QAAQ,eACTzC,MAAA,CAAAe,OAAA,CAAA4F,aAAA,CAACvG,sBAAA,CAAAW,OAAU,CAACiG,IAAI;IAACC,KAAK,EAAET;EAAK,CAAE,CACV,CAAC;AAE5B,CAAC;AAAC,IAAAU,QAAA,GAEa3E,uBAAuB;AAAA4E,OAAA,CAAApG,OAAA,GAAAmG,QAAA"}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
9
|
-
var
|
|
9
|
+
var _reactNativeKeyboardController = require("react-native-keyboard-controller");
|
|
10
10
|
var _useKeyboardInterpolation = _interopRequireDefault(require("../hooks/useKeyboardInterpolation"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -24,7 +24,7 @@ const KeyboardStickyView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
24
24
|
} = _ref;
|
|
25
25
|
const {
|
|
26
26
|
height
|
|
27
|
-
} = (0,
|
|
27
|
+
} = (0, _reactNativeKeyboardController.useReanimatedKeyboardAnimation)();
|
|
28
28
|
const {
|
|
29
29
|
interpolate
|
|
30
30
|
} = (0, _useKeyboardInterpolation.default)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_reactNativeKeyboardController","_useKeyboardInterpolation","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","KeyboardStickyView","forwardRef","_ref","ref","children","offset","closed","opened","style","props","height","useReanimatedKeyboardAnimation","interpolate","useKeyboardInterpolation","stickyViewStyle","useAnimatedStyle","value","transform","translateY","styles","useMemo","createElement","View","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport Reanimated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport { useReanimatedKeyboardAnimation } from \"react-native-keyboard-controller\";\n\nimport useKeyboardInterpolation from \"../hooks/useKeyboardInterpolation\";\n\nimport type { View, ViewProps } from \"react-native\";\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref,\n ) => {\n const { height } = useReanimatedKeyboardAnimation();\n const { interpolate } = useKeyboardInterpolation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(-height.value, [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle],\n );\n\n return (\n <Reanimated.View ref={ref} style={styles} {...props}>\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":"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"}
|
|
@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
7
8
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
8
|
-
var
|
|
9
|
+
var _reactNativeKeyboardController = require("react-native-keyboard-controller");
|
|
9
10
|
/**
|
|
10
11
|
* Hook that can be used for interpolation keyboard movement. The main concern is the thing
|
|
11
12
|
* when keyboard is opened and gets resized on Android. Let's say we are interpolating from
|
|
@@ -32,10 +33,16 @@ const useKeyboardInterpolation = () => {
|
|
|
32
33
|
const interpolate = (keyboardPosition, output) => {
|
|
33
34
|
"worklet";
|
|
34
35
|
|
|
36
|
+
// on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when
|
|
37
|
+
// keyboard resized we will not have intermediate values and transition will be instant
|
|
38
|
+
// see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
|
|
39
|
+
if (_reactNative.Platform.OS === "ios") {
|
|
40
|
+
return (0, _reactNativeReanimated.interpolate)(keyboardPosition, [0, nextKeyboardHeight.value], output);
|
|
41
|
+
}
|
|
35
42
|
lastInterpolation.value = (0, _reactNativeReanimated.interpolate)(keyboardPosition, [prevKeyboardHeight.value, nextKeyboardHeight.value], shouldUseInternalInterpolation.value ? [lastInterpolation.value, output[1]] : output);
|
|
36
43
|
return lastInterpolation.value;
|
|
37
44
|
};
|
|
38
|
-
(0,
|
|
45
|
+
(0, _reactNativeKeyboardController.useKeyboardHandler)({
|
|
39
46
|
onStart: e => {
|
|
40
47
|
"worklet";
|
|
41
48
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_reactNativeKeyboardController","useKeyboardInterpolation","nextKeyboardHeight","useSharedValue","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","interpolate","keyboardPosition","output","Platform","OS","interpolateREA","value","useKeyboardHandler","onStart","e","keyboardWillBeHidden","height","onEnd","_default","exports","default"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n interpolate as interpolateREA,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n // keyboard heights\n const nextKeyboardHeight = useSharedValue(0);\n const prevKeyboardHeight = useSharedValue(0);\n // save latest interpolated position\n const lastInterpolation = useSharedValue(0);\n // boolean flag indicating which output range should be used\n const shouldUseInternalInterpolation = useSharedValue(false);\n\n const interpolate = (\n keyboardPosition: number,\n output: KeyboardInterpolationOutput,\n ) => {\n \"worklet\";\n\n // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when\n // keyboard resized we will not have intermediate values and transition will be instant\n // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (Platform.OS === \"ios\") {\n return interpolateREA(\n keyboardPosition,\n [0, nextKeyboardHeight.value],\n output,\n );\n }\n\n lastInterpolation.value = interpolateREA(\n keyboardPosition,\n [prevKeyboardHeight.value, nextKeyboardHeight.value],\n shouldUseInternalInterpolation.value\n ? [lastInterpolation.value, output[1]]\n : output,\n );\n\n return lastInterpolation.value;\n };\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillBeHidden = e.height === 0;\n\n // keyboard will be hidden\n if (keyboardWillBeHidden) {\n shouldUseInternalInterpolation.value = false;\n prevKeyboardHeight.value = 0;\n }\n\n // keyboard will change its size\n if (\n // keyboard is shown on screen\n nextKeyboardHeight.value !== 0 &&\n // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n nextKeyboardHeight.value !== e.height &&\n // keyboard is not hiding\n !keyboardWillBeHidden\n ) {\n prevKeyboardHeight.value = nextKeyboardHeight.value;\n shouldUseInternalInterpolation.value = true;\n }\n\n // keyboard will show or change size\n if (!keyboardWillBeHidden) {\n nextKeyboardHeight.value = e.height;\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n // handles case show -> resize -> hide -> show\n // here we reset value to 0 when keyboard is hidden\n nextKeyboardHeight.value = e.height;\n },\n },\n [],\n );\n\n return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAKA,IAAAE,8BAAA,GAAAF,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAC5C,MAAMC,kBAAkB,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAC5C;EACA,MAAME,iBAAiB,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAC3C;EACA,MAAMG,8BAA8B,GAAG,IAAAH,qCAAc,EAAC,KAAK,CAAC;EAE5D,MAAMI,WAAW,GAAGA,CAClBC,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAET;IACA;IACA;IACA,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;MACzB,OAAO,IAAAC,kCAAc,EACnBJ,gBAAgB,EAChB,CAAC,CAAC,EAAEN,kBAAkB,CAACW,KAAK,CAAC,EAC7BJ,MACF,CAAC;IACH;IAEAJ,iBAAiB,CAACQ,KAAK,GAAG,IAAAD,kCAAc,EACtCJ,gBAAgB,EAChB,CAACJ,kBAAkB,CAACS,KAAK,EAAEX,kBAAkB,CAACW,KAAK,CAAC,EACpDP,8BAA8B,CAACO,KAAK,GAChC,CAACR,iBAAiB,CAACQ,KAAK,EAAEJ,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IAED,OAAOJ,iBAAiB,CAACQ,KAAK;EAChC,CAAC;EAED,IAAAC,iDAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBX,8BAA8B,CAACO,KAAK,GAAG,KAAK;QAC5CT,kBAAkB,CAACS,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAX,kBAAkB,CAACW,KAAK,KAAK,CAAC;MAC9B;MACAX,kBAAkB,CAACW,KAAK,KAAKG,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAb,kBAAkB,CAACS,KAAK,GAAGX,kBAAkB,CAACW,KAAK;QACnDP,8BAA8B,CAACO,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACI,oBAAoB,EAAE;QACzBf,kBAAkB,CAACW,KAAK,GAAGG,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAd,kBAAkB,CAACW,KAAK,GAAGG,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEX;EAAY,CAAC;AACxB,CAAC;AAAC,IAAAa,QAAA,GAEanB,wBAAwB;AAAAoB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useSharedValue } from "react-native-reanimated";
|
|
2
|
-
import { useKeyboardHandler } from "
|
|
2
|
+
import { useKeyboardHandler } from "react-native-keyboard-controller";
|
|
3
3
|
export const useKeyboardAnimation = () => {
|
|
4
4
|
const heightWhenOpened = useSharedValue(0);
|
|
5
5
|
const height = useSharedValue(0);
|
|
@@ -24,8 +24,20 @@ export const useKeyboardAnimation = () => {
|
|
|
24
24
|
"worklet";
|
|
25
25
|
|
|
26
26
|
isClosed.value = e.height === 0;
|
|
27
|
-
|
|
28
|
-
height
|
|
27
|
+
|
|
28
|
+
// `height` update happens in `onMove` handler
|
|
29
|
+
// in `onEnd` we need to update only if `onMove`
|
|
30
|
+
// wasn't called (i. e. duration === 0)
|
|
31
|
+
//
|
|
32
|
+
// we can not call this code without condition below
|
|
33
|
+
// because in some corner cases (iOS with `secureTextEntry`)
|
|
34
|
+
// `onEnd` can be emitted before `onMove` and in this case
|
|
35
|
+
// it may lead to choppy/glitchy/jumpy UI
|
|
36
|
+
// see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
|
|
37
|
+
if (e.duration === 0) {
|
|
38
|
+
progress.value = e.progress;
|
|
39
|
+
height.value = e.height;
|
|
40
|
+
}
|
|
29
41
|
}
|
|
30
42
|
}, []);
|
|
31
43
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useSharedValue","useKeyboardHandler","useKeyboardAnimation","heightWhenOpened","height","progress","isClosed","onStart","e","value","onMove","onEnd"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"
|
|
1
|
+
{"version":3,"names":["useSharedValue","useKeyboardHandler","useKeyboardAnimation","heightWhenOpened","height","progress","isClosed","onStart","e","value","onMove","onEnd","duration"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\n isClosed.value = false;\n heightWhenOpened.value = e.height;\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n progress.value = e.progress;\n height.value = e.height;\n },\n onEnd: (e) => {\n \"worklet\";\n\n isClosed.value = e.height === 0;\n\n // `height` update happens in `onMove` handler\n // in `onEnd` we need to update only if `onMove`\n // wasn't called (i. e. duration === 0)\n //\n // we can not call this code without condition below\n // because in some corner cases (iOS with `secureTextEntry`)\n // `onEnd` can be emitted before `onMove` and in this case\n // it may lead to choppy/glitchy/jumpy UI\n // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (e.duration === 0) {\n progress.value = e.progress;\n height.value = e.height;\n }\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,yBAAyB;AAExD,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,gBAAgB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC1C,MAAMI,MAAM,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAChC,MAAMK,QAAQ,GAAGL,cAAc,CAAC,CAAC,CAAC;EAClC,MAAMM,QAAQ,GAAGN,cAAc,CAAC,IAAI,CAAC;EAErCC,kBAAkB,CAChB;IACEM,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACJ,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACG,KAAK,GAAG,KAAK;QACtBN,gBAAgB,CAACM,KAAK,GAAGD,CAAC,CAACJ,MAAM;MACnC;IACF,CAAC;IACDM,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETH,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACH,QAAQ;MAC3BD,MAAM,CAACK,KAAK,GAAGD,CAAC,CAACJ,MAAM;IACzB,CAAC;IACDO,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETF,QAAQ,CAACG,KAAK,GAAGD,CAAC,CAACJ,MAAM,KAAK,CAAC;;MAE/B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,IAAII,CAAC,CAACI,QAAQ,KAAK,CAAC,EAAE;QACpBP,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACH,QAAQ;QAC3BD,MAAM,CAACK,KAAK,GAAGD,CAAC,CAACJ,MAAM;MACzB;IACF;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEF,gBAAgB;IAAEG;EAAS,CAAC;AACzD,CAAC"}
|
|
@@ -5,7 +5,7 @@ import Reanimated, { interpolate, scrollTo, useAnimatedReaction, useAnimatedRef,
|
|
|
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
|
|
@@ -47,12 +47,15 @@ const KeyboardAwareScrollView = _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();
|
|
53
54
|
const scrollPosition = useSharedValue(0);
|
|
54
55
|
const position = useSharedValue(0);
|
|
56
|
+
const currentKeyboardFrameHeight = useSharedValue(0);
|
|
55
57
|
const keyboardHeight = useSharedValue(0);
|
|
58
|
+
const keyboardWillAppear = useSharedValue(false);
|
|
56
59
|
const tag = useSharedValue(-1);
|
|
57
60
|
const initialKeyboardSize = useSharedValue(0);
|
|
58
61
|
const scrollBeforeKeyboardMovement = useSharedValue(0);
|
|
@@ -120,7 +123,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
120
123
|
"worklet";
|
|
121
124
|
|
|
122
125
|
const keyboardWillChangeSize = keyboardHeight.value !== e.height && e.height > 0;
|
|
123
|
-
|
|
126
|
+
keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
|
|
124
127
|
const keyboardWillHide = e.height === 0;
|
|
125
128
|
const focusWasChanged = tag.value !== e.target && e.target !== -1 || keyboardWillChangeSize;
|
|
126
129
|
if (keyboardWillChangeSize) {
|
|
@@ -131,7 +134,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
131
134
|
initialKeyboardSize.value = 0;
|
|
132
135
|
scrollPosition.value = scrollBeforeKeyboardMovement.value;
|
|
133
136
|
}
|
|
134
|
-
if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {
|
|
137
|
+
if (keyboardWillAppear.value || keyboardWillChangeSize || focusWasChanged) {
|
|
135
138
|
// persist scroll value
|
|
136
139
|
scrollPosition.value = position.value;
|
|
137
140
|
// just persist height - later will be used in interpolation
|
|
@@ -148,7 +151,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
148
151
|
// this value to achieve smooth hide effect
|
|
149
152
|
scrollBeforeKeyboardMovement.value = position.value;
|
|
150
153
|
}
|
|
151
|
-
if (focusWasChanged && !keyboardWillAppear) {
|
|
154
|
+
if (focusWasChanged && !keyboardWillAppear.value) {
|
|
152
155
|
// update position on scroll value, so `onEnd` handler
|
|
153
156
|
// will pick up correct values
|
|
154
157
|
position.value += maybeScroll(e.height, true);
|
|
@@ -157,7 +160,12 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
157
160
|
onMove: e => {
|
|
158
161
|
"worklet";
|
|
159
162
|
|
|
160
|
-
|
|
163
|
+
currentKeyboardFrameHeight.value = e.height;
|
|
164
|
+
|
|
165
|
+
// if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
|
|
166
|
+
if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
|
|
167
|
+
maybeScroll(e.height);
|
|
168
|
+
}
|
|
161
169
|
},
|
|
162
170
|
onEnd: e => {
|
|
163
171
|
"worklet";
|
|
@@ -165,7 +173,7 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
165
173
|
keyboardHeight.value = e.height;
|
|
166
174
|
scrollPosition.value = position.value;
|
|
167
175
|
}
|
|
168
|
-
}, [height, maybeScroll]);
|
|
176
|
+
}, [height, maybeScroll, disableScrollOnKeyboardHide]);
|
|
169
177
|
useAnimatedReaction(() => input.value, (current, previous) => {
|
|
170
178
|
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)) {
|
|
171
179
|
const prevLayout = layout.value;
|
|
@@ -175,16 +183,17 @@ const KeyboardAwareScrollView = _ref => {
|
|
|
175
183
|
}
|
|
176
184
|
}, []);
|
|
177
185
|
const view = useAnimatedStyle(() => ({
|
|
178
|
-
paddingBottom:
|
|
186
|
+
paddingBottom: currentKeyboardFrameHeight.value
|
|
179
187
|
}), []);
|
|
180
188
|
return /*#__PURE__*/React.createElement(Reanimated.ScrollView, _extends({
|
|
181
189
|
ref: scrollViewAnimatedRef
|
|
182
190
|
}, rest, {
|
|
183
|
-
|
|
191
|
+
// @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
|
|
192
|
+
onScrollReanimated: onScroll,
|
|
184
193
|
scrollEventThrottle: 16
|
|
185
|
-
}), /*#__PURE__*/React.createElement(Reanimated.View, {
|
|
194
|
+
}), children, /*#__PURE__*/React.createElement(Reanimated.View, {
|
|
186
195
|
style: view
|
|
187
|
-
}
|
|
196
|
+
}));
|
|
188
197
|
};
|
|
189
198
|
export default KeyboardAwareScrollView;
|
|
190
199
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useMemo","useWindowDimensions","Reanimated","interpolate","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useFocusedInputHandler","useReanimatedFocusedInput","useSmoothKeyboardHandler","debounce","KeyboardAwareScrollView","_ref","children","bottomOffset","rest","scrollViewAnimatedRef","scrollPosition","position","keyboardHeight","tag","initialKeyboardSize","scrollBeforeKeyboardMovement","input","layout","height","onScroll","e","value","contentOffset","y","maybeScroll","_layout$value","_layout$value2","animated","arguments","length","undefined","visibleRect","absoluteY","inputHeight","point","interpolatedScrollTo","targetScrollY","Math","max","positionOnScreen","topOfScreen","onChangeText","_layout$value3","_input$value","prevScrollPosition","prevLayout","onChangeTextHandler","onStart","keyboardWillChangeSize","keyboardWillAppear","keyboardWillHide","focusWasChanged","target","onMove","onEnd","current","previous","view","paddingBottom","createElement","ScrollView","_extends","ref","scrollEventThrottle","View","style"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport Reanimated, {\n interpolate,\n scrollTo,\n useAnimatedReaction,\n useAnimatedRef,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport {\n useFocusedInputHandler,\n useReanimatedFocusedInput,\n} from \"react-native-keyboard-controller\";\n\nimport { useSmoothKeyboardHandler } from \"./useSmoothKeyboardHandler\";\nimport { debounce } from \"./utils\";\n\nimport type { FC } from \"react\";\nimport type { ScrollViewProps } from \"react-native\";\nimport type { FocusedInputLayoutChangedEvent } from \"react-native-keyboard-controller\";\n\ntype KeyboardAwareScrollViewProps = {\n bottomOffset?: number;\n} & ScrollViewProps;\n\n/**\n * Everything begins from `onStart` handler. This handler is called every time,\n * when keyboard changes its size or when focused `TextInput` was changed. In\n * this handler we are calculating/memoizing values which later will be used\n * during layout movement. For that we calculate:\n * - layout of focused field (`layout`) - to understand whether there will be overlap\n * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation\n * - future keyboard height (`keyboardHeight`) - used in scroll interpolation\n * - current scroll position (`scrollPosition`) - used to scroll from this point\n *\n * Once we've calculated all necessary variables - we can actually start to use them.\n * It happens in `onMove` handler - this function simply calls `maybeScroll` with\n * current keyboard frame height. This functions makes the smooth transition.\n *\n * When the transition has finished we go to `onEnd` handler. In this handler\n * we verify, that the current field is not overlapped within a keyboard frame.\n * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,\n * however there could be some cases, when `onMove` is not called:\n * - on iOS when TextInput was changed - keyboard transition is instant\n * - on Android when TextInput was changed and keyboard size wasn't changed\n * So `onEnd` handler handle the case, when `onMove` wasn't triggered.\n *\n * ====================================================================================================================+\n * -----------------------------------------------------Flow chart-----------------------------------------------------+\n * ====================================================================================================================+\n *\n * +============================+ +============================+ +==================================+\n * + User Press on TextInput + => + Keyboard starts showing + => + As keyboard moves frame by frame + =>\n * + + + (run `onStart`) + + `onMove` is getting called +\n * +============================+ +============================+ +==================================+\n *\n *\n * +============================+ +============================+ +=====================================+\n * + Keyboard is shown and we + => + User moved focus to + => + Only `onStart`/`onEnd` maybe called +\n * + call `onEnd` handler + + another `TextInput` + + (without involving `onMove`) +\n * +============================+ +============================+ +=====================================+\n *\n */\nconst KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n ...rest\n}) => {\n const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();\n const scrollPosition = useSharedValue(0);\n const position = useSharedValue(0);\n const keyboardHeight = useSharedValue(0);\n const tag = useSharedValue(-1);\n const initialKeyboardSize = useSharedValue(0);\n const scrollBeforeKeyboardMovement = useSharedValue(0);\n const { input } = useReanimatedFocusedInput();\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n\n const { height } = useWindowDimensions();\n\n const onScroll = useAnimatedScrollHandler(\n {\n onScroll: (e) => {\n position.value = e.contentOffset.y;\n },\n },\n [],\n );\n\n /**\n * Function that will scroll a ScrollView as keyboard gets moving\n */\n const maybeScroll = useCallback(\n (e: number, animated: boolean = false) => {\n \"worklet\";\n\n const visibleRect = height - keyboardHeight.value;\n const absoluteY = layout.value?.layout.absoluteY || 0;\n const inputHeight = layout.value?.layout.height || 0;\n const point = absoluteY + inputHeight;\n\n if (visibleRect - point <= bottomOffset) {\n const interpolatedScrollTo = interpolate(\n e,\n [initialKeyboardSize.value, keyboardHeight.value],\n [0, keyboardHeight.value - (height - point) + bottomOffset],\n );\n const targetScrollY =\n Math.max(interpolatedScrollTo, 0) + scrollPosition.value;\n scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);\n\n return interpolatedScrollTo;\n }\n\n if (absoluteY < 0) {\n const positionOnScreen = visibleRect - inputHeight - bottomOffset;\n const topOfScreen = scrollPosition.value + absoluteY;\n\n scrollTo(\n scrollViewAnimatedRef,\n 0,\n topOfScreen - positionOnScreen,\n animated,\n );\n }\n\n return 0;\n },\n [bottomOffset],\n );\n\n const onChangeText = useCallback(() => {\n \"worklet\";\n\n // if typing a text caused layout shift, then we need to ignore this handler\n // because this event will be handled in `useAnimatedReaction` below\n if (layout.value?.layout.height !== input.value?.layout.height) {\n return;\n }\n\n const prevScrollPosition = scrollPosition.value;\n const prevLayout = layout.value;\n\n scrollPosition.value = position.value;\n layout.value = input.value;\n maybeScroll(keyboardHeight.value, true);\n scrollPosition.value = prevScrollPosition;\n layout.value = prevLayout;\n }, [maybeScroll]);\n const onChangeTextHandler = useMemo(\n () => debounce(onChangeText, 200),\n [onChangeText],\n );\n\n useFocusedInputHandler(\n {\n onChangeText: onChangeTextHandler,\n },\n [onChangeTextHandler],\n );\n\n useSmoothKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillChangeSize =\n keyboardHeight.value !== e.height && e.height > 0;\n const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;\n const keyboardWillHide = e.height === 0;\n const focusWasChanged =\n (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;\n\n if (keyboardWillChangeSize) {\n initialKeyboardSize.value = keyboardHeight.value;\n }\n\n if (keyboardWillHide) {\n // on back transition need to interpolate as [0, keyboardHeight]\n initialKeyboardSize.value = 0;\n scrollPosition.value = scrollBeforeKeyboardMovement.value;\n }\n\n if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {\n // persist scroll value\n scrollPosition.value = position.value;\n // just persist height - later will be used in interpolation\n keyboardHeight.value = e.height;\n }\n\n // focus was changed\n if (focusWasChanged) {\n tag.value = e.target;\n\n // save position of focused text input when keyboard starts to move\n layout.value = input.value;\n // save current scroll position - when keyboard will hide we'll reuse\n // this value to achieve smooth hide effect\n scrollBeforeKeyboardMovement.value = position.value;\n }\n\n if (focusWasChanged && !keyboardWillAppear) {\n // update position on scroll value, so `onEnd` handler\n // will pick up correct values\n position.value += maybeScroll(e.height, true);\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n maybeScroll(e.height);\n },\n onEnd: (e) => {\n \"worklet\";\n\n keyboardHeight.value = e.height;\n scrollPosition.value = position.value;\n },\n },\n [height, maybeScroll],\n );\n\n useAnimatedReaction(\n () => input.value,\n (current, previous) => {\n if (\n current?.target === previous?.target &&\n current?.layout.height !== previous?.layout.height\n ) {\n const prevLayout = layout.value;\n\n layout.value = input.value;\n scrollPosition.value += maybeScroll(keyboardHeight.value, true);\n layout.value = prevLayout;\n }\n },\n [],\n );\n\n const view = useAnimatedStyle(\n () => ({\n paddingBottom: keyboardHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\n {...rest}\n onScroll={onScroll}\n scrollEventThrottle={16}\n >\n <Reanimated.View style={view}>{children}</Reanimated.View>\n </Reanimated.ScrollView>\n );\n};\n\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","useWindowDimensions","Reanimated","interpolate","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useFocusedInputHandler","useReanimatedFocusedInput","useSmoothKeyboardHandler","debounce","KeyboardAwareScrollView","_ref","children","bottomOffset","disableScrollOnKeyboardHide","rest","scrollViewAnimatedRef","scrollPosition","position","currentKeyboardFrameHeight","keyboardHeight","keyboardWillAppear","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","keyboardWillHide","focusWasChanged","target","onMove","onEnd","current","previous","view","paddingBottom","createElement","ScrollView","_extends","ref","onScrollReanimated","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 /** 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: FC<KeyboardAwareScrollViewProps> = ({\n children,\n bottomOffset = 0,\n disableScrollOnKeyboardHide = false,\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 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 /**\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) || 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 paddingBottom: currentKeyboardFrameHeight.value,\n }),\n [],\n );\n\n return (\n <Reanimated.ScrollView\n ref={scrollViewAnimatedRef}\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\nexport default KeyboardAwareScrollView;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
import React, { forwardRef, useMemo } from "react";
|
|
3
3
|
import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
|
|
4
|
-
import { useReanimatedKeyboardAnimation } from "
|
|
4
|
+
import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
|
|
5
5
|
import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
|
|
6
6
|
const KeyboardStickyView = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
7
7
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useMemo","Reanimated","useAnimatedStyle","useReanimatedKeyboardAnimation","useKeyboardInterpolation","KeyboardStickyView","_ref","ref","children","offset","closed","opened","style","props","height","interpolate","stickyViewStyle","value","transform","translateY","styles","createElement","View","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport Reanimated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport { useReanimatedKeyboardAnimation } from \"
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useMemo","Reanimated","useAnimatedStyle","useReanimatedKeyboardAnimation","useKeyboardInterpolation","KeyboardStickyView","_ref","ref","children","offset","closed","opened","style","props","height","interpolate","stickyViewStyle","value","transform","translateY","styles","createElement","View","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport Reanimated, { useAnimatedStyle } from \"react-native-reanimated\";\n\nimport { useReanimatedKeyboardAnimation } from \"react-native-keyboard-controller\";\n\nimport useKeyboardInterpolation from \"../hooks/useKeyboardInterpolation\";\n\nimport type { View, ViewProps } from \"react-native\";\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref,\n ) => {\n const { height } = useReanimatedKeyboardAnimation();\n const { interpolate } = useKeyboardInterpolation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(-height.value, [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle],\n );\n\n return (\n <Reanimated.View ref={ref} style={styles} {...props}>\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,IAAIC,gBAAgB,QAAQ,yBAAyB;AAEtE,SAASC,8BAA8B,QAAQ,kCAAkC;AAEjF,OAAOC,wBAAwB,MAAM,mCAAmC;AAoBxE,MAAMC,kBAAkB,gBAAGN,UAAU,CAInC,CAAAO,IAAA,EAEEC,GAAG,KACA;EAAA,IAFH;IAAEC,QAAQ;IAAEC,MAAM,EAAE;MAAEC,MAAM,GAAG,CAAC;MAAEC,MAAM,GAAG;IAAE,CAAC,GAAG,CAAC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC,GAAAP,IAAA;EAGtE,MAAM;IAAEQ;EAAO,CAAC,GAAGX,8BAA8B,CAAC,CAAC;EACnD,MAAM;IAAEY;EAAY,CAAC,GAAGX,wBAAwB,CAAC,CAAC;EAElD,MAAMY,eAAe,GAAGd,gBAAgB,CAAC,MAAM;IAC7C,MAAMO,MAAM,GAAGM,WAAW,CAAC,CAACD,MAAM,CAACG,KAAK,EAAE,CAACP,MAAM,EAAEC,MAAM,CAAC,CAAC;IAE3D,OAAO;MACLO,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEL,MAAM,CAACG,KAAK,GAAGR;MAAO,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,MAAMS,MAAM,GAAGpB,OAAO,CACpB,MAAM,CAACY,KAAK,EAAEI,eAAe,CAAC,EAC9B,CAACJ,KAAK,EAAEI,eAAe,CACzB,CAAC;EAED,oBACElB,KAAA,CAAAuB,aAAA,CAACpB,UAAU,CAACqB,IAAI,EAAAC,QAAA;IAAChB,GAAG,EAAEA,GAAI;IAACK,KAAK,EAAEQ;EAAO,GAAKP,KAAK,GAChDL,QACc,CAAC;AAEtB,CACF,CAAC;AAED,eAAeH,kBAAkB"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { Platform } from "react-native";
|
|
1
2
|
import { interpolate as interpolateREA, useSharedValue } from "react-native-reanimated";
|
|
2
|
-
import { useKeyboardHandler } from "
|
|
3
|
+
import { useKeyboardHandler } from "react-native-keyboard-controller";
|
|
3
4
|
/**
|
|
4
5
|
* Hook that can be used for interpolation keyboard movement. The main concern is the thing
|
|
5
6
|
* when keyboard is opened and gets resized on Android. Let's say we are interpolating from
|
|
@@ -26,6 +27,12 @@ const useKeyboardInterpolation = () => {
|
|
|
26
27
|
const interpolate = (keyboardPosition, output) => {
|
|
27
28
|
"worklet";
|
|
28
29
|
|
|
30
|
+
// on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when
|
|
31
|
+
// keyboard resized we will not have intermediate values and transition will be instant
|
|
32
|
+
// see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
|
|
33
|
+
if (Platform.OS === "ios") {
|
|
34
|
+
return interpolateREA(keyboardPosition, [0, nextKeyboardHeight.value], output);
|
|
35
|
+
}
|
|
29
36
|
lastInterpolation.value = interpolateREA(keyboardPosition, [prevKeyboardHeight.value, nextKeyboardHeight.value], shouldUseInternalInterpolation.value ? [lastInterpolation.value, output[1]] : output);
|
|
30
37
|
return lastInterpolation.value;
|
|
31
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["interpolate","interpolateREA","useSharedValue","useKeyboardHandler","useKeyboardInterpolation","nextKeyboardHeight","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","keyboardPosition","output","value","onStart","e","keyboardWillBeHidden","height","onEnd"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import {\n interpolate as interpolateREA,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"
|
|
1
|
+
{"version":3,"names":["Platform","interpolate","interpolateREA","useSharedValue","useKeyboardHandler","useKeyboardInterpolation","nextKeyboardHeight","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","keyboardPosition","output","OS","value","onStart","e","keyboardWillBeHidden","height","onEnd"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n interpolate as interpolateREA,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n // keyboard heights\n const nextKeyboardHeight = useSharedValue(0);\n const prevKeyboardHeight = useSharedValue(0);\n // save latest interpolated position\n const lastInterpolation = useSharedValue(0);\n // boolean flag indicating which output range should be used\n const shouldUseInternalInterpolation = useSharedValue(false);\n\n const interpolate = (\n keyboardPosition: number,\n output: KeyboardInterpolationOutput,\n ) => {\n \"worklet\";\n\n // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when\n // keyboard resized we will not have intermediate values and transition will be instant\n // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n if (Platform.OS === \"ios\") {\n return interpolateREA(\n keyboardPosition,\n [0, nextKeyboardHeight.value],\n output,\n );\n }\n\n lastInterpolation.value = interpolateREA(\n keyboardPosition,\n [prevKeyboardHeight.value, nextKeyboardHeight.value],\n shouldUseInternalInterpolation.value\n ? [lastInterpolation.value, output[1]]\n : output,\n );\n\n return lastInterpolation.value;\n };\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n const keyboardWillBeHidden = e.height === 0;\n\n // keyboard will be hidden\n if (keyboardWillBeHidden) {\n shouldUseInternalInterpolation.value = false;\n prevKeyboardHeight.value = 0;\n }\n\n // keyboard will change its size\n if (\n // keyboard is shown on screen\n nextKeyboardHeight.value !== 0 &&\n // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n nextKeyboardHeight.value !== e.height &&\n // keyboard is not hiding\n !keyboardWillBeHidden\n ) {\n prevKeyboardHeight.value = nextKeyboardHeight.value;\n shouldUseInternalInterpolation.value = true;\n }\n\n // keyboard will show or change size\n if (!keyboardWillBeHidden) {\n nextKeyboardHeight.value = e.height;\n }\n },\n onEnd: (e) => {\n \"worklet\";\n\n // handles case show -> resize -> hide -> show\n // here we reset value to 0 when keyboard is hidden\n nextKeyboardHeight.value = e.height;\n },\n },\n [],\n );\n\n return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SACEC,WAAW,IAAIC,cAAc,EAC7BC,cAAc,QACT,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,kCAAkC;AAIrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC5C,MAAMI,kBAAkB,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAC5C;EACA,MAAMK,iBAAiB,GAAGL,cAAc,CAAC,CAAC,CAAC;EAC3C;EACA,MAAMM,8BAA8B,GAAGN,cAAc,CAAC,KAAK,CAAC;EAE5D,MAAMF,WAAW,GAAGA,CAClBS,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAET;IACA;IACA;IACA,IAAIX,QAAQ,CAACY,EAAE,KAAK,KAAK,EAAE;MACzB,OAAOV,cAAc,CACnBQ,gBAAgB,EAChB,CAAC,CAAC,EAAEJ,kBAAkB,CAACO,KAAK,CAAC,EAC7BF,MACF,CAAC;IACH;IAEAH,iBAAiB,CAACK,KAAK,GAAGX,cAAc,CACtCQ,gBAAgB,EAChB,CAACH,kBAAkB,CAACM,KAAK,EAAEP,kBAAkB,CAACO,KAAK,CAAC,EACpDJ,8BAA8B,CAACI,KAAK,GAChC,CAACL,iBAAiB,CAACK,KAAK,EAAEF,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IAED,OAAOH,iBAAiB,CAACK,KAAK;EAChC,CAAC;EAEDT,kBAAkB,CAChB;IACEU,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBP,8BAA8B,CAACI,KAAK,GAAG,KAAK;QAC5CN,kBAAkB,CAACM,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAP,kBAAkB,CAACO,KAAK,KAAK,CAAC;MAC9B;MACAP,kBAAkB,CAACO,KAAK,KAAKE,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAT,kBAAkB,CAACM,KAAK,GAAGP,kBAAkB,CAACO,KAAK;QACnDJ,8BAA8B,CAACI,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACG,oBAAoB,EAAE;QACzBV,kBAAkB,CAACO,KAAK,GAAGE,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAT,kBAAkB,CAACO,KAAK,GAAGE,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEhB;EAAY,CAAC;AACxB,CAAC;AAED,eAAeI,wBAAwB"}
|
|
@@ -1,45 +1,10 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
2
|
import type { ScrollViewProps } from "react-native";
|
|
3
3
|
type KeyboardAwareScrollViewProps = {
|
|
4
|
+
/** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
|
|
4
5
|
bottomOffset?: number;
|
|
6
|
+
/** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
|
|
7
|
+
disableScrollOnKeyboardHide?: boolean;
|
|
5
8
|
} & 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
9
|
declare const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps>;
|
|
45
10
|
export default KeyboardAwareScrollView;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useSharedValue } from "react-native-reanimated";
|
|
2
2
|
|
|
3
|
-
import { useKeyboardHandler } from "
|
|
3
|
+
import { useKeyboardHandler } from "react-native-keyboard-controller";
|
|
4
4
|
|
|
5
5
|
export const useKeyboardAnimation = () => {
|
|
6
6
|
const heightWhenOpened = useSharedValue(0);
|
|
@@ -29,8 +29,19 @@ export const useKeyboardAnimation = () => {
|
|
|
29
29
|
|
|
30
30
|
isClosed.value = e.height === 0;
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
// `height` update happens in `onMove` handler
|
|
33
|
+
// in `onEnd` we need to update only if `onMove`
|
|
34
|
+
// wasn't called (i. e. duration === 0)
|
|
35
|
+
//
|
|
36
|
+
// we can not call this code without condition below
|
|
37
|
+
// because in some corner cases (iOS with `secureTextEntry`)
|
|
38
|
+
// `onEnd` can be emitted before `onMove` and in this case
|
|
39
|
+
// it may lead to choppy/glitchy/jumpy UI
|
|
40
|
+
// see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
|
|
41
|
+
if (e.duration === 0) {
|
|
42
|
+
progress.value = e.progress;
|
|
43
|
+
height.value = e.height;
|
|
44
|
+
}
|
|
34
45
|
},
|
|
35
46
|
},
|
|
36
47
|
[],
|
|
@@ -23,10 +23,13 @@ import type { ScrollViewProps } from "react-native";
|
|
|
23
23
|
import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
|
|
24
24
|
|
|
25
25
|
type KeyboardAwareScrollViewProps = {
|
|
26
|
+
/** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
|
|
26
27
|
bottomOffset?: number;
|
|
28
|
+
/** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
|
|
29
|
+
disableScrollOnKeyboardHide?: boolean;
|
|
27
30
|
} & ScrollViewProps;
|
|
28
31
|
|
|
29
|
-
|
|
32
|
+
/*
|
|
30
33
|
* Everything begins from `onStart` handler. This handler is called every time,
|
|
31
34
|
* when keyboard changes its size or when focused `TextInput` was changed. In
|
|
32
35
|
* this handler we are calculating/memoizing values which later will be used
|
|
@@ -67,12 +70,15 @@ type KeyboardAwareScrollViewProps = {
|
|
|
67
70
|
const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
68
71
|
children,
|
|
69
72
|
bottomOffset = 0,
|
|
73
|
+
disableScrollOnKeyboardHide = false,
|
|
70
74
|
...rest
|
|
71
75
|
}) => {
|
|
72
76
|
const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
|
|
73
77
|
const scrollPosition = useSharedValue(0);
|
|
74
78
|
const position = useSharedValue(0);
|
|
79
|
+
const currentKeyboardFrameHeight = useSharedValue(0);
|
|
75
80
|
const keyboardHeight = useSharedValue(0);
|
|
81
|
+
const keyboardWillAppear = useSharedValue(false);
|
|
76
82
|
const tag = useSharedValue(-1);
|
|
77
83
|
const initialKeyboardSize = useSharedValue(0);
|
|
78
84
|
const scrollBeforeKeyboardMovement = useSharedValue(0);
|
|
@@ -169,7 +175,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
|
169
175
|
|
|
170
176
|
const keyboardWillChangeSize =
|
|
171
177
|
keyboardHeight.value !== e.height && e.height > 0;
|
|
172
|
-
|
|
178
|
+
keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
|
|
173
179
|
const keyboardWillHide = e.height === 0;
|
|
174
180
|
const focusWasChanged =
|
|
175
181
|
(tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;
|
|
@@ -184,7 +190,11 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
|
184
190
|
scrollPosition.value = scrollBeforeKeyboardMovement.value;
|
|
185
191
|
}
|
|
186
192
|
|
|
187
|
-
if (
|
|
193
|
+
if (
|
|
194
|
+
keyboardWillAppear.value ||
|
|
195
|
+
keyboardWillChangeSize ||
|
|
196
|
+
focusWasChanged
|
|
197
|
+
) {
|
|
188
198
|
// persist scroll value
|
|
189
199
|
scrollPosition.value = position.value;
|
|
190
200
|
// just persist height - later will be used in interpolation
|
|
@@ -202,7 +212,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
|
202
212
|
scrollBeforeKeyboardMovement.value = position.value;
|
|
203
213
|
}
|
|
204
214
|
|
|
205
|
-
if (focusWasChanged && !keyboardWillAppear) {
|
|
215
|
+
if (focusWasChanged && !keyboardWillAppear.value) {
|
|
206
216
|
// update position on scroll value, so `onEnd` handler
|
|
207
217
|
// will pick up correct values
|
|
208
218
|
position.value += maybeScroll(e.height, true);
|
|
@@ -211,7 +221,12 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
|
211
221
|
onMove: (e) => {
|
|
212
222
|
"worklet";
|
|
213
223
|
|
|
214
|
-
|
|
224
|
+
currentKeyboardFrameHeight.value = e.height;
|
|
225
|
+
|
|
226
|
+
// if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
|
|
227
|
+
if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
|
|
228
|
+
maybeScroll(e.height);
|
|
229
|
+
}
|
|
215
230
|
},
|
|
216
231
|
onEnd: (e) => {
|
|
217
232
|
"worklet";
|
|
@@ -220,7 +235,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
|
220
235
|
scrollPosition.value = position.value;
|
|
221
236
|
},
|
|
222
237
|
},
|
|
223
|
-
[height, maybeScroll],
|
|
238
|
+
[height, maybeScroll, disableScrollOnKeyboardHide],
|
|
224
239
|
);
|
|
225
240
|
|
|
226
241
|
useAnimatedReaction(
|
|
@@ -242,7 +257,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
|
242
257
|
|
|
243
258
|
const view = useAnimatedStyle(
|
|
244
259
|
() => ({
|
|
245
|
-
paddingBottom:
|
|
260
|
+
paddingBottom: currentKeyboardFrameHeight.value,
|
|
246
261
|
}),
|
|
247
262
|
[],
|
|
248
263
|
);
|
|
@@ -251,10 +266,12 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
|
|
|
251
266
|
<Reanimated.ScrollView
|
|
252
267
|
ref={scrollViewAnimatedRef}
|
|
253
268
|
{...rest}
|
|
254
|
-
|
|
269
|
+
// @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
|
|
270
|
+
onScrollReanimated={onScroll}
|
|
255
271
|
scrollEventThrottle={16}
|
|
256
272
|
>
|
|
257
|
-
|
|
273
|
+
{children}
|
|
274
|
+
<Reanimated.View style={view} />
|
|
258
275
|
</Reanimated.ScrollView>
|
|
259
276
|
);
|
|
260
277
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { forwardRef, useMemo } from "react";
|
|
2
2
|
import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
|
|
3
3
|
|
|
4
|
-
import { useReanimatedKeyboardAnimation } from "
|
|
4
|
+
import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
|
|
5
|
+
|
|
5
6
|
import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
|
|
6
7
|
|
|
7
8
|
import type { View, ViewProps } from "react-native";
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { Platform } from "react-native";
|
|
1
2
|
import {
|
|
2
3
|
interpolate as interpolateREA,
|
|
3
4
|
useSharedValue,
|
|
4
5
|
} from "react-native-reanimated";
|
|
5
6
|
|
|
6
|
-
import { useKeyboardHandler } from "
|
|
7
|
+
import { useKeyboardHandler } from "react-native-keyboard-controller";
|
|
7
8
|
|
|
8
9
|
type KeyboardInterpolationOutput = [number, number];
|
|
9
10
|
|
|
@@ -37,6 +38,17 @@ const useKeyboardInterpolation = () => {
|
|
|
37
38
|
) => {
|
|
38
39
|
"worklet";
|
|
39
40
|
|
|
41
|
+
// on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when
|
|
42
|
+
// keyboard resized we will not have intermediate values and transition will be instant
|
|
43
|
+
// see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
|
|
44
|
+
if (Platform.OS === "ios") {
|
|
45
|
+
return interpolateREA(
|
|
46
|
+
keyboardPosition,
|
|
47
|
+
[0, nextKeyboardHeight.value],
|
|
48
|
+
output,
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
40
52
|
lastInterpolation.value = interpolateREA(
|
|
41
53
|
keyboardPosition,
|
|
42
54
|
[prevKeyboardHeight.value, nextKeyboardHeight.value],
|