react-native-keyboard-controller 1.16.4 → 1.16.5
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/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt +1 -1
- package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardGestureAreaViewManager.kt +1 -1
- package/android/src/fabric/java/com/reactnativekeyboardcontroller/OverKeyboardViewManager.kt +1 -1
- package/android/src/turbo/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt +0 -2
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js +52 -1
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/commonjs/components/KeyboardAvoidingView/index.js +20 -2
- package/lib/commonjs/components/KeyboardAvoidingView/index.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/hooks.js +50 -0
- package/lib/module/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/index.js +21 -3
- package/lib/module/components/KeyboardAvoidingView/index.js.map +1 -1
- package/lib/typescript/components/KeyboardAvoidingView/hooks.d.ts +4 -0
- package/lib/typescript/components/KeyboardAvoidingView/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/KeyboardAvoidingView/hooks.ts +54 -0
- package/src/components/KeyboardAvoidingView/index.tsx +21 -6
package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt
CHANGED
|
@@ -18,7 +18,7 @@ class KeyboardControllerViewManager(
|
|
|
18
18
|
private val manager = KeyboardControllerViewManagerImpl(mReactContext)
|
|
19
19
|
private val mDelegate = KeyboardControllerViewManagerDelegate(this)
|
|
20
20
|
|
|
21
|
-
override fun getDelegate(): ViewManagerDelegate<ReactViewGroup
|
|
21
|
+
override fun getDelegate(): ViewManagerDelegate<ReactViewGroup> = mDelegate
|
|
22
22
|
|
|
23
23
|
override fun getName(): String = KeyboardControllerViewManagerImpl.NAME
|
|
24
24
|
|
package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardGestureAreaViewManager.kt
CHANGED
|
@@ -18,7 +18,7 @@ class KeyboardGestureAreaViewManager(
|
|
|
18
18
|
private val manager = KeyboardGestureAreaViewManagerImpl(mReactContext)
|
|
19
19
|
private val mDelegate = KeyboardGestureAreaManagerDelegate(this)
|
|
20
20
|
|
|
21
|
-
override fun getDelegate(): ViewManagerDelegate<ReactViewGroup
|
|
21
|
+
override fun getDelegate(): ViewManagerDelegate<ReactViewGroup> = mDelegate
|
|
22
22
|
|
|
23
23
|
override fun getName(): String = KeyboardGestureAreaViewManagerImpl.NAME
|
|
24
24
|
|
package/android/src/fabric/java/com/reactnativekeyboardcontroller/OverKeyboardViewManager.kt
CHANGED
|
@@ -19,7 +19,7 @@ class OverKeyboardViewManager(
|
|
|
19
19
|
private val manager = OverKeyboardViewManagerImpl(mReactContext)
|
|
20
20
|
private val mDelegate = OverKeyboardViewManagerDelegate(this)
|
|
21
21
|
|
|
22
|
-
override fun getDelegate(): ViewManagerDelegate<OverKeyboardHostView
|
|
22
|
+
override fun getDelegate(): ViewManagerDelegate<OverKeyboardHostView> = mDelegate
|
|
23
23
|
|
|
24
24
|
override fun getName(): String = OverKeyboardViewManagerImpl.NAME
|
|
25
25
|
|
package/android/src/turbo/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
package com.reactnativekeyboardcontroller
|
|
2
2
|
|
|
3
|
-
import androidx.annotation.Nullable
|
|
4
3
|
import com.facebook.react.TurboReactPackage
|
|
5
4
|
import com.facebook.react.bridge.NativeModule
|
|
6
5
|
import com.facebook.react.bridge.ReactApplicationContext
|
|
@@ -11,7 +10,6 @@ import com.reactnativekeyboardcontroller.modules.KeyboardControllerModuleImpl
|
|
|
11
10
|
import com.reactnativekeyboardcontroller.modules.StatusBarManagerCompatModuleImpl
|
|
12
11
|
|
|
13
12
|
class KeyboardControllerPackage : TurboReactPackage() {
|
|
14
|
-
@Nullable
|
|
15
13
|
override fun getModule(
|
|
16
14
|
name: String,
|
|
17
15
|
reactContext: ReactApplicationContext,
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useKeyboardAnimation = void 0;
|
|
6
|
+
exports.useTranslateAnimation = exports.useKeyboardAnimation = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
8
9
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
10
|
var _context = require("../../context");
|
|
10
11
|
var _hooks = require("../../hooks");
|
|
12
|
+
const OS = _reactNative.Platform.OS;
|
|
11
13
|
const useKeyboardAnimation = () => {
|
|
12
14
|
const {
|
|
13
15
|
reanimated
|
|
@@ -58,4 +60,53 @@ const useKeyboardAnimation = () => {
|
|
|
58
60
|
};
|
|
59
61
|
};
|
|
60
62
|
exports.useKeyboardAnimation = useKeyboardAnimation;
|
|
63
|
+
const useTranslateAnimation = () => {
|
|
64
|
+
const {
|
|
65
|
+
reanimated
|
|
66
|
+
} = (0, _context.useKeyboardContext)();
|
|
67
|
+
|
|
68
|
+
// calculate it only once on mount, to avoid `SharedValue` reads during a render
|
|
69
|
+
const [initialProgress] = (0, _react.useState)(() => reanimated.progress.value);
|
|
70
|
+
const padding = (0, _reactNativeReanimated.useSharedValue)(initialProgress);
|
|
71
|
+
const translate = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
72
|
+
(0, _hooks.useKeyboardHandler)({
|
|
73
|
+
onStart: e => {
|
|
74
|
+
"worklet";
|
|
75
|
+
|
|
76
|
+
if (e.height === 0) {
|
|
77
|
+
// eslint-disable-next-line react-compiler/react-compiler
|
|
78
|
+
padding.value = 0;
|
|
79
|
+
}
|
|
80
|
+
if (OS === "ios") {
|
|
81
|
+
translate.value = e.progress;
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
onMove: e => {
|
|
85
|
+
"worklet";
|
|
86
|
+
|
|
87
|
+
if (OS === "android") {
|
|
88
|
+
translate.value = e.progress;
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
onInteractive: e => {
|
|
92
|
+
"worklet";
|
|
93
|
+
|
|
94
|
+
padding.value = 0;
|
|
95
|
+
translate.value = e.progress;
|
|
96
|
+
},
|
|
97
|
+
onEnd: e => {
|
|
98
|
+
"worklet";
|
|
99
|
+
|
|
100
|
+
padding.value = e.progress;
|
|
101
|
+
if (OS === "android") {
|
|
102
|
+
translate.value = e.progress;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}, []);
|
|
106
|
+
return {
|
|
107
|
+
translate,
|
|
108
|
+
padding
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
exports.useTranslateAnimation = useTranslateAnimation;
|
|
61
112
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNativeReanimated","_context","_hooks","useKeyboardAnimation","reanimated","useKeyboardContext","initialHeight","useState","height","value","initialProgress","progress","heightWhenOpened","useSharedValue","isClosed","useKeyboardHandler","onStart","e","onMove","onInteractive","onEnd","exports"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nexport const useKeyboardAnimation = () => {\n const { reanimated } = useKeyboardContext();\n\n // calculate it only once on mount, to avoid `SharedValue` reads during a render\n const [initialHeight] = useState(() => -reanimated.height.value);\n const [initialProgress] = useState(() => reanimated.progress.value);\n\n const heightWhenOpened = useSharedValue(initialHeight);\n const height = useSharedValue(initialHeight);\n const progress = useSharedValue(initialProgress);\n const isClosed = useSharedValue(initialProgress === 0);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\n // eslint-disable-next-line react-compiler/react-compiler\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 onInteractive: (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.value = e.height;\n progress.value = e.progress;\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_context","_hooks","OS","Platform","useKeyboardAnimation","reanimated","useKeyboardContext","initialHeight","useState","height","value","initialProgress","progress","heightWhenOpened","useSharedValue","isClosed","useKeyboardHandler","onStart","e","onMove","onInteractive","onEnd","exports","useTranslateAnimation","padding","translate"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Platform } from \"react-native\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst OS = Platform.OS;\n\nexport const useKeyboardAnimation = () => {\n const { reanimated } = useKeyboardContext();\n\n // calculate it only once on mount, to avoid `SharedValue` reads during a render\n const [initialHeight] = useState(() => -reanimated.height.value);\n const [initialProgress] = useState(() => reanimated.progress.value);\n\n const heightWhenOpened = useSharedValue(initialHeight);\n const height = useSharedValue(initialHeight);\n const progress = useSharedValue(initialProgress);\n const isClosed = useSharedValue(initialProgress === 0);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\n // eslint-disable-next-line react-compiler/react-compiler\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 onInteractive: (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.value = e.height;\n progress.value = e.progress;\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\nexport const useTranslateAnimation = () => {\n const { reanimated } = useKeyboardContext();\n\n // calculate it only once on mount, to avoid `SharedValue` reads during a render\n const [initialProgress] = useState(() => reanimated.progress.value);\n\n const padding = useSharedValue(initialProgress);\n const translate = useSharedValue(0);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height === 0) {\n // eslint-disable-next-line react-compiler/react-compiler\n padding.value = 0;\n }\n if (OS === \"ios\") {\n translate.value = e.progress;\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n if (OS === \"android\") {\n translate.value = e.progress;\n }\n },\n onInteractive: (e) => {\n \"worklet\";\n\n padding.value = 0;\n\n translate.value = e.progress;\n },\n onEnd: (e) => {\n \"worklet\";\n\n padding.value = e.progress;\n\n if (OS === \"android\") {\n translate.value = e.progress;\n }\n },\n },\n [],\n );\n\n return { translate, padding };\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -35,6 +35,10 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
35
35
|
}, ref) => {
|
|
36
36
|
const initialFrame = (0, _reactNativeReanimated.useSharedValue)(null);
|
|
37
37
|
const frame = (0, _reactNativeReanimated.useDerivedValue)(() => initialFrame.value || defaultLayout);
|
|
38
|
+
const {
|
|
39
|
+
translate,
|
|
40
|
+
padding
|
|
41
|
+
} = (0, _hooks2.useTranslateAnimation)();
|
|
38
42
|
const keyboard = (0, _hooks2.useKeyboardAnimation)();
|
|
39
43
|
const {
|
|
40
44
|
height: screenHeight
|
|
@@ -45,6 +49,11 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
45
49
|
const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
|
|
46
50
|
return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
|
|
47
51
|
}, [screenHeight, keyboardVerticalOffset]);
|
|
52
|
+
const interpolateToRelativeKeyboardHeight = (0, _react.useCallback)(value => {
|
|
53
|
+
"worklet";
|
|
54
|
+
|
|
55
|
+
return (0, _reactNativeReanimated.interpolate)(value, [0, 1], [0, relativeKeyboardHeight()]);
|
|
56
|
+
}, [relativeKeyboardHeight]);
|
|
48
57
|
const onLayoutWorklet = (0, _react.useCallback)(layout => {
|
|
49
58
|
"worklet";
|
|
50
59
|
|
|
@@ -58,7 +67,9 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
58
67
|
onLayoutProps === null || onLayoutProps === void 0 || onLayoutProps(e);
|
|
59
68
|
}, [onLayoutProps]);
|
|
60
69
|
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
61
|
-
const bottom = (
|
|
70
|
+
const bottom = interpolateToRelativeKeyboardHeight(keyboard.progress.value);
|
|
71
|
+
const translateY = interpolateToRelativeKeyboardHeight(translate.value);
|
|
72
|
+
const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);
|
|
62
73
|
const bottomHeight = enabled ? bottom : 0;
|
|
63
74
|
switch (behavior) {
|
|
64
75
|
case "height":
|
|
@@ -77,10 +88,17 @@ const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
77
88
|
return {
|
|
78
89
|
paddingBottom: bottomHeight
|
|
79
90
|
};
|
|
91
|
+
case "translate-with-padding":
|
|
92
|
+
return {
|
|
93
|
+
paddingTop: paddingBottom,
|
|
94
|
+
transform: [{
|
|
95
|
+
translateY: -translateY
|
|
96
|
+
}]
|
|
97
|
+
};
|
|
80
98
|
default:
|
|
81
99
|
return {};
|
|
82
100
|
}
|
|
83
|
-
}, [behavior, enabled,
|
|
101
|
+
}, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
|
|
84
102
|
const isPositionBehavior = behavior === "position";
|
|
85
103
|
const containerStyle = isPositionBehavior ? contentContainerStyle : style;
|
|
86
104
|
const combinedStyles = (0, _react.useMemo)(() => [containerStyle, animatedStyle], [containerStyle, animatedStyle]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_hooks","_hooks2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","defaultLayout","x","y","width","height","KeyboardAvoidingView","forwardRef","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","useSharedValue","frame","useDerivedValue","value","keyboard","useKeyboardAnimation","screenHeight","useWindowDimensions","relativeKeyboardHeight","useCallback","keyboardY","heightWhenOpened","Math","max","onLayoutWorklet","layout","isClosed","runOnUI","nativeEvent","animatedStyle","useAnimatedStyle","bottom","interpolate","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles","useMemo","createElement","View","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport Reanimated, {\n interpolate,\n runOnUI,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport { useKeyboardAnimation } from \"./hooks\";\n\nimport type { LayoutRectangle, ViewProps } from \"react-native\";\n\nexport type KeyboardAvoidingViewBaseProps = {\n /**\n * Controls whether this `KeyboardAvoidingView` instance should take effect.\n * This is useful when more than one is on the screen. Defaults to true.\n */\n enabled?: boolean;\n\n /**\n * Distance between the top of the user screen and the React Native view. This\n * may be non-zero in some cases. Defaults to 0.\n */\n keyboardVerticalOffset?: number;\n} & ViewProps;\n\nexport type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &\n (\n | {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: \"position\";\n\n /**\n * Style of the content container when `behavior` is 'position'.\n */\n contentContainerStyle?: ViewProps[\"style\"];\n }\n | {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: \"height\" | \"padding\";\n\n /**\n * `contentContainerStyle` is not allowed for these behaviors.\n */\n contentContainerStyle?: never;\n }\n );\n\nconst defaultLayout: LayoutRectangle = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardAvoidingViewProps>\n>(\n (\n {\n behavior,\n children,\n contentContainerStyle,\n enabled = true,\n keyboardVerticalOffset = 0,\n style,\n onLayout: onLayoutProps,\n ...props\n },\n ref,\n ) => {\n const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n const keyboard = useKeyboardAnimation();\n const { height: screenHeight } = useWindowDimensions();\n\n const relativeKeyboardHeight = useCallback(() => {\n \"worklet\";\n\n const keyboardY =\n screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n }, [screenHeight, keyboardVerticalOffset]);\n\n const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {\n \"worklet\";\n\n if (keyboard.isClosed.value || initialFrame.value === null) {\n // eslint-disable-next-line react-compiler/react-compiler\n initialFrame.value = layout;\n }\n }, []);\n const onLayout = useCallback<NonNullable<ViewProps[\"onLayout\"]>>(\n (e) => {\n runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n onLayoutProps?.(e);\n },\n [onLayoutProps],\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n const bottom = interpolate(\n keyboard.progress.value,\n [0, 1],\n [0, relativeKeyboardHeight()],\n );\n const bottomHeight = enabled ? bottom : 0;\n\n switch (behavior) {\n case \"height\":\n if (!keyboard.isClosed.value) {\n return {\n height: frame.value.height - bottomHeight,\n flex: 0,\n };\n }\n\n return {};\n\n case \"position\":\n return { bottom: bottomHeight };\n\n case \"padding\":\n return { paddingBottom: bottomHeight };\n\n default:\n return {};\n }\n }, [behavior, enabled, relativeKeyboardHeight]);\n const isPositionBehavior = behavior === \"position\";\n const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n const combinedStyles = useMemo(\n () => [containerStyle, animatedStyle],\n [containerStyle, animatedStyle],\n );\n\n if (isPositionBehavior) {\n return (\n <View ref={ref} style={style} onLayout={onLayout} {...props}>\n <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n </View>\n );\n }\n\n return (\n <Reanimated.View\n ref={ref}\n style={combinedStyles}\n onLayout={onLayout}\n {...props}\n >\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_hooks","_hooks2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","defaultLayout","x","y","width","height","KeyboardAvoidingView","forwardRef","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","useSharedValue","frame","useDerivedValue","value","translate","padding","useTranslateAnimation","keyboard","useKeyboardAnimation","screenHeight","useWindowDimensions","relativeKeyboardHeight","useCallback","keyboardY","heightWhenOpened","Math","max","interpolateToRelativeKeyboardHeight","interpolate","onLayoutWorklet","layout","isClosed","runOnUI","nativeEvent","animatedStyle","useAnimatedStyle","bottom","progress","translateY","paddingBottom","bottomHeight","flex","paddingTop","transform","isPositionBehavior","containerStyle","combinedStyles","useMemo","createElement","View","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport Reanimated, {\n interpolate,\n runOnUI,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport { useKeyboardAnimation, useTranslateAnimation } from \"./hooks\";\n\nimport type { LayoutRectangle, ViewProps } from \"react-native\";\n\nexport type KeyboardAvoidingViewBaseProps = {\n /**\n * Controls whether this `KeyboardAvoidingView` instance should take effect.\n * This is useful when more than one is on the screen. Defaults to true.\n */\n enabled?: boolean;\n\n /**\n * Distance between the top of the user screen and the React Native view. This\n * may be non-zero in some cases. Defaults to 0.\n */\n keyboardVerticalOffset?: number;\n} & ViewProps;\n\nexport type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &\n (\n | {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: \"position\";\n\n /**\n * Style of the content container when `behavior` is 'position'.\n */\n contentContainerStyle?: ViewProps[\"style\"];\n }\n | {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: \"height\" | \"padding\" | \"translate-with-padding\";\n\n /**\n * `contentContainerStyle` is not allowed for these behaviors.\n */\n contentContainerStyle?: never;\n }\n );\n\nconst defaultLayout: LayoutRectangle = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardAvoidingViewProps>\n>(\n (\n {\n behavior,\n children,\n contentContainerStyle,\n enabled = true,\n keyboardVerticalOffset = 0,\n style,\n onLayout: onLayoutProps,\n ...props\n },\n ref,\n ) => {\n const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n const { translate, padding } = useTranslateAnimation();\n const keyboard = useKeyboardAnimation();\n const { height: screenHeight } = useWindowDimensions();\n\n const relativeKeyboardHeight = useCallback(() => {\n \"worklet\";\n\n const keyboardY =\n screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n }, [screenHeight, keyboardVerticalOffset]);\n const interpolateToRelativeKeyboardHeight = useCallback(\n (value: number) => {\n \"worklet\";\n\n return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);\n },\n [relativeKeyboardHeight],\n );\n\n const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {\n \"worklet\";\n\n if (keyboard.isClosed.value || initialFrame.value === null) {\n // eslint-disable-next-line react-compiler/react-compiler\n initialFrame.value = layout;\n }\n }, []);\n const onLayout = useCallback<NonNullable<ViewProps[\"onLayout\"]>>(\n (e) => {\n runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n onLayoutProps?.(e);\n },\n [onLayoutProps],\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n const bottom = interpolateToRelativeKeyboardHeight(\n keyboard.progress.value,\n );\n const translateY = interpolateToRelativeKeyboardHeight(translate.value);\n const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);\n const bottomHeight = enabled ? bottom : 0;\n\n switch (behavior) {\n case \"height\":\n if (!keyboard.isClosed.value) {\n return {\n height: frame.value.height - bottomHeight,\n flex: 0,\n };\n }\n\n return {};\n\n case \"position\":\n return { bottom: bottomHeight };\n\n case \"padding\":\n return { paddingBottom: bottomHeight };\n\n case \"translate-with-padding\":\n return {\n paddingTop: paddingBottom,\n transform: [{ translateY: -translateY }],\n };\n\n default:\n return {};\n }\n }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);\n const isPositionBehavior = behavior === \"position\";\n const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n const combinedStyles = useMemo(\n () => [containerStyle, animatedStyle],\n [containerStyle, animatedStyle],\n );\n\n if (isPositionBehavior) {\n return (\n <View ref={ref} style={style} onLayout={onLayout} {...props}>\n <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n </View>\n );\n }\n\n return (\n <Reanimated.View\n ref={ref}\n style={combinedStyles}\n onLayout={onLayout}\n {...props}\n >\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
|
+
import { Platform } from "react-native";
|
|
2
3
|
import { useSharedValue } from "react-native-reanimated";
|
|
3
4
|
import { useKeyboardContext } from "../../context";
|
|
4
5
|
import { useKeyboardHandler } from "../../hooks";
|
|
6
|
+
const OS = Platform.OS;
|
|
5
7
|
export const useKeyboardAnimation = () => {
|
|
6
8
|
const {
|
|
7
9
|
reanimated
|
|
@@ -51,4 +53,52 @@ export const useKeyboardAnimation = () => {
|
|
|
51
53
|
isClosed
|
|
52
54
|
};
|
|
53
55
|
};
|
|
56
|
+
export const useTranslateAnimation = () => {
|
|
57
|
+
const {
|
|
58
|
+
reanimated
|
|
59
|
+
} = useKeyboardContext();
|
|
60
|
+
|
|
61
|
+
// calculate it only once on mount, to avoid `SharedValue` reads during a render
|
|
62
|
+
const [initialProgress] = useState(() => reanimated.progress.value);
|
|
63
|
+
const padding = useSharedValue(initialProgress);
|
|
64
|
+
const translate = useSharedValue(0);
|
|
65
|
+
useKeyboardHandler({
|
|
66
|
+
onStart: e => {
|
|
67
|
+
"worklet";
|
|
68
|
+
|
|
69
|
+
if (e.height === 0) {
|
|
70
|
+
// eslint-disable-next-line react-compiler/react-compiler
|
|
71
|
+
padding.value = 0;
|
|
72
|
+
}
|
|
73
|
+
if (OS === "ios") {
|
|
74
|
+
translate.value = e.progress;
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
onMove: e => {
|
|
78
|
+
"worklet";
|
|
79
|
+
|
|
80
|
+
if (OS === "android") {
|
|
81
|
+
translate.value = e.progress;
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
onInteractive: e => {
|
|
85
|
+
"worklet";
|
|
86
|
+
|
|
87
|
+
padding.value = 0;
|
|
88
|
+
translate.value = e.progress;
|
|
89
|
+
},
|
|
90
|
+
onEnd: e => {
|
|
91
|
+
"worklet";
|
|
92
|
+
|
|
93
|
+
padding.value = e.progress;
|
|
94
|
+
if (OS === "android") {
|
|
95
|
+
translate.value = e.progress;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, []);
|
|
99
|
+
return {
|
|
100
|
+
translate,
|
|
101
|
+
padding
|
|
102
|
+
};
|
|
103
|
+
};
|
|
54
104
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useSharedValue","useKeyboardContext","useKeyboardHandler","useKeyboardAnimation","reanimated","initialHeight","height","value","initialProgress","progress","heightWhenOpened","isClosed","onStart","e","onMove","onInteractive","onEnd"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nexport const useKeyboardAnimation = () => {\n const { reanimated } = useKeyboardContext();\n\n // calculate it only once on mount, to avoid `SharedValue` reads during a render\n const [initialHeight] = useState(() => -reanimated.height.value);\n const [initialProgress] = useState(() => reanimated.progress.value);\n\n const heightWhenOpened = useSharedValue(initialHeight);\n const height = useSharedValue(initialHeight);\n const progress = useSharedValue(initialProgress);\n const isClosed = useSharedValue(initialProgress === 0);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\n // eslint-disable-next-line react-compiler/react-compiler\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 onInteractive: (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.value = e.height;\n progress.value = e.progress;\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAASC,kBAAkB,QAAQ,eAAe;AAClD,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAM;IAAEC;EAAW,CAAC,
|
|
1
|
+
{"version":3,"names":["useState","Platform","useSharedValue","useKeyboardContext","useKeyboardHandler","OS","useKeyboardAnimation","reanimated","initialHeight","height","value","initialProgress","progress","heightWhenOpened","isClosed","onStart","e","onMove","onInteractive","onEnd","useTranslateAnimation","padding","translate"],"sources":["hooks.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Platform } from \"react-native\";\nimport { useSharedValue } from \"react-native-reanimated\";\n\nimport { useKeyboardContext } from \"../../context\";\nimport { useKeyboardHandler } from \"../../hooks\";\n\nconst OS = Platform.OS;\n\nexport const useKeyboardAnimation = () => {\n const { reanimated } = useKeyboardContext();\n\n // calculate it only once on mount, to avoid `SharedValue` reads during a render\n const [initialHeight] = useState(() => -reanimated.height.value);\n const [initialProgress] = useState(() => reanimated.progress.value);\n\n const heightWhenOpened = useSharedValue(initialHeight);\n const height = useSharedValue(initialHeight);\n const progress = useSharedValue(initialProgress);\n const isClosed = useSharedValue(initialProgress === 0);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height > 0) {\n // eslint-disable-next-line react-compiler/react-compiler\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 onInteractive: (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.value = e.height;\n progress.value = e.progress;\n },\n },\n [],\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\nexport const useTranslateAnimation = () => {\n const { reanimated } = useKeyboardContext();\n\n // calculate it only once on mount, to avoid `SharedValue` reads during a render\n const [initialProgress] = useState(() => reanimated.progress.value);\n\n const padding = useSharedValue(initialProgress);\n const translate = useSharedValue(0);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n \"worklet\";\n\n if (e.height === 0) {\n // eslint-disable-next-line react-compiler/react-compiler\n padding.value = 0;\n }\n if (OS === \"ios\") {\n translate.value = e.progress;\n }\n },\n onMove: (e) => {\n \"worklet\";\n\n if (OS === \"android\") {\n translate.value = e.progress;\n }\n },\n onInteractive: (e) => {\n \"worklet\";\n\n padding.value = 0;\n\n translate.value = e.progress;\n },\n onEnd: (e) => {\n \"worklet\";\n\n padding.value = e.progress;\n\n if (OS === \"android\") {\n translate.value = e.progress;\n }\n },\n },\n [],\n );\n\n return { translate, padding };\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAASC,kBAAkB,QAAQ,eAAe;AAClD,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,MAAMC,EAAE,GAAGJ,QAAQ,CAACI,EAAE;AAEtB,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAM;IAAEC;EAAW,CAAC,GAAGJ,kBAAkB,CAAC,CAAC;;EAE3C;EACA,MAAM,CAACK,aAAa,CAAC,GAAGR,QAAQ,CAAC,MAAM,CAACO,UAAU,CAACE,MAAM,CAACC,KAAK,CAAC;EAChE,MAAM,CAACC,eAAe,CAAC,GAAGX,QAAQ,CAAC,MAAMO,UAAU,CAACK,QAAQ,CAACF,KAAK,CAAC;EAEnE,MAAMG,gBAAgB,GAAGX,cAAc,CAACM,aAAa,CAAC;EACtD,MAAMC,MAAM,GAAGP,cAAc,CAACM,aAAa,CAAC;EAC5C,MAAMI,QAAQ,GAAGV,cAAc,CAACS,eAAe,CAAC;EAChD,MAAMG,QAAQ,GAAGZ,cAAc,CAACS,eAAe,KAAK,CAAC,CAAC;EAEtDP,kBAAkB,CAChB;IACEW,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACP,MAAM,GAAG,CAAC,EAAE;QAChB;QACAK,QAAQ,CAACJ,KAAK,GAAG,KAAK;QACtBG,gBAAgB,CAACH,KAAK,GAAGM,CAAC,CAACP,MAAM;MACnC;IACF,CAAC;IACDQ,MAAM,EAAGD,CAAC,IAAK;MACb,SAAS;;MAETJ,QAAQ,CAACF,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGM,CAAC,CAACP,MAAM;IACzB,CAAC;IACDS,aAAa,EAAGF,CAAC,IAAK;MACpB,SAAS;;MAETJ,QAAQ,CAACF,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGM,CAAC,CAACP,MAAM;IACzB,CAAC;IACDU,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETF,QAAQ,CAACJ,KAAK,GAAGM,CAAC,CAACP,MAAM,KAAK,CAAC;MAE/BA,MAAM,CAACC,KAAK,GAAGM,CAAC,CAACP,MAAM;MACvBG,QAAQ,CAACF,KAAK,GAAGM,CAAC,CAACJ,QAAQ;IAC7B;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEH,MAAM;IAAEG,QAAQ;IAAEC,gBAAgB;IAAEC;EAAS,CAAC;AACzD,CAAC;AACD,OAAO,MAAMM,qBAAqB,GAAGA,CAAA,KAAM;EACzC,MAAM;IAAEb;EAAW,CAAC,GAAGJ,kBAAkB,CAAC,CAAC;;EAE3C;EACA,MAAM,CAACQ,eAAe,CAAC,GAAGX,QAAQ,CAAC,MAAMO,UAAU,CAACK,QAAQ,CAACF,KAAK,CAAC;EAEnE,MAAMW,OAAO,GAAGnB,cAAc,CAACS,eAAe,CAAC;EAC/C,MAAMW,SAAS,GAAGpB,cAAc,CAAC,CAAC,CAAC;EAEnCE,kBAAkB,CAChB;IACEW,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACP,MAAM,KAAK,CAAC,EAAE;QAClB;QACAY,OAAO,CAACX,KAAK,GAAG,CAAC;MACnB;MACA,IAAIL,EAAE,KAAK,KAAK,EAAE;QAChBiB,SAAS,CAACZ,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAC9B;IACF,CAAC;IACDK,MAAM,EAAGD,CAAC,IAAK;MACb,SAAS;;MAET,IAAIX,EAAE,KAAK,SAAS,EAAE;QACpBiB,SAAS,CAACZ,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAC9B;IACF,CAAC;IACDM,aAAa,EAAGF,CAAC,IAAK;MACpB,SAAS;;MAETK,OAAO,CAACX,KAAK,GAAG,CAAC;MAEjBY,SAAS,CAACZ,KAAK,GAAGM,CAAC,CAACJ,QAAQ;IAC9B,CAAC;IACDO,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETK,OAAO,CAACX,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAE1B,IAAIP,EAAE,KAAK,SAAS,EAAE;QACpBiB,SAAS,CAACZ,KAAK,GAAGM,CAAC,CAACJ,QAAQ;MAC9B;IACF;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEU,SAAS;IAAED;EAAQ,CAAC;AAC/B,CAAC","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@ import React, { forwardRef, useCallback, useMemo } from "react";
|
|
|
3
3
|
import { View } from "react-native";
|
|
4
4
|
import Reanimated, { interpolate, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue } from "react-native-reanimated";
|
|
5
5
|
import { useWindowDimensions } from "../../hooks";
|
|
6
|
-
import { useKeyboardAnimation } from "./hooks";
|
|
6
|
+
import { useKeyboardAnimation, useTranslateAnimation } from "./hooks";
|
|
7
7
|
const defaultLayout = {
|
|
8
8
|
x: 0,
|
|
9
9
|
y: 0,
|
|
@@ -27,6 +27,10 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
|
|
|
27
27
|
}, ref) => {
|
|
28
28
|
const initialFrame = useSharedValue(null);
|
|
29
29
|
const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
|
|
30
|
+
const {
|
|
31
|
+
translate,
|
|
32
|
+
padding
|
|
33
|
+
} = useTranslateAnimation();
|
|
30
34
|
const keyboard = useKeyboardAnimation();
|
|
31
35
|
const {
|
|
32
36
|
height: screenHeight
|
|
@@ -37,6 +41,11 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
|
|
|
37
41
|
const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
|
|
38
42
|
return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
|
|
39
43
|
}, [screenHeight, keyboardVerticalOffset]);
|
|
44
|
+
const interpolateToRelativeKeyboardHeight = useCallback(value => {
|
|
45
|
+
"worklet";
|
|
46
|
+
|
|
47
|
+
return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);
|
|
48
|
+
}, [relativeKeyboardHeight]);
|
|
40
49
|
const onLayoutWorklet = useCallback(layout => {
|
|
41
50
|
"worklet";
|
|
42
51
|
|
|
@@ -50,7 +59,9 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
|
|
|
50
59
|
onLayoutProps === null || onLayoutProps === void 0 || onLayoutProps(e);
|
|
51
60
|
}, [onLayoutProps]);
|
|
52
61
|
const animatedStyle = useAnimatedStyle(() => {
|
|
53
|
-
const bottom =
|
|
62
|
+
const bottom = interpolateToRelativeKeyboardHeight(keyboard.progress.value);
|
|
63
|
+
const translateY = interpolateToRelativeKeyboardHeight(translate.value);
|
|
64
|
+
const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);
|
|
54
65
|
const bottomHeight = enabled ? bottom : 0;
|
|
55
66
|
switch (behavior) {
|
|
56
67
|
case "height":
|
|
@@ -69,10 +80,17 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef(({
|
|
|
69
80
|
return {
|
|
70
81
|
paddingBottom: bottomHeight
|
|
71
82
|
};
|
|
83
|
+
case "translate-with-padding":
|
|
84
|
+
return {
|
|
85
|
+
paddingTop: paddingBottom,
|
|
86
|
+
transform: [{
|
|
87
|
+
translateY: -translateY
|
|
88
|
+
}]
|
|
89
|
+
};
|
|
72
90
|
default:
|
|
73
91
|
return {};
|
|
74
92
|
}
|
|
75
|
-
}, [behavior, enabled,
|
|
93
|
+
}, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
|
|
76
94
|
const isPositionBehavior = behavior === "position";
|
|
77
95
|
const containerStyle = isPositionBehavior ? contentContainerStyle : style;
|
|
78
96
|
const combinedStyles = useMemo(() => [containerStyle, animatedStyle], [containerStyle, animatedStyle]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useCallback","useMemo","View","Reanimated","interpolate","runOnUI","useAnimatedStyle","useDerivedValue","useSharedValue","useWindowDimensions","useKeyboardAnimation","defaultLayout","x","y","width","height","KeyboardAvoidingView","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","frame","value","keyboard","screenHeight","relativeKeyboardHeight","keyboardY","heightWhenOpened","Math","max","onLayoutWorklet","layout","isClosed","e","nativeEvent","animatedStyle","bottom","progress","bottomHeight","flex","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useMemo","View","Reanimated","interpolate","runOnUI","useAnimatedStyle","useDerivedValue","useSharedValue","useWindowDimensions","useKeyboardAnimation","useTranslateAnimation","defaultLayout","x","y","width","height","KeyboardAvoidingView","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","ref","initialFrame","frame","value","translate","padding","keyboard","screenHeight","relativeKeyboardHeight","keyboardY","heightWhenOpened","Math","max","interpolateToRelativeKeyboardHeight","onLayoutWorklet","layout","isClosed","e","nativeEvent","animatedStyle","bottom","progress","translateY","paddingBottom","bottomHeight","flex","paddingTop","transform","isPositionBehavior","containerStyle","combinedStyles","createElement","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { View } from \"react-native\";\nimport Reanimated, {\n interpolate,\n runOnUI,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport { useKeyboardAnimation, useTranslateAnimation } from \"./hooks\";\n\nimport type { LayoutRectangle, ViewProps } from \"react-native\";\n\nexport type KeyboardAvoidingViewBaseProps = {\n /**\n * Controls whether this `KeyboardAvoidingView` instance should take effect.\n * This is useful when more than one is on the screen. Defaults to true.\n */\n enabled?: boolean;\n\n /**\n * Distance between the top of the user screen and the React Native view. This\n * may be non-zero in some cases. Defaults to 0.\n */\n keyboardVerticalOffset?: number;\n} & ViewProps;\n\nexport type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &\n (\n | {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: \"position\";\n\n /**\n * Style of the content container when `behavior` is 'position'.\n */\n contentContainerStyle?: ViewProps[\"style\"];\n }\n | {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: \"height\" | \"padding\" | \"translate-with-padding\";\n\n /**\n * `contentContainerStyle` is not allowed for these behaviors.\n */\n contentContainerStyle?: never;\n }\n );\n\nconst defaultLayout: LayoutRectangle = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardAvoidingViewProps>\n>(\n (\n {\n behavior,\n children,\n contentContainerStyle,\n enabled = true,\n keyboardVerticalOffset = 0,\n style,\n onLayout: onLayoutProps,\n ...props\n },\n ref,\n ) => {\n const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n const { translate, padding } = useTranslateAnimation();\n const keyboard = useKeyboardAnimation();\n const { height: screenHeight } = useWindowDimensions();\n\n const relativeKeyboardHeight = useCallback(() => {\n \"worklet\";\n\n const keyboardY =\n screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n }, [screenHeight, keyboardVerticalOffset]);\n const interpolateToRelativeKeyboardHeight = useCallback(\n (value: number) => {\n \"worklet\";\n\n return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);\n },\n [relativeKeyboardHeight],\n );\n\n const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {\n \"worklet\";\n\n if (keyboard.isClosed.value || initialFrame.value === null) {\n // eslint-disable-next-line react-compiler/react-compiler\n initialFrame.value = layout;\n }\n }, []);\n const onLayout = useCallback<NonNullable<ViewProps[\"onLayout\"]>>(\n (e) => {\n runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n onLayoutProps?.(e);\n },\n [onLayoutProps],\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n const bottom = interpolateToRelativeKeyboardHeight(\n keyboard.progress.value,\n );\n const translateY = interpolateToRelativeKeyboardHeight(translate.value);\n const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);\n const bottomHeight = enabled ? bottom : 0;\n\n switch (behavior) {\n case \"height\":\n if (!keyboard.isClosed.value) {\n return {\n height: frame.value.height - bottomHeight,\n flex: 0,\n };\n }\n\n return {};\n\n case \"position\":\n return { bottom: bottomHeight };\n\n case \"padding\":\n return { paddingBottom: bottomHeight };\n\n case \"translate-with-padding\":\n return {\n paddingTop: paddingBottom,\n transform: [{ translateY: -translateY }],\n };\n\n default:\n return {};\n }\n }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);\n const isPositionBehavior = behavior === \"position\";\n const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n const combinedStyles = useMemo(\n () => [containerStyle, animatedStyle],\n [containerStyle, animatedStyle],\n );\n\n if (isPositionBehavior) {\n return (\n <View ref={ref} style={style} onLayout={onLayout} {...props}>\n <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n </View>\n );\n }\n\n return (\n <Reanimated.View\n ref={ref}\n style={combinedStyles}\n onLayout={onLayout}\n {...props}\n >\n {children}\n </Reanimated.View>\n );\n },\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,3 +4,7 @@ export declare const useKeyboardAnimation: () => {
|
|
|
4
4
|
heightWhenOpened: import("react-native-reanimated").SharedValue<number>;
|
|
5
5
|
isClosed: import("react-native-reanimated").SharedValue<boolean>;
|
|
6
6
|
};
|
|
7
|
+
export declare const useTranslateAnimation: () => {
|
|
8
|
+
translate: import("react-native-reanimated").SharedValue<number>;
|
|
9
|
+
padding: import("react-native-reanimated").SharedValue<number>;
|
|
10
|
+
};
|
|
@@ -26,7 +26,7 @@ export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps & ({
|
|
|
26
26
|
/**
|
|
27
27
|
* Specify how to react to the presence of the keyboard.
|
|
28
28
|
*/
|
|
29
|
-
behavior?: "height" | "padding";
|
|
29
|
+
behavior?: "height" | "padding" | "translate-with-padding";
|
|
30
30
|
/**
|
|
31
31
|
* `contentContainerStyle` is not allowed for these behaviors.
|
|
32
32
|
*/
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
|
+
import { Platform } from "react-native";
|
|
2
3
|
import { useSharedValue } from "react-native-reanimated";
|
|
3
4
|
|
|
4
5
|
import { useKeyboardContext } from "../../context";
|
|
5
6
|
import { useKeyboardHandler } from "../../hooks";
|
|
6
7
|
|
|
8
|
+
const OS = Platform.OS;
|
|
9
|
+
|
|
7
10
|
export const useKeyboardAnimation = () => {
|
|
8
11
|
const { reanimated } = useKeyboardContext();
|
|
9
12
|
|
|
@@ -53,3 +56,54 @@ export const useKeyboardAnimation = () => {
|
|
|
53
56
|
|
|
54
57
|
return { height, progress, heightWhenOpened, isClosed };
|
|
55
58
|
};
|
|
59
|
+
export const useTranslateAnimation = () => {
|
|
60
|
+
const { reanimated } = useKeyboardContext();
|
|
61
|
+
|
|
62
|
+
// calculate it only once on mount, to avoid `SharedValue` reads during a render
|
|
63
|
+
const [initialProgress] = useState(() => reanimated.progress.value);
|
|
64
|
+
|
|
65
|
+
const padding = useSharedValue(initialProgress);
|
|
66
|
+
const translate = useSharedValue(0);
|
|
67
|
+
|
|
68
|
+
useKeyboardHandler(
|
|
69
|
+
{
|
|
70
|
+
onStart: (e) => {
|
|
71
|
+
"worklet";
|
|
72
|
+
|
|
73
|
+
if (e.height === 0) {
|
|
74
|
+
// eslint-disable-next-line react-compiler/react-compiler
|
|
75
|
+
padding.value = 0;
|
|
76
|
+
}
|
|
77
|
+
if (OS === "ios") {
|
|
78
|
+
translate.value = e.progress;
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
onMove: (e) => {
|
|
82
|
+
"worklet";
|
|
83
|
+
|
|
84
|
+
if (OS === "android") {
|
|
85
|
+
translate.value = e.progress;
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
onInteractive: (e) => {
|
|
89
|
+
"worklet";
|
|
90
|
+
|
|
91
|
+
padding.value = 0;
|
|
92
|
+
|
|
93
|
+
translate.value = e.progress;
|
|
94
|
+
},
|
|
95
|
+
onEnd: (e) => {
|
|
96
|
+
"worklet";
|
|
97
|
+
|
|
98
|
+
padding.value = e.progress;
|
|
99
|
+
|
|
100
|
+
if (OS === "android") {
|
|
101
|
+
translate.value = e.progress;
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
[],
|
|
106
|
+
);
|
|
107
|
+
|
|
108
|
+
return { translate, padding };
|
|
109
|
+
};
|
|
@@ -10,7 +10,7 @@ import Reanimated, {
|
|
|
10
10
|
|
|
11
11
|
import { useWindowDimensions } from "../../hooks";
|
|
12
12
|
|
|
13
|
-
import { useKeyboardAnimation } from "./hooks";
|
|
13
|
+
import { useKeyboardAnimation, useTranslateAnimation } from "./hooks";
|
|
14
14
|
|
|
15
15
|
import type { LayoutRectangle, ViewProps } from "react-native";
|
|
16
16
|
|
|
@@ -45,7 +45,7 @@ export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &
|
|
|
45
45
|
/**
|
|
46
46
|
* Specify how to react to the presence of the keyboard.
|
|
47
47
|
*/
|
|
48
|
-
behavior?: "height" | "padding";
|
|
48
|
+
behavior?: "height" | "padding" | "translate-with-padding";
|
|
49
49
|
|
|
50
50
|
/**
|
|
51
51
|
* `contentContainerStyle` is not allowed for these behaviors.
|
|
@@ -85,6 +85,7 @@ const KeyboardAvoidingView = forwardRef<
|
|
|
85
85
|
const initialFrame = useSharedValue<LayoutRectangle | null>(null);
|
|
86
86
|
const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
|
|
87
87
|
|
|
88
|
+
const { translate, padding } = useTranslateAnimation();
|
|
88
89
|
const keyboard = useKeyboardAnimation();
|
|
89
90
|
const { height: screenHeight } = useWindowDimensions();
|
|
90
91
|
|
|
@@ -96,6 +97,14 @@ const KeyboardAvoidingView = forwardRef<
|
|
|
96
97
|
|
|
97
98
|
return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
|
|
98
99
|
}, [screenHeight, keyboardVerticalOffset]);
|
|
100
|
+
const interpolateToRelativeKeyboardHeight = useCallback(
|
|
101
|
+
(value: number) => {
|
|
102
|
+
"worklet";
|
|
103
|
+
|
|
104
|
+
return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);
|
|
105
|
+
},
|
|
106
|
+
[relativeKeyboardHeight],
|
|
107
|
+
);
|
|
99
108
|
|
|
100
109
|
const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
|
|
101
110
|
"worklet";
|
|
@@ -114,11 +123,11 @@ const KeyboardAvoidingView = forwardRef<
|
|
|
114
123
|
);
|
|
115
124
|
|
|
116
125
|
const animatedStyle = useAnimatedStyle(() => {
|
|
117
|
-
const bottom =
|
|
126
|
+
const bottom = interpolateToRelativeKeyboardHeight(
|
|
118
127
|
keyboard.progress.value,
|
|
119
|
-
[0, 1],
|
|
120
|
-
[0, relativeKeyboardHeight()],
|
|
121
128
|
);
|
|
129
|
+
const translateY = interpolateToRelativeKeyboardHeight(translate.value);
|
|
130
|
+
const paddingBottom = interpolateToRelativeKeyboardHeight(padding.value);
|
|
122
131
|
const bottomHeight = enabled ? bottom : 0;
|
|
123
132
|
|
|
124
133
|
switch (behavior) {
|
|
@@ -138,10 +147,16 @@ const KeyboardAvoidingView = forwardRef<
|
|
|
138
147
|
case "padding":
|
|
139
148
|
return { paddingBottom: bottomHeight };
|
|
140
149
|
|
|
150
|
+
case "translate-with-padding":
|
|
151
|
+
return {
|
|
152
|
+
paddingTop: paddingBottom,
|
|
153
|
+
transform: [{ translateY: -translateY }],
|
|
154
|
+
};
|
|
155
|
+
|
|
141
156
|
default:
|
|
142
157
|
return {};
|
|
143
158
|
}
|
|
144
|
-
}, [behavior, enabled,
|
|
159
|
+
}, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
|
|
145
160
|
const isPositionBehavior = behavior === "position";
|
|
146
161
|
const containerStyle = isPositionBehavior ? contentContainerStyle : style;
|
|
147
162
|
const combinedStyles = useMemo(
|