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.
@@ -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?> = mDelegate
21
+ override fun getDelegate(): ViewManagerDelegate<ReactViewGroup> = mDelegate
22
22
 
23
23
  override fun getName(): String = KeyboardControllerViewManagerImpl.NAME
24
24
 
@@ -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?> = mDelegate
21
+ override fun getDelegate(): ViewManagerDelegate<ReactViewGroup> = mDelegate
22
22
 
23
23
  override fun getName(): String = KeyboardGestureAreaViewManagerImpl.NAME
24
24
 
@@ -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?> = mDelegate
22
+ override fun getDelegate(): ViewManagerDelegate<OverKeyboardHostView> = mDelegate
23
23
 
24
24
  override fun getName(): String = OverKeyboardViewManagerImpl.NAME
25
25
 
@@ -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,sBAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAM;IAAEC;EAAW,CAAC,GAAG,IAAAC,2BAAkB,EAAC,CAAC;;EAE3C;EACA,MAAM,CAACC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM,CAACH,UAAU,CAACI,MAAM,CAACC,KAAK,CAAC;EAChE,MAAM,CAACC,eAAe,CAAC,GAAG,IAAAH,eAAQ,EAAC,MAAMH,UAAU,CAACO,QAAQ,CAACF,KAAK,CAAC;EAEnE,MAAMG,gBAAgB,GAAG,IAAAC,qCAAc,EAACP,aAAa,CAAC;EACtD,MAAME,MAAM,GAAG,IAAAK,qCAAc,EAACP,aAAa,CAAC;EAC5C,MAAMK,QAAQ,GAAG,IAAAE,qCAAc,EAACH,eAAe,CAAC;EAChD,MAAMI,QAAQ,GAAG,IAAAD,qCAAc,EAACH,eAAe,KAAK,CAAC,CAAC;EAEtD,IAAAK,yBAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACT,MAAM,GAAG,CAAC,EAAE;QAChB;QACAM,QAAQ,CAACL,KAAK,GAAG,KAAK;QACtBG,gBAAgB,CAACH,KAAK,GAAGQ,CAAC,CAACT,MAAM;MACnC;IACF,CAAC;IACDU,MAAM,EAAGD,CAAC,IAAK;MACb,SAAS;;MAETN,QAAQ,CAACF,KAAK,GAAGQ,CAAC,CAACN,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGQ,CAAC,CAACT,MAAM;IACzB,CAAC;IACDW,aAAa,EAAGF,CAAC,IAAK;MACpB,SAAS;;MAETN,QAAQ,CAACF,KAAK,GAAGQ,CAAC,CAACN,QAAQ;MAC3BH,MAAM,CAACC,KAAK,GAAGQ,CAAC,CAACT,MAAM;IACzB,CAAC;IACDY,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETH,QAAQ,CAACL,KAAK,GAAGQ,CAAC,CAACT,MAAM,KAAK,CAAC;MAE/BA,MAAM,CAACC,KAAK,GAAGQ,CAAC,CAACT,MAAM;MACvBG,QAAQ,CAACF,KAAK,GAAGQ,CAAC,CAACN,QAAQ;IAC7B;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEH,MAAM;IAAEG,QAAQ;IAAEC,gBAAgB;IAAEE;EAAS,CAAC;AACzD,CAAC;AAACO,OAAA,CAAAlB,oBAAA,GAAAA,oBAAA","ignoreList":[]}
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 = (0, _reactNativeReanimated.interpolate)(keyboard.progress.value, [0, 1], [0, relativeKeyboardHeight()]);
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, relativeKeyboardHeight]);
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,GAAGH,kBAAkB,CAAC,CAAC;;EAE3C;EACA,MAAM,CAACI,aAAa,CAAC,GAAGN,QAAQ,CAAC,MAAM,CAACK,UAAU,CAACE,MAAM,CAACC,KAAK,CAAC;EAChE,MAAM,CAACC,eAAe,CAAC,GAAGT,QAAQ,CAAC,MAAMK,UAAU,CAACK,QAAQ,CAACF,KAAK,CAAC;EAEnE,MAAMG,gBAAgB,GAAGV,cAAc,CAACK,aAAa,CAAC;EACtD,MAAMC,MAAM,GAAGN,cAAc,CAACK,aAAa,CAAC;EAC5C,MAAMI,QAAQ,GAAGT,cAAc,CAACQ,eAAe,CAAC;EAChD,MAAMG,QAAQ,GAAGX,cAAc,CAACQ,eAAe,KAAK,CAAC,CAAC;EAEtDN,kBAAkB,CAChB;IACEU,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","ignoreList":[]}
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":"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","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 = interpolate(keyboard.progress.value, [0, 1], [0, relativeKeyboardHeight()]);
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, relativeKeyboardHeight]);
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","paddingBottom","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 } 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","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,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-keyboard-controller",
3
- "version": "1.16.4",
3
+ "version": "1.16.5",
4
4
  "description": "Keyboard manager which works in identical way on both iOS and Android",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -1,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 = interpolate(
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, relativeKeyboardHeight]);
159
+ }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
145
160
  const isPositionBehavior = behavior === "position";
146
161
  const containerStyle = isPositionBehavior ? contentContainerStyle : style;
147
162
  const combinedStyles = useMemo(