react-native-keyboard-controller 1.10.6 → 1.11.0
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/README.md +1 -0
- package/android/build.gradle +6 -0
- package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerModule.kt +4 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/events/FocusedInputLayoutChangedEvent.kt +2 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/EditText.kt +22 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/ThemedReactContext.kt +9 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/FocusedInputObserver.kt +20 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt +7 -13
- package/android/src/main/java/com/reactnativekeyboardcontroller/modules/KeyboardControllerModuleImpl.kt +15 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/traversal/FocusedInputHolder.kt +16 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/traversal/ViewHierarchyNavigator.kt +101 -0
- package/android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardControllerModule.kt +5 -0
- package/android/src/test/java/com/reactnativekeyboardcontroller/traversal/ViewHierarchyNavigatorTest.kt +188 -0
- package/ios/.swiftlint.yml +4 -0
- package/ios/Extensions.swift +29 -0
- package/ios/KeyboardController.xcodeproj/project.pbxproj +20 -0
- package/ios/KeyboardControllerModule.mm +18 -0
- package/ios/events/FocusedInputLayoutChangedEvent.m +3 -0
- package/ios/observers/FocusedInputObserver.swift +20 -4
- package/ios/observers/KeyboardMovementObserver.swift +5 -4
- package/ios/traversal/FocusedInputHolder.swift +32 -0
- package/ios/traversal/TextInput.swift +26 -0
- package/ios/traversal/ViewHierarchyNavigator.swift +116 -0
- package/ios/views/KeyboardControllerView.mm +5 -0
- package/ios/views/KeyboardControllerViewManager.swift +4 -1
- package/jest/index.js +20 -0
- package/lib/commonjs/bindings.js +12 -1
- package/lib/commonjs/bindings.js.map +1 -1
- package/lib/commonjs/bindings.native.js +11 -2
- package/lib/commonjs/bindings.native.js.map +1 -1
- package/lib/commonjs/components/KeyboardAwareScrollView/index.js +18 -6
- package/lib/commonjs/components/KeyboardAwareScrollView/index.js.map +1 -1
- package/lib/commonjs/components/KeyboardToolbar/Arrow.js +79 -0
- package/lib/commonjs/components/KeyboardToolbar/Arrow.js.map +1 -0
- package/lib/commonjs/components/KeyboardToolbar/Button.js +74 -0
- package/lib/commonjs/components/KeyboardToolbar/Button.js.map +1 -0
- package/lib/commonjs/components/KeyboardToolbar/colors.js +41 -0
- package/lib/commonjs/components/KeyboardToolbar/colors.js.map +1 -0
- package/lib/commonjs/components/KeyboardToolbar/index.js +136 -0
- package/lib/commonjs/components/KeyboardToolbar/index.js.map +1 -0
- package/lib/commonjs/components/hooks/useColorScheme.js +11 -0
- package/lib/commonjs/components/hooks/useColorScheme.js.map +1 -0
- package/lib/commonjs/components/hooks/useKeyboardInterpolation.js +3 -2
- package/lib/commonjs/components/hooks/useKeyboardInterpolation.js.map +1 -1
- package/lib/commonjs/components/index.js +21 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/index.js +22 -13
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/specs/KeyboardControllerViewNativeComponent.js.map +1 -1
- package/lib/commonjs/specs/NativeKeyboardController.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/module/bindings.js +10 -0
- package/lib/module/bindings.js.map +1 -1
- package/lib/module/bindings.native.js +9 -1
- package/lib/module/bindings.native.js.map +1 -1
- package/lib/module/components/KeyboardAwareScrollView/index.js +18 -6
- package/lib/module/components/KeyboardAwareScrollView/index.js.map +1 -1
- package/lib/module/components/KeyboardToolbar/Arrow.js +69 -0
- package/lib/module/components/KeyboardToolbar/Arrow.js.map +1 -0
- package/lib/module/components/KeyboardToolbar/Button.js +64 -0
- package/lib/module/components/KeyboardToolbar/Button.js.map +1 -0
- package/lib/module/components/KeyboardToolbar/colors.js +34 -0
- package/lib/module/components/KeyboardToolbar/colors.js.map +1 -0
- package/lib/module/components/KeyboardToolbar/index.js +121 -0
- package/lib/module/components/KeyboardToolbar/index.js.map +1 -0
- package/lib/module/components/hooks/useColorScheme.js +4 -0
- package/lib/module/components/hooks/useColorScheme.js.map +1 -0
- package/lib/module/components/hooks/useKeyboardInterpolation.js +3 -2
- package/lib/module/components/hooks/useKeyboardInterpolation.js.map +1 -1
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/index.js +3 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/specs/KeyboardControllerViewNativeComponent.js.map +1 -1
- package/lib/module/specs/NativeKeyboardController.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/typescript/bindings.d.ts +6 -1
- package/lib/typescript/bindings.native.d.ts +6 -1
- package/lib/typescript/components/KeyboardToolbar/Arrow.d.ts +9 -0
- package/lib/typescript/components/KeyboardToolbar/Button.d.ts +15 -0
- package/lib/typescript/components/KeyboardToolbar/colors.d.ts +17 -0
- package/lib/typescript/components/KeyboardToolbar/index.d.ts +25 -0
- package/lib/typescript/components/hooks/useColorScheme.d.ts +2 -0
- package/lib/typescript/components/index.d.ts +1 -0
- package/lib/typescript/index.d.ts +1 -2
- package/lib/typescript/specs/KeyboardControllerViewNativeComponent.d.ts +1 -0
- package/lib/typescript/specs/NativeKeyboardController.d.ts +1 -0
- package/lib/typescript/types.d.ts +11 -0
- package/package.json +5 -1
- package/src/bindings.native.ts +11 -1
- package/src/bindings.ts +9 -0
- package/src/components/KeyboardAwareScrollView/index.tsx +22 -2
- package/src/components/KeyboardToolbar/Arrow.tsx +80 -0
- package/src/components/KeyboardToolbar/Button.tsx +98 -0
- package/src/components/KeyboardToolbar/colors.ts +51 -0
- package/src/components/KeyboardToolbar/index.tsx +154 -0
- package/src/components/hooks/useColorScheme.ts +5 -0
- package/src/components/hooks/useKeyboardInterpolation.ts +3 -2
- package/src/components/index.ts +5 -0
- package/src/index.ts +4 -1
- package/src/specs/KeyboardControllerViewNativeComponent.ts +1 -0
- package/src/specs/NativeKeyboardController.ts +1 -0
- package/src/types.ts +14 -0
- package/lib/commonjs/replicas.js +0 -125
- package/lib/commonjs/replicas.js.map +0 -1
- package/lib/module/replicas.js +0 -115
- package/lib/module/replicas.js.map +0 -1
- package/lib/typescript/replicas.d.ts +0 -38
- package/src/replicas.ts +0 -154
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_bindings","_constants","_hooks","availableOSEventType","Platform","OS","defaultAndroidEasing","Easing","bezier","exports","useKeyboardAnimationReplica","height","useRef","Animated","Value","progress","animation","useMemo","current","useEffect","KeyboardController","setInputMode","AndroidSoftInputModes","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode","listener","Keyboard","addListener","e","timing","toValue","endCoordinates","duration","easing","useNativeDriver","start","remove","IOS_SPRING_CONFIG","damping","stiffness","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","useReanimatedKeyboardAnimationReplica","useSharedValue","heightEvent","useDerivedValue","value","handler","useCallback","_height","useAnimatedReaction","_keyboardHeight","result","_previousResult","_previousKeyboardHeight","withSpring","show","runOnUI","hide","useGradualKeyboardAnimation","useReanimatedKeyboardAnimation"],"sources":["replicas.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Animated, Easing, Keyboard, Platform } from \"react-native\";\nimport {\n runOnUI,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withSpring,\n} from \"react-native-reanimated\";\n\nimport { KeyboardController } from \"./bindings\";\nimport { AndroidSoftInputModes } from \"./constants\";\nimport { useReanimatedKeyboardAnimation } from \"./hooks\";\n\nconst availableOSEventType = Platform.OS === \"ios\" ? \"Will\" : \"Did\";\n\n// cubic-bezier(.17,.67,.34,.94)\nexport const defaultAndroidEasing = Easing.bezier(0.4, 0.0, 0.2, 1);\ntype KeyboardAnimation = {\n progress: Animated.Value;\n height: Animated.Value;\n};\n\n/**\n * An experimental implementation of tracing keyboard appearance.\n * Switch an input mode to adjust resize mode. In this case all did* events\n * are triggering before keyboard appears, and using some approximations\n * it tries to mimicries a native transition.\n *\n * @returns {Animated.Value}\n */\nexport const useKeyboardAnimationReplica = (): KeyboardAnimation => {\n const height = useRef(new Animated.Value(0));\n const progress = useRef(new Animated.Value(0));\n const animation = useMemo(\n () => ({\n height: height.current,\n progress: progress.current,\n }),\n [],\n );\n\n useEffect(() => {\n KeyboardController.setInputMode(\n AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,\n );\n\n return () => KeyboardController.setDefaultMode();\n }, []);\n useEffect(() => {\n const listener = Keyboard.addListener(\n `keyboard${availableOSEventType}Show`,\n (e) => {\n Animated.timing(height.current, {\n toValue: -e.endCoordinates.height,\n duration: e.duration !== 0 ? e.duration : 300,\n easing: Easing.bezier(0.4, 0.0, 0.2, 1),\n useNativeDriver: true,\n }).start();\n\n return () => listener.remove();\n },\n );\n }, []);\n useEffect(() => {\n const listener = Keyboard.addListener(\n `keyboard${availableOSEventType}Hide`,\n (e) => {\n Animated.timing(height.current, {\n toValue: 0,\n duration: e.duration !== 0 ? e.duration : 300,\n easing: Easing.bezier(0.4, 0.0, 0.2, 1),\n useNativeDriver: true,\n }).start();\n\n return () => listener.remove();\n },\n );\n }, []);\n\n return animation;\n};\n\nconst IOS_SPRING_CONFIG = {\n damping: 500,\n stiffness: 1000,\n mass: 3,\n overshootClamping: true,\n restDisplacementThreshold: 10,\n restSpeedThreshold: 10,\n};\n\n/**\n * A close replica to native iOS keyboard animation. The problem is that\n * iOS (unlike Android) can not fire events for each keyboard frame movement.\n * As a result we can not get gradual values (for example, for progress it always\n * will be 1 or 0). So if you want to rely on gradual values you will need to use\n * this replica.\n *\n * The transition is hardcoded and may vary from one to another OS versions. But it\n * seems like last time it has been changed in iOS 7. Since RN supports at least iOS\n * 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS\n * versions, then this implementation should be revisited and reflect necessary changes.\n *\n * @returns {height, progress} - animated values\n */\nexport const useReanimatedKeyboardAnimationReplica = () => {\n const height = useSharedValue(0);\n const heightEvent = useSharedValue(0);\n\n const progress = useDerivedValue(() => height.value / heightEvent.value);\n\n const handler = useCallback((_height: number) => {\n \"worklet\";\n\n heightEvent.value = _height;\n }, []);\n\n useAnimatedReaction(\n () => ({\n _keyboardHeight: heightEvent.value,\n }),\n (result, _previousResult) => {\n const { _keyboardHeight } = result;\n const _previousKeyboardHeight = _previousResult?._keyboardHeight;\n\n if (_keyboardHeight !== _previousKeyboardHeight) {\n height.value = withSpring(_keyboardHeight, IOS_SPRING_CONFIG);\n }\n },\n [],\n );\n\n useEffect(() => {\n const show = Keyboard.addListener(\"keyboardWillShow\", (e) => {\n runOnUI(handler)(-e.endCoordinates.height);\n });\n const hide = Keyboard.addListener(\"keyboardWillHide\", () => {\n runOnUI(handler)(0);\n });\n\n return () => {\n show.remove();\n hide.remove();\n };\n }, []);\n\n return { height, progress };\n};\n\nexport const useGradualKeyboardAnimation =\n Platform.OS === \"ios\"\n ? useReanimatedKeyboardAnimationReplica\n : useReanimatedKeyboardAnimation;\n"],"mappings":"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"}
|
package/lib/module/replicas.js
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useRef } from "react";
|
|
2
|
-
import { Animated, Easing, Keyboard, Platform } from "react-native";
|
|
3
|
-
import { runOnUI, useAnimatedReaction, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated";
|
|
4
|
-
import { KeyboardController } from "./bindings";
|
|
5
|
-
import { AndroidSoftInputModes } from "./constants";
|
|
6
|
-
import { useReanimatedKeyboardAnimation } from "./hooks";
|
|
7
|
-
const availableOSEventType = Platform.OS === "ios" ? "Will" : "Did";
|
|
8
|
-
|
|
9
|
-
// cubic-bezier(.17,.67,.34,.94)
|
|
10
|
-
export const defaultAndroidEasing = Easing.bezier(0.4, 0.0, 0.2, 1);
|
|
11
|
-
/**
|
|
12
|
-
* An experimental implementation of tracing keyboard appearance.
|
|
13
|
-
* Switch an input mode to adjust resize mode. In this case all did* events
|
|
14
|
-
* are triggering before keyboard appears, and using some approximations
|
|
15
|
-
* it tries to mimicries a native transition.
|
|
16
|
-
*
|
|
17
|
-
* @returns {Animated.Value}
|
|
18
|
-
*/
|
|
19
|
-
export const useKeyboardAnimationReplica = () => {
|
|
20
|
-
const height = useRef(new Animated.Value(0));
|
|
21
|
-
const progress = useRef(new Animated.Value(0));
|
|
22
|
-
const animation = useMemo(() => ({
|
|
23
|
-
height: height.current,
|
|
24
|
-
progress: progress.current
|
|
25
|
-
}), []);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
KeyboardController.setInputMode(AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE);
|
|
28
|
-
return () => KeyboardController.setDefaultMode();
|
|
29
|
-
}, []);
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
const listener = Keyboard.addListener(`keyboard${availableOSEventType}Show`, e => {
|
|
32
|
-
Animated.timing(height.current, {
|
|
33
|
-
toValue: -e.endCoordinates.height,
|
|
34
|
-
duration: e.duration !== 0 ? e.duration : 300,
|
|
35
|
-
easing: Easing.bezier(0.4, 0.0, 0.2, 1),
|
|
36
|
-
useNativeDriver: true
|
|
37
|
-
}).start();
|
|
38
|
-
return () => listener.remove();
|
|
39
|
-
});
|
|
40
|
-
}, []);
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
const listener = Keyboard.addListener(`keyboard${availableOSEventType}Hide`, e => {
|
|
43
|
-
Animated.timing(height.current, {
|
|
44
|
-
toValue: 0,
|
|
45
|
-
duration: e.duration !== 0 ? e.duration : 300,
|
|
46
|
-
easing: Easing.bezier(0.4, 0.0, 0.2, 1),
|
|
47
|
-
useNativeDriver: true
|
|
48
|
-
}).start();
|
|
49
|
-
return () => listener.remove();
|
|
50
|
-
});
|
|
51
|
-
}, []);
|
|
52
|
-
return animation;
|
|
53
|
-
};
|
|
54
|
-
const IOS_SPRING_CONFIG = {
|
|
55
|
-
damping: 500,
|
|
56
|
-
stiffness: 1000,
|
|
57
|
-
mass: 3,
|
|
58
|
-
overshootClamping: true,
|
|
59
|
-
restDisplacementThreshold: 10,
|
|
60
|
-
restSpeedThreshold: 10
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* A close replica to native iOS keyboard animation. The problem is that
|
|
65
|
-
* iOS (unlike Android) can not fire events for each keyboard frame movement.
|
|
66
|
-
* As a result we can not get gradual values (for example, for progress it always
|
|
67
|
-
* will be 1 or 0). So if you want to rely on gradual values you will need to use
|
|
68
|
-
* this replica.
|
|
69
|
-
*
|
|
70
|
-
* The transition is hardcoded and may vary from one to another OS versions. But it
|
|
71
|
-
* seems like last time it has been changed in iOS 7. Since RN supports at least iOS
|
|
72
|
-
* 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS
|
|
73
|
-
* versions, then this implementation should be revisited and reflect necessary changes.
|
|
74
|
-
*
|
|
75
|
-
* @returns {height, progress} - animated values
|
|
76
|
-
*/
|
|
77
|
-
export const useReanimatedKeyboardAnimationReplica = () => {
|
|
78
|
-
const height = useSharedValue(0);
|
|
79
|
-
const heightEvent = useSharedValue(0);
|
|
80
|
-
const progress = useDerivedValue(() => height.value / heightEvent.value);
|
|
81
|
-
const handler = useCallback(_height => {
|
|
82
|
-
"worklet";
|
|
83
|
-
|
|
84
|
-
heightEvent.value = _height;
|
|
85
|
-
}, []);
|
|
86
|
-
useAnimatedReaction(() => ({
|
|
87
|
-
_keyboardHeight: heightEvent.value
|
|
88
|
-
}), (result, _previousResult) => {
|
|
89
|
-
const {
|
|
90
|
-
_keyboardHeight
|
|
91
|
-
} = result;
|
|
92
|
-
const _previousKeyboardHeight = _previousResult === null || _previousResult === void 0 ? void 0 : _previousResult._keyboardHeight;
|
|
93
|
-
if (_keyboardHeight !== _previousKeyboardHeight) {
|
|
94
|
-
height.value = withSpring(_keyboardHeight, IOS_SPRING_CONFIG);
|
|
95
|
-
}
|
|
96
|
-
}, []);
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
const show = Keyboard.addListener("keyboardWillShow", e => {
|
|
99
|
-
runOnUI(handler)(-e.endCoordinates.height);
|
|
100
|
-
});
|
|
101
|
-
const hide = Keyboard.addListener("keyboardWillHide", () => {
|
|
102
|
-
runOnUI(handler)(0);
|
|
103
|
-
});
|
|
104
|
-
return () => {
|
|
105
|
-
show.remove();
|
|
106
|
-
hide.remove();
|
|
107
|
-
};
|
|
108
|
-
}, []);
|
|
109
|
-
return {
|
|
110
|
-
height,
|
|
111
|
-
progress
|
|
112
|
-
};
|
|
113
|
-
};
|
|
114
|
-
export const useGradualKeyboardAnimation = Platform.OS === "ios" ? useReanimatedKeyboardAnimationReplica : useReanimatedKeyboardAnimation;
|
|
115
|
-
//# sourceMappingURL=replicas.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useMemo","useRef","Animated","Easing","Keyboard","Platform","runOnUI","useAnimatedReaction","useDerivedValue","useSharedValue","withSpring","KeyboardController","AndroidSoftInputModes","useReanimatedKeyboardAnimation","availableOSEventType","OS","defaultAndroidEasing","bezier","useKeyboardAnimationReplica","height","Value","progress","animation","current","setInputMode","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode","listener","addListener","e","timing","toValue","endCoordinates","duration","easing","useNativeDriver","start","remove","IOS_SPRING_CONFIG","damping","stiffness","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","useReanimatedKeyboardAnimationReplica","heightEvent","value","handler","_height","_keyboardHeight","result","_previousResult","_previousKeyboardHeight","show","hide","useGradualKeyboardAnimation"],"sources":["replicas.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Animated, Easing, Keyboard, Platform } from \"react-native\";\nimport {\n runOnUI,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n withSpring,\n} from \"react-native-reanimated\";\n\nimport { KeyboardController } from \"./bindings\";\nimport { AndroidSoftInputModes } from \"./constants\";\nimport { useReanimatedKeyboardAnimation } from \"./hooks\";\n\nconst availableOSEventType = Platform.OS === \"ios\" ? \"Will\" : \"Did\";\n\n// cubic-bezier(.17,.67,.34,.94)\nexport const defaultAndroidEasing = Easing.bezier(0.4, 0.0, 0.2, 1);\ntype KeyboardAnimation = {\n progress: Animated.Value;\n height: Animated.Value;\n};\n\n/**\n * An experimental implementation of tracing keyboard appearance.\n * Switch an input mode to adjust resize mode. In this case all did* events\n * are triggering before keyboard appears, and using some approximations\n * it tries to mimicries a native transition.\n *\n * @returns {Animated.Value}\n */\nexport const useKeyboardAnimationReplica = (): KeyboardAnimation => {\n const height = useRef(new Animated.Value(0));\n const progress = useRef(new Animated.Value(0));\n const animation = useMemo(\n () => ({\n height: height.current,\n progress: progress.current,\n }),\n [],\n );\n\n useEffect(() => {\n KeyboardController.setInputMode(\n AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,\n );\n\n return () => KeyboardController.setDefaultMode();\n }, []);\n useEffect(() => {\n const listener = Keyboard.addListener(\n `keyboard${availableOSEventType}Show`,\n (e) => {\n Animated.timing(height.current, {\n toValue: -e.endCoordinates.height,\n duration: e.duration !== 0 ? e.duration : 300,\n easing: Easing.bezier(0.4, 0.0, 0.2, 1),\n useNativeDriver: true,\n }).start();\n\n return () => listener.remove();\n },\n );\n }, []);\n useEffect(() => {\n const listener = Keyboard.addListener(\n `keyboard${availableOSEventType}Hide`,\n (e) => {\n Animated.timing(height.current, {\n toValue: 0,\n duration: e.duration !== 0 ? e.duration : 300,\n easing: Easing.bezier(0.4, 0.0, 0.2, 1),\n useNativeDriver: true,\n }).start();\n\n return () => listener.remove();\n },\n );\n }, []);\n\n return animation;\n};\n\nconst IOS_SPRING_CONFIG = {\n damping: 500,\n stiffness: 1000,\n mass: 3,\n overshootClamping: true,\n restDisplacementThreshold: 10,\n restSpeedThreshold: 10,\n};\n\n/**\n * A close replica to native iOS keyboard animation. The problem is that\n * iOS (unlike Android) can not fire events for each keyboard frame movement.\n * As a result we can not get gradual values (for example, for progress it always\n * will be 1 or 0). So if you want to rely on gradual values you will need to use\n * this replica.\n *\n * The transition is hardcoded and may vary from one to another OS versions. But it\n * seems like last time it has been changed in iOS 7. Since RN supports at least iOS\n * 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS\n * versions, then this implementation should be revisited and reflect necessary changes.\n *\n * @returns {height, progress} - animated values\n */\nexport const useReanimatedKeyboardAnimationReplica = () => {\n const height = useSharedValue(0);\n const heightEvent = useSharedValue(0);\n\n const progress = useDerivedValue(() => height.value / heightEvent.value);\n\n const handler = useCallback((_height: number) => {\n \"worklet\";\n\n heightEvent.value = _height;\n }, []);\n\n useAnimatedReaction(\n () => ({\n _keyboardHeight: heightEvent.value,\n }),\n (result, _previousResult) => {\n const { _keyboardHeight } = result;\n const _previousKeyboardHeight = _previousResult?._keyboardHeight;\n\n if (_keyboardHeight !== _previousKeyboardHeight) {\n height.value = withSpring(_keyboardHeight, IOS_SPRING_CONFIG);\n }\n },\n [],\n );\n\n useEffect(() => {\n const show = Keyboard.addListener(\"keyboardWillShow\", (e) => {\n runOnUI(handler)(-e.endCoordinates.height);\n });\n const hide = Keyboard.addListener(\"keyboardWillHide\", () => {\n runOnUI(handler)(0);\n });\n\n return () => {\n show.remove();\n hide.remove();\n };\n }, []);\n\n return { height, progress };\n};\n\nexport const useGradualKeyboardAnimation =\n Platform.OS === \"ios\"\n ? useReanimatedKeyboardAnimationReplica\n : useReanimatedKeyboardAnimation;\n"],"mappings":"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"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { Animated } from "react-native";
|
|
2
|
-
export declare const defaultAndroidEasing: import("react-native").EasingFunction;
|
|
3
|
-
type KeyboardAnimation = {
|
|
4
|
-
progress: Animated.Value;
|
|
5
|
-
height: Animated.Value;
|
|
6
|
-
};
|
|
7
|
-
/**
|
|
8
|
-
* An experimental implementation of tracing keyboard appearance.
|
|
9
|
-
* Switch an input mode to adjust resize mode. In this case all did* events
|
|
10
|
-
* are triggering before keyboard appears, and using some approximations
|
|
11
|
-
* it tries to mimicries a native transition.
|
|
12
|
-
*
|
|
13
|
-
* @returns {Animated.Value}
|
|
14
|
-
*/
|
|
15
|
-
export declare const useKeyboardAnimationReplica: () => KeyboardAnimation;
|
|
16
|
-
/**
|
|
17
|
-
* A close replica to native iOS keyboard animation. The problem is that
|
|
18
|
-
* iOS (unlike Android) can not fire events for each keyboard frame movement.
|
|
19
|
-
* As a result we can not get gradual values (for example, for progress it always
|
|
20
|
-
* will be 1 or 0). So if you want to rely on gradual values you will need to use
|
|
21
|
-
* this replica.
|
|
22
|
-
*
|
|
23
|
-
* The transition is hardcoded and may vary from one to another OS versions. But it
|
|
24
|
-
* seems like last time it has been changed in iOS 7. Since RN supports at least iOS
|
|
25
|
-
* 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS
|
|
26
|
-
* versions, then this implementation should be revisited and reflect necessary changes.
|
|
27
|
-
*
|
|
28
|
-
* @returns {height, progress} - animated values
|
|
29
|
-
*/
|
|
30
|
-
export declare const useReanimatedKeyboardAnimationReplica: () => {
|
|
31
|
-
height: import("react-native-reanimated").SharedValue<number>;
|
|
32
|
-
progress: Readonly<import("react-native-reanimated").SharedValue<number>>;
|
|
33
|
-
};
|
|
34
|
-
export declare const useGradualKeyboardAnimation: () => {
|
|
35
|
-
height: import("react-native-reanimated").SharedValue<number>;
|
|
36
|
-
progress: Readonly<import("react-native-reanimated").SharedValue<number>>;
|
|
37
|
-
};
|
|
38
|
-
export {};
|
package/src/replicas.ts
DELETED
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useRef } from "react";
|
|
2
|
-
import { Animated, Easing, Keyboard, Platform } from "react-native";
|
|
3
|
-
import {
|
|
4
|
-
runOnUI,
|
|
5
|
-
useAnimatedReaction,
|
|
6
|
-
useDerivedValue,
|
|
7
|
-
useSharedValue,
|
|
8
|
-
withSpring,
|
|
9
|
-
} from "react-native-reanimated";
|
|
10
|
-
|
|
11
|
-
import { KeyboardController } from "./bindings";
|
|
12
|
-
import { AndroidSoftInputModes } from "./constants";
|
|
13
|
-
import { useReanimatedKeyboardAnimation } from "./hooks";
|
|
14
|
-
|
|
15
|
-
const availableOSEventType = Platform.OS === "ios" ? "Will" : "Did";
|
|
16
|
-
|
|
17
|
-
// cubic-bezier(.17,.67,.34,.94)
|
|
18
|
-
export const defaultAndroidEasing = Easing.bezier(0.4, 0.0, 0.2, 1);
|
|
19
|
-
type KeyboardAnimation = {
|
|
20
|
-
progress: Animated.Value;
|
|
21
|
-
height: Animated.Value;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* An experimental implementation of tracing keyboard appearance.
|
|
26
|
-
* Switch an input mode to adjust resize mode. In this case all did* events
|
|
27
|
-
* are triggering before keyboard appears, and using some approximations
|
|
28
|
-
* it tries to mimicries a native transition.
|
|
29
|
-
*
|
|
30
|
-
* @returns {Animated.Value}
|
|
31
|
-
*/
|
|
32
|
-
export const useKeyboardAnimationReplica = (): KeyboardAnimation => {
|
|
33
|
-
const height = useRef(new Animated.Value(0));
|
|
34
|
-
const progress = useRef(new Animated.Value(0));
|
|
35
|
-
const animation = useMemo(
|
|
36
|
-
() => ({
|
|
37
|
-
height: height.current,
|
|
38
|
-
progress: progress.current,
|
|
39
|
-
}),
|
|
40
|
-
[],
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
KeyboardController.setInputMode(
|
|
45
|
-
AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,
|
|
46
|
-
);
|
|
47
|
-
|
|
48
|
-
return () => KeyboardController.setDefaultMode();
|
|
49
|
-
}, []);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
const listener = Keyboard.addListener(
|
|
52
|
-
`keyboard${availableOSEventType}Show`,
|
|
53
|
-
(e) => {
|
|
54
|
-
Animated.timing(height.current, {
|
|
55
|
-
toValue: -e.endCoordinates.height,
|
|
56
|
-
duration: e.duration !== 0 ? e.duration : 300,
|
|
57
|
-
easing: Easing.bezier(0.4, 0.0, 0.2, 1),
|
|
58
|
-
useNativeDriver: true,
|
|
59
|
-
}).start();
|
|
60
|
-
|
|
61
|
-
return () => listener.remove();
|
|
62
|
-
},
|
|
63
|
-
);
|
|
64
|
-
}, []);
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
const listener = Keyboard.addListener(
|
|
67
|
-
`keyboard${availableOSEventType}Hide`,
|
|
68
|
-
(e) => {
|
|
69
|
-
Animated.timing(height.current, {
|
|
70
|
-
toValue: 0,
|
|
71
|
-
duration: e.duration !== 0 ? e.duration : 300,
|
|
72
|
-
easing: Easing.bezier(0.4, 0.0, 0.2, 1),
|
|
73
|
-
useNativeDriver: true,
|
|
74
|
-
}).start();
|
|
75
|
-
|
|
76
|
-
return () => listener.remove();
|
|
77
|
-
},
|
|
78
|
-
);
|
|
79
|
-
}, []);
|
|
80
|
-
|
|
81
|
-
return animation;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
const IOS_SPRING_CONFIG = {
|
|
85
|
-
damping: 500,
|
|
86
|
-
stiffness: 1000,
|
|
87
|
-
mass: 3,
|
|
88
|
-
overshootClamping: true,
|
|
89
|
-
restDisplacementThreshold: 10,
|
|
90
|
-
restSpeedThreshold: 10,
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
/**
|
|
94
|
-
* A close replica to native iOS keyboard animation. The problem is that
|
|
95
|
-
* iOS (unlike Android) can not fire events for each keyboard frame movement.
|
|
96
|
-
* As a result we can not get gradual values (for example, for progress it always
|
|
97
|
-
* will be 1 or 0). So if you want to rely on gradual values you will need to use
|
|
98
|
-
* this replica.
|
|
99
|
-
*
|
|
100
|
-
* The transition is hardcoded and may vary from one to another OS versions. But it
|
|
101
|
-
* seems like last time it has been changed in iOS 7. Since RN supports at least iOS
|
|
102
|
-
* 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS
|
|
103
|
-
* versions, then this implementation should be revisited and reflect necessary changes.
|
|
104
|
-
*
|
|
105
|
-
* @returns {height, progress} - animated values
|
|
106
|
-
*/
|
|
107
|
-
export const useReanimatedKeyboardAnimationReplica = () => {
|
|
108
|
-
const height = useSharedValue(0);
|
|
109
|
-
const heightEvent = useSharedValue(0);
|
|
110
|
-
|
|
111
|
-
const progress = useDerivedValue(() => height.value / heightEvent.value);
|
|
112
|
-
|
|
113
|
-
const handler = useCallback((_height: number) => {
|
|
114
|
-
"worklet";
|
|
115
|
-
|
|
116
|
-
heightEvent.value = _height;
|
|
117
|
-
}, []);
|
|
118
|
-
|
|
119
|
-
useAnimatedReaction(
|
|
120
|
-
() => ({
|
|
121
|
-
_keyboardHeight: heightEvent.value,
|
|
122
|
-
}),
|
|
123
|
-
(result, _previousResult) => {
|
|
124
|
-
const { _keyboardHeight } = result;
|
|
125
|
-
const _previousKeyboardHeight = _previousResult?._keyboardHeight;
|
|
126
|
-
|
|
127
|
-
if (_keyboardHeight !== _previousKeyboardHeight) {
|
|
128
|
-
height.value = withSpring(_keyboardHeight, IOS_SPRING_CONFIG);
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
[],
|
|
132
|
-
);
|
|
133
|
-
|
|
134
|
-
useEffect(() => {
|
|
135
|
-
const show = Keyboard.addListener("keyboardWillShow", (e) => {
|
|
136
|
-
runOnUI(handler)(-e.endCoordinates.height);
|
|
137
|
-
});
|
|
138
|
-
const hide = Keyboard.addListener("keyboardWillHide", () => {
|
|
139
|
-
runOnUI(handler)(0);
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
return () => {
|
|
143
|
-
show.remove();
|
|
144
|
-
hide.remove();
|
|
145
|
-
};
|
|
146
|
-
}, []);
|
|
147
|
-
|
|
148
|
-
return { height, progress };
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
export const useGradualKeyboardAnimation =
|
|
152
|
-
Platform.OS === "ios"
|
|
153
|
-
? useReanimatedKeyboardAnimationReplica
|
|
154
|
-
: useReanimatedKeyboardAnimation;
|