react-native-keyboard-controller 1.7.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/android/gradle.properties +1 -1
- package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt +5 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/events/FocusedInputLayoutChangedEvent.kt +41 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/ThemedReactContext.kt +9 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt +7 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/FocusedInputLayoutObserver.kt +93 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/{KeyboardAnimationCallback.kt → listeners/KeyboardAnimationCallback.kt} +86 -55
- package/android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardControllerViewManagerImpl.kt +6 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt +120 -50
- package/android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt +5 -0
- package/ios/Extensions.swift +7 -0
- package/ios/KeyboardController.xcodeproj/project.pbxproj +41 -7
- package/ios/events/FocusedInputLayoutChangedEvent.h +16 -0
- package/ios/events/FocusedInputLayoutChangedEvent.m +75 -0
- package/ios/observers/FocusedInputLayoutObserver.swift +136 -0
- package/ios/{KeyboardControllerView.mm → views/KeyboardControllerView.mm} +54 -3
- package/ios/{KeyboardControllerViewManager.mm → views/KeyboardControllerViewManager.mm} +7 -0
- package/ios/{KeyboardControllerViewManager.swift → views/KeyboardControllerViewManager.swift} +25 -1
- package/jest/index.js +16 -0
- package/lib/commonjs/animated.js +34 -6
- package/lib/commonjs/animated.js.map +1 -1
- package/lib/commonjs/bindings.js.map +1 -1
- package/lib/commonjs/bindings.native.js.map +1 -1
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js +9 -1
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/commonjs/components/KeyboardAvoidingView/index.js +7 -4
- package/lib/commonjs/components/KeyboardAvoidingView/index.js.map +1 -1
- package/lib/commonjs/components/KeyboardStickyView/index.js +44 -0
- package/lib/commonjs/components/KeyboardStickyView/index.js.map +1 -0
- package/lib/commonjs/components/index.js +7 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/constants.js.map +1 -1
- package/lib/commonjs/context.js +9 -4
- package/lib/commonjs/context.js.map +1 -1
- package/lib/commonjs/hooks.js +16 -1
- package/lib/commonjs/hooks.js.map +1 -1
- package/lib/commonjs/index.js +8 -2
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/internal.js.map +1 -1
- package/lib/commonjs/monkey-patch.android.js +32 -20
- package/lib/commonjs/monkey-patch.android.js.map +1 -1
- package/lib/commonjs/monkey-patch.js +11 -1
- package/lib/commonjs/monkey-patch.js.map +1 -1
- package/lib/commonjs/reanimated.js +5 -2
- package/lib/commonjs/reanimated.js.map +1 -1
- package/lib/commonjs/reanimated.native.js +18 -1
- package/lib/commonjs/reanimated.native.js.map +1 -1
- package/lib/commonjs/replicas.js +1 -1
- package/lib/commonjs/replicas.js.map +1 -1
- package/lib/commonjs/specs/KeyboardControllerViewNativeComponent.js.map +1 -1
- package/lib/commonjs/specs/KeyboardGestureAreaNativeComponent.js.map +1 -1
- package/lib/commonjs/specs/NativeKeyboardController.js.map +1 -1
- package/lib/commonjs/specs/NativeStatusBarManagerCompat.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/module/animated.js +37 -9
- package/lib/module/animated.js.map +1 -1
- package/lib/module/bindings.js.map +1 -1
- package/lib/module/bindings.native.js +1 -1
- package/lib/module/bindings.native.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/hooks.js +9 -1
- package/lib/module/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/index.js +9 -6
- package/lib/module/components/KeyboardAvoidingView/index.js.map +1 -1
- package/lib/module/components/KeyboardStickyView/index.js +35 -0
- package/lib/module/components/KeyboardStickyView/index.js.map +1 -0
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/constants.js.map +1 -1
- package/lib/module/context.js +9 -4
- package/lib/module/context.js.map +1 -1
- package/lib/module/hooks.js +14 -1
- package/lib/module/hooks.js.map +1 -1
- package/lib/module/index.js +1 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/internal.js.map +1 -1
- package/lib/module/monkey-patch.android.js +26 -20
- package/lib/module/monkey-patch.android.js.map +1 -1
- package/lib/module/monkey-patch.js +3 -0
- package/lib/module/monkey-patch.js.map +1 -1
- package/lib/module/reanimated.js +3 -1
- package/lib/module/reanimated.js.map +1 -1
- package/lib/module/reanimated.native.js +16 -0
- package/lib/module/reanimated.native.js.map +1 -1
- package/lib/module/replicas.js +2 -2
- package/lib/module/replicas.js.map +1 -1
- package/lib/module/specs/KeyboardControllerViewNativeComponent.js.map +1 -1
- package/lib/module/specs/KeyboardGestureAreaNativeComponent.js.map +1 -1
- package/lib/module/specs/NativeKeyboardController.js.map +1 -1
- package/lib/module/specs/NativeStatusBarManagerCompat.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/typescript/animated.d.ts +8 -1
- package/lib/typescript/components/KeyboardAvoidingView/hooks.d.ts +1 -0
- package/lib/typescript/components/KeyboardAvoidingView/index.d.ts +2 -1
- package/lib/typescript/components/KeyboardStickyView/index.d.ts +20 -0
- package/lib/typescript/components/index.d.ts +1 -0
- package/lib/typescript/context.d.ts +6 -3
- package/lib/typescript/hooks.d.ts +9 -2
- package/lib/typescript/index.d.ts +1 -2
- package/lib/typescript/internal.d.ts +1 -1
- package/lib/typescript/monkey-patch.android.d.ts +2 -1
- package/lib/typescript/monkey-patch.d.ts +2 -0
- package/lib/typescript/reanimated.d.ts +2 -1
- package/lib/typescript/reanimated.native.d.ts +2 -1
- package/lib/typescript/specs/KeyboardControllerViewNativeComponent.d.ts +13 -0
- package/lib/typescript/types.d.ts +17 -0
- package/package.json +9 -28
- package/src/animated.tsx +53 -9
- package/src/bindings.native.ts +1 -1
- package/src/bindings.ts +3 -1
- package/src/components/KeyboardAvoidingView/hooks.ts +9 -1
- package/src/components/KeyboardAvoidingView/index.tsx +15 -13
- package/src/components/KeyboardStickyView/index.tsx +63 -0
- package/src/components/index.ts +1 -0
- package/src/constants.ts +2 -0
- package/src/context.ts +16 -5
- package/src/hooks.ts +16 -6
- package/src/index.ts +1 -3
- package/src/internal.ts +3 -1
- package/src/monkey-patch.android.ts +27 -21
- package/src/monkey-patch.ts +3 -0
- package/src/reanimated.native.ts +30 -1
- package/src/reanimated.ts +13 -2
- package/src/replicas.ts +2 -2
- package/src/specs/KeyboardControllerViewNativeComponent.ts +16 -1
- package/src/specs/KeyboardGestureAreaNativeComponent.ts +2 -1
- package/src/specs/NativeKeyboardController.ts +2 -1
- package/src/specs/NativeStatusBarManagerCompat.ts +2 -1
- package/src/types.ts +28 -1
- /package/ios/{KeyboardMoveEvent.h → events/KeyboardMoveEvent.h} +0 -0
- /package/ios/{KeyboardMoveEvent.m → events/KeyboardMoveEvent.m} +0 -0
- /package/ios/{KeyboardMovementObserver.swift → observers/KeyboardMovementObserver.swift} +0 -0
- /package/ios/{KeyboardControllerView.h → views/KeyboardControllerView.h} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useAnimatedKeyboardHandler","handlers","dependencies","context","doDependenciesDiffer","useHandler","useEvent","event","onKeyboardMoveStart","onKeyboardMove","onKeyboardMoveEnd","onKeyboardMoveInteractive","eventName","endsWith"],"sources":["reanimated.native.ts"],"sourcesContent":["import { useEvent, useHandler } from 'react-native-reanimated';\n\nimport type {
|
|
1
|
+
{"version":3,"names":["useAnimatedKeyboardHandler","handlers","dependencies","context","doDependenciesDiffer","useHandler","useEvent","event","onKeyboardMoveStart","onKeyboardMove","onKeyboardMoveEnd","onKeyboardMoveInteractive","eventName","endsWith","useFocusedInputHandler","onFocusedInputLayoutChanged"],"sources":["reanimated.native.ts"],"sourcesContent":["import { useEvent, useHandler } from 'react-native-reanimated';\n\nimport type {\n EventWithName,\n FocusedInputHandlerHook,\n FocusedInputLayoutChangedEvent,\n KeyboardHandlerHook,\n NativeEvent,\n} from './types';\n\nexport const useAnimatedKeyboardHandler: KeyboardHandlerHook<\n Record<string, unknown>,\n EventWithName<NativeEvent>\n> = (handlers, dependencies) => {\n const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);\n\n return useEvent(\n (event) => {\n 'worklet';\n const {\n onKeyboardMoveStart,\n onKeyboardMove,\n onKeyboardMoveEnd,\n onKeyboardMoveInteractive,\n } = handlers;\n\n if (\n onKeyboardMoveStart &&\n event.eventName.endsWith('onKeyboardMoveStart')\n ) {\n onKeyboardMoveStart(event, context);\n }\n\n if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {\n onKeyboardMove(event, context);\n }\n\n if (onKeyboardMoveEnd && event.eventName.endsWith('onKeyboardMoveEnd')) {\n onKeyboardMoveEnd(event, context);\n }\n\n if (\n onKeyboardMoveInteractive &&\n event.eventName.endsWith('onKeyboardMoveInteractive')\n ) {\n onKeyboardMoveInteractive(event, context);\n }\n },\n [\n 'onKeyboardMoveStart',\n 'onKeyboardMove',\n 'onKeyboardMoveEnd',\n 'onKeyboardMoveInteractive',\n ],\n doDependenciesDiffer\n );\n};\n\nexport const useFocusedInputHandler: FocusedInputHandlerHook<\n Record<string, unknown>,\n EventWithName<FocusedInputLayoutChangedEvent>\n> = (handlers, dependencies) => {\n const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);\n\n return useEvent(\n (event) => {\n 'worklet';\n const { onFocusedInputLayoutChanged } = handlers;\n\n if (\n onFocusedInputLayoutChanged &&\n event.eventName.endsWith('onFocusedInputLayoutChanged')\n ) {\n onFocusedInputLayoutChanged(event, context);\n }\n },\n ['onFocusedInputLayoutChanged'],\n doDependenciesDiffer\n );\n};\n"],"mappings":";;;;;;AAAA;AAUO,MAAMA,0BAGZ,GAAG,CAACC,QAAQ,EAAEC,YAAY,KAAK;EAC9B,MAAM;IAAEC,OAAO;IAAEC;EAAqB,CAAC,GAAG,IAAAC,iCAAU,EAACJ,QAAQ,EAAEC,YAAY,CAAC;EAE5E,OAAO,IAAAI,+BAAQ,EACZC,KAAK,IAAK;IACT,SAAS;;IACT,MAAM;MACJC,mBAAmB;MACnBC,cAAc;MACdC,iBAAiB;MACjBC;IACF,CAAC,GAAGV,QAAQ;IAEZ,IACEO,mBAAmB,IACnBD,KAAK,CAACK,SAAS,CAACC,QAAQ,CAAC,qBAAqB,CAAC,EAC/C;MACAL,mBAAmB,CAACD,KAAK,EAAEJ,OAAO,CAAC;IACrC;IAEA,IAAIM,cAAc,IAAIF,KAAK,CAACK,SAAS,CAACC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;MAChEJ,cAAc,CAACF,KAAK,EAAEJ,OAAO,CAAC;IAChC;IAEA,IAAIO,iBAAiB,IAAIH,KAAK,CAACK,SAAS,CAACC,QAAQ,CAAC,mBAAmB,CAAC,EAAE;MACtEH,iBAAiB,CAACH,KAAK,EAAEJ,OAAO,CAAC;IACnC;IAEA,IACEQ,yBAAyB,IACzBJ,KAAK,CAACK,SAAS,CAACC,QAAQ,CAAC,2BAA2B,CAAC,EACrD;MACAF,yBAAyB,CAACJ,KAAK,EAAEJ,OAAO,CAAC;IAC3C;EACF,CAAC,EACD,CACE,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,2BAA2B,CAC5B,EACDC,oBAAoB,CACrB;AACH,CAAC;AAAC;AAEK,MAAMU,sBAGZ,GAAG,CAACb,QAAQ,EAAEC,YAAY,KAAK;EAC9B,MAAM;IAAEC,OAAO;IAAEC;EAAqB,CAAC,GAAG,IAAAC,iCAAU,EAACJ,QAAQ,EAAEC,YAAY,CAAC;EAE5E,OAAO,IAAAI,+BAAQ,EACZC,KAAK,IAAK;IACT,SAAS;;IACT,MAAM;MAAEQ;IAA4B,CAAC,GAAGd,QAAQ;IAEhD,IACEc,2BAA2B,IAC3BR,KAAK,CAACK,SAAS,CAACC,QAAQ,CAAC,6BAA6B,CAAC,EACvD;MACAE,2BAA2B,CAACR,KAAK,EAAEJ,OAAO,CAAC;IAC7C;EACF,CAAC,EACD,CAAC,6BAA6B,CAAC,EAC/BC,oBAAoB,CACrB;AACH,CAAC;AAAC"}
|
package/lib/commonjs/replicas.js
CHANGED
|
@@ -7,9 +7,9 @@ exports.useReanimatedKeyboardAnimationReplica = exports.useKeyboardAnimationRepl
|
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
10
|
-
var _hooks = require("./hooks");
|
|
11
10
|
var _bindings = require("./bindings");
|
|
12
11
|
var _constants = require("./constants");
|
|
12
|
+
var _hooks = require("./hooks");
|
|
13
13
|
const availableOSEventType = _reactNative.Platform.OS === 'ios' ? 'Will' : 'Did';
|
|
14
14
|
|
|
15
15
|
// cubic-bezier(.17,.67,.34,.94)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["availableOSEventType","Platform","OS","defaultAndroidEasing","Easing","bezier","useKeyboardAnimationReplica","height","useRef","Animated","Value","progress","animation","useMemo","current","useEffect","KeyboardController","setInputMode","AndroidSoftInputModes","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode","listener","Keyboard","addListener","e","timing","toValue","endCoordinates","duration","easing","useNativeDriver","start","remove","IOS_SPRING_CONFIG","damping","stiffness","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","useReanimatedKeyboardAnimationReplica","useSharedValue","heightEvent","useDerivedValue","value","handler","useWorkletCallback","_height","useAnimatedReaction","_keyboardHeight","result","_previousResult","_previousKeyboardHeight","withSpring","show","runOnUI","hide","useGradualKeyboardAnimation","useReanimatedKeyboardAnimation"],"sources":["replicas.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"names":["availableOSEventType","Platform","OS","defaultAndroidEasing","Easing","bezier","useKeyboardAnimationReplica","height","useRef","Animated","Value","progress","animation","useMemo","current","useEffect","KeyboardController","setInputMode","AndroidSoftInputModes","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode","listener","Keyboard","addListener","e","timing","toValue","endCoordinates","duration","easing","useNativeDriver","start","remove","IOS_SPRING_CONFIG","damping","stiffness","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","useReanimatedKeyboardAnimationReplica","useSharedValue","heightEvent","useDerivedValue","value","handler","useWorkletCallback","_height","useAnimatedReaction","_keyboardHeight","result","_previousResult","_previousKeyboardHeight","withSpring","show","runOnUI","hide","useGradualKeyboardAnimation","useReanimatedKeyboardAnimation"],"sources":["replicas.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { Animated, Easing, Keyboard, Platform } from 'react-native';\nimport {\n runOnUI,\n useAnimatedReaction,\n useDerivedValue,\n useSharedValue,\n useWorkletCallback,\n withSpring,\n} from 'react-native-reanimated';\n\nimport { KeyboardController } from './bindings';\nimport { AndroidSoftInputModes } from './constants';\nimport { useReanimatedKeyboardAnimation } from './hooks';\n\nconst availableOSEventType = Platform.OS === 'ios' ? 'Will' : 'Did';\n\n// cubic-bezier(.17,.67,.34,.94)\nexport const defaultAndroidEasing = Easing.bezier(0.4, 0.0, 0.2, 1);\ntype KeyboardAnimation = {\n progress: Animated.Value;\n height: Animated.Value;\n};\n\n/**\n * An experimental implementation of tracing keyboard appearance.\n * Switch an input mode to adjust resize mode. In this case all did* events\n * are triggering before keyboard appears, and using some approximations\n * it tries to mimicries a native transition.\n *\n * @returns {Animated.Value}\n */\nexport const useKeyboardAnimationReplica = (): KeyboardAnimation => {\n const height = useRef(new Animated.Value(0));\n const progress = useRef(new Animated.Value(0));\n const animation = useMemo(\n () => ({\n height: height.current,\n progress: progress.current,\n }),\n []\n );\n\n useEffect(() => {\n KeyboardController.setInputMode(\n AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE\n );\n\n return () => KeyboardController.setDefaultMode();\n }, []);\n useEffect(() => {\n const listener = Keyboard.addListener(\n `keyboard${availableOSEventType}Show`,\n (e) => {\n Animated.timing(height.current, {\n toValue: -e.endCoordinates.height,\n duration: e.duration !== 0 ? e.duration : 300,\n easing: Easing.bezier(0.4, 0.0, 0.2, 1),\n useNativeDriver: true,\n }).start();\n\n return () => listener.remove();\n }\n );\n }, []);\n useEffect(() => {\n const listener = Keyboard.addListener(\n `keyboard${availableOSEventType}Hide`,\n (e) => {\n Animated.timing(height.current, {\n toValue: 0,\n duration: e.duration !== 0 ? e.duration : 300,\n easing: Easing.bezier(0.4, 0.0, 0.2, 1),\n useNativeDriver: true,\n }).start();\n\n return () => listener.remove();\n }\n );\n }, []);\n\n return animation;\n};\n\nconst IOS_SPRING_CONFIG = {\n damping: 500,\n stiffness: 1000,\n mass: 3,\n overshootClamping: true,\n restDisplacementThreshold: 10,\n restSpeedThreshold: 10,\n};\n\n/**\n * A close replica to native iOS keyboard animation. The problem is that\n * iOS (unlike Android) can not fire events for each keyboard frame movement.\n * As a result we can not get gradual values (for example, for progress it always\n * will be 1 or 0). So if you want to rely on gradual values you will need to use\n * this replica.\n *\n * The transition is hardcoded and may vary from one to another OS versions. But it\n * seems like last time it has been changed in iOS 7. Since RN supports at least iOS\n * 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS\n * versions, then this implementation should be revisited and reflect necessary changes.\n *\n * @returns {height, progress} - animated values\n */\nexport const useReanimatedKeyboardAnimationReplica = () => {\n const height = useSharedValue(0);\n const heightEvent = useSharedValue(0);\n\n const progress = useDerivedValue(() => height.value / heightEvent.value);\n\n const handler = useWorkletCallback((_height: number) => {\n heightEvent.value = _height;\n }, []);\n\n useAnimatedReaction(\n () => ({\n _keyboardHeight: heightEvent.value,\n }),\n (result, _previousResult) => {\n const { _keyboardHeight } = result;\n const _previousKeyboardHeight = _previousResult?._keyboardHeight;\n\n if (_keyboardHeight !== _previousKeyboardHeight) {\n height.value = withSpring(_keyboardHeight, IOS_SPRING_CONFIG);\n }\n },\n []\n );\n\n useEffect(() => {\n const show = Keyboard.addListener('keyboardWillShow', (e) => {\n runOnUI(handler)(-e.endCoordinates.height);\n });\n const hide = Keyboard.addListener('keyboardWillHide', () => {\n runOnUI(handler)(0);\n });\n\n return () => {\n show.remove();\n hide.remove();\n };\n }, []);\n\n return { height, progress };\n};\n\nexport const useGradualKeyboardAnimation =\n Platform.OS === 'ios'\n ? useReanimatedKeyboardAnimationReplica\n : useReanimatedKeyboardAnimation;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["codegenNativeComponent"],"sources":["KeyboardControllerViewNativeComponent.ts"],"sourcesContent":["import type { HostComponent } from 'react-native';\nimport type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';\nimport type {\n DirectEventHandler,\n Double,\n Int32,\n} from 'react-native/Libraries/Types/CodegenTypes';\
|
|
1
|
+
{"version":3,"names":["codegenNativeComponent"],"sources":["KeyboardControllerViewNativeComponent.ts"],"sourcesContent":["import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';\n\nimport type { HostComponent } from 'react-native';\nimport type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';\nimport type {\n DirectEventHandler,\n Double,\n Int32,\n} from 'react-native/Libraries/Types/CodegenTypes';\n\ntype KeyboardMoveEvent = Readonly<{\n height: Double;\n progress: Double;\n duration: Int32;\n target: Int32;\n}>;\n\ntype FocusedInputLayoutChangedEvent = Readonly<{\n target: Int32;\n layout: {\n x: Double;\n y: Double;\n width: Double;\n height: Double;\n absoluteX: Double;\n absoluteY: Double;\n };\n}>;\n\nexport interface NativeProps extends ViewProps {\n // props\n enabled?: boolean;\n statusBarTranslucent?: boolean;\n navigationBarTranslucent?: boolean;\n // callbacks\n onKeyboardMoveStart?: DirectEventHandler<KeyboardMoveEvent>;\n onKeyboardMove?: DirectEventHandler<KeyboardMoveEvent>;\n onKeyboardMoveEnd?: DirectEventHandler<KeyboardMoveEvent>;\n onKeyboardMoveInteractive?: DirectEventHandler<KeyboardMoveEvent>;\n onFocusedInputLayoutChanged?: DirectEventHandler<FocusedInputLayoutChangedEvent>;\n}\n\nexport default codegenNativeComponent<NativeProps>(\n 'KeyboardControllerView'\n) as HostComponent<NativeProps>;\n"],"mappings":";;;;;;AAAA;AAA6F;AAAA,eA0C9E,IAAAA,+BAAsB,EACnC,wBAAwB,CACzB;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["codegenNativeComponent","excludedPlatforms"],"sources":["KeyboardGestureAreaNativeComponent.ts"],"sourcesContent":["import type { HostComponent } from 'react-native';\nimport type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';\nimport type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';\
|
|
1
|
+
{"version":3,"names":["codegenNativeComponent","excludedPlatforms"],"sources":["KeyboardGestureAreaNativeComponent.ts"],"sourcesContent":["import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';\n\nimport type { HostComponent } from 'react-native';\nimport type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';\nimport type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';\n\nexport interface NativeProps extends ViewProps {\n interpolator?: WithDefault<'linear' | 'ios', 'linear'>;\n showOnSwipeUp?: boolean;\n enableSwipeToDismiss?: boolean;\n}\n\nexport default codegenNativeComponent<NativeProps>('KeyboardGestureArea', {\n excludedPlatforms: ['iOS'],\n}) as HostComponent<NativeProps>;\n"],"mappings":";;;;;;AAAA;AAA6F;AAAA,eAY9E,IAAAA,+BAAsB,EAAc,qBAAqB,EAAE;EACxEC,iBAAiB,EAAE,CAAC,KAAK;AAC3B,CAAC,CAAC;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TurboModuleRegistry","get"],"sources":["NativeKeyboardController.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"names":["TurboModuleRegistry","get"],"sources":["NativeKeyboardController.ts"],"sourcesContent":["import { TurboModuleRegistry } from 'react-native';\n\nimport type { TurboModule } from 'react-native';\n\nexport interface Spec extends TurboModule {\n readonly getConstants: () => {};\n\n // methods\n setInputMode(mode: number): void;\n setDefaultMode(): void;\n\n // event emitter\n addListener: (eventName: string) => void;\n removeListeners: (count: number) => void;\n}\n\nexport default TurboModuleRegistry.get<Spec>('KeyboardController');\n"],"mappings":";;;;;;AAAA;AAAmD,eAgBpCA,gCAAmB,CAACC,GAAG,CAAO,oBAAoB,CAAC;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TurboModuleRegistry","get"],"sources":["NativeStatusBarManagerCompat.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"names":["TurboModuleRegistry","get"],"sources":["NativeStatusBarManagerCompat.ts"],"sourcesContent":["import { TurboModuleRegistry } from 'react-native';\n\nimport type { TurboModule } from 'react-native';\n\nexport interface Spec extends TurboModule {\n readonly getConstants: () => {};\n\n setHidden(hidden: boolean): void;\n setColor(color: number, animated: boolean): void;\n setTranslucent(translucent: boolean): void;\n setStyle(style: string): void;\n}\n\nexport default TurboModuleRegistry.get<Spec>('StatusBarManagerCompat');\n"],"mappings":";;;;;;AAAA;AAAmD,eAapCA,gCAAmB,CAACC,GAAG,CAAO,wBAAwB,CAAC;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type {\n EmitterSubscription,\n NativeSyntheticEvent,\n ViewProps,\n} from 'react-native';\n\n// DirectEventHandler events declaration\nexport type NativeEvent = {\n progress: number;\n height: number;\n duration: number;\n target: number;\n};\nexport type EventWithName<T> = {\n eventName: string;\n} & T;\n\n// native View/Module declarations\nexport type KeyboardControllerProps = {\n onKeyboardMoveStart?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onKeyboardMove?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onKeyboardMoveEnd?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onKeyboardMoveInteractive?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n // fake
|
|
1
|
+
{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type {\n EmitterSubscription,\n NativeSyntheticEvent,\n ViewProps,\n} from 'react-native';\n\n// DirectEventHandler events declaration\nexport type NativeEvent = {\n progress: number;\n height: number;\n duration: number;\n target: number;\n};\nexport type FocusedInputLayoutChangedEvent = {\n target: number;\n layout: {\n x: number;\n y: number;\n width: number;\n height: number;\n absoluteX: number;\n absoluteY: number;\n };\n};\nexport type EventWithName<T> = {\n eventName: string;\n} & T;\n\n// native View/Module declarations\nexport type KeyboardControllerProps = {\n enabled?: boolean;\n onKeyboardMoveStart?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onKeyboardMove?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onKeyboardMoveEnd?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onKeyboardMoveInteractive?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onFocusedInputLayoutChanged?: (\n e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>\n ) => void;\n // fake props used to activate reanimated bindings\n onKeyboardMoveReanimated?: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n onFocusedInputLayoutChangedReanimated?: (\n e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>\n ) => void;\n statusBarTranslucent?: boolean;\n navigationBarTranslucent?: boolean;\n} & ViewProps;\n\nexport type KeyboardGestureAreaProps = {\n interpolator: 'ios' | 'linear';\n /**\n * Whether to allow to show a keyboard from dismissed state by swipe up.\n * Default to `false`.\n */\n showOnSwipeUp?: boolean;\n /**\n * Whether to allow to control a keyboard by gestures. The strategy how\n * it should be controlled is determined by `interpolator` property.\n * Defaults to `true`.\n */\n enableSwipeToDismiss?: boolean;\n} & ViewProps;\n\nexport type KeyboardControllerModule = {\n // android only\n setDefaultMode: () => void;\n setInputMode: (mode: number) => void;\n // native event module stuff\n addListener: (eventName: string) => void;\n removeListeners: (count: number) => void;\n};\n\n// Event module declarations\nexport type KeyboardControllerEvents =\n | 'keyboardWillShow'\n | 'keyboardDidShow'\n | 'keyboardWillHide'\n | 'keyboardDidHide';\nexport type KeyboardEventData = {\n height: number;\n duration: number;\n timestamp: number;\n target: number;\n};\nexport type KeyboardEventsModule = {\n addListener: (\n name: KeyboardControllerEvents,\n cb: (e: KeyboardEventData) => void\n ) => EmitterSubscription;\n};\n\n// reanimated hook declaration\nexport type KeyboardHandlerHook<TContext, Event> = (\n handlers: {\n onKeyboardMoveStart?: (e: NativeEvent, context: TContext) => void;\n onKeyboardMove?: (e: NativeEvent, context: TContext) => void;\n onKeyboardMoveEnd?: (e: NativeEvent, context: TContext) => void;\n onKeyboardMoveInteractive?: (e: NativeEvent, context: TContext) => void;\n },\n dependencies?: unknown[]\n) => (e: NativeSyntheticEvent<Event>) => void;\nexport type FocusedInputHandlerHook<TContext, Event> = (\n handlers: {\n onFocusedInputLayoutChanged?: (\n e: FocusedInputLayoutChangedEvent,\n context: TContext\n ) => void;\n },\n dependencies?: unknown[]\n) => (e: NativeSyntheticEvent<Event>) => void;\n\n// package types\nexport type Handlers<T> = Record<string, T | undefined>;\nexport type KeyboardHandler = Partial<{\n onStart: (e: NativeEvent) => void;\n onMove: (e: NativeEvent) => void;\n onEnd: (e: NativeEvent) => void;\n onInteractive: (e: NativeEvent) => void;\n}>;\nexport type KeyboardHandlers = Handlers<KeyboardHandler>;\n"],"mappings":""}
|
package/lib/module/animated.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
1
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import { Animated, Platform, StyleSheet } from 'react-native';
|
|
3
3
|
import Reanimated, { useSharedValue } from 'react-native-reanimated';
|
|
4
|
-
import { KeyboardContext } from './context';
|
|
5
|
-
import { useSharedHandlers, useAnimatedValue } from './internal';
|
|
6
4
|
import { KeyboardControllerView } from './bindings';
|
|
7
|
-
import {
|
|
5
|
+
import { KeyboardContext } from './context';
|
|
6
|
+
import { useAnimatedValue, useSharedHandlers } from './internal';
|
|
7
|
+
import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
|
|
8
|
+
import { useAnimatedKeyboardHandler, useFocusedInputHandler } from './reanimated';
|
|
8
9
|
const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(Animated.createAnimatedComponent(KeyboardControllerView));
|
|
9
10
|
const styles = StyleSheet.create({
|
|
10
11
|
container: {
|
|
@@ -19,20 +20,24 @@ export const KeyboardProvider = _ref => {
|
|
|
19
20
|
let {
|
|
20
21
|
children,
|
|
21
22
|
statusBarTranslucent,
|
|
22
|
-
navigationBarTranslucent
|
|
23
|
+
navigationBarTranslucent,
|
|
24
|
+
enabled: initiallyEnabled = true
|
|
23
25
|
} = _ref;
|
|
26
|
+
const [enabled, setEnabled] = useState(initiallyEnabled);
|
|
24
27
|
// animated values
|
|
25
28
|
const progress = useAnimatedValue(0);
|
|
26
29
|
const height = useAnimatedValue(0);
|
|
27
30
|
// shared values
|
|
28
31
|
const progressSV = useSharedValue(0);
|
|
29
32
|
const heightSV = useSharedValue(0);
|
|
33
|
+
const layout = useSharedValue(null);
|
|
30
34
|
const {
|
|
31
35
|
setHandlers,
|
|
32
36
|
broadcast
|
|
33
37
|
} = useSharedHandlers();
|
|
34
38
|
// memo
|
|
35
39
|
const context = useMemo(() => ({
|
|
40
|
+
enabled,
|
|
36
41
|
animated: {
|
|
37
42
|
progress: progress,
|
|
38
43
|
height: Animated.multiply(height, -1)
|
|
@@ -41,8 +46,10 @@ export const KeyboardProvider = _ref => {
|
|
|
41
46
|
progress: progressSV,
|
|
42
47
|
height: heightSV
|
|
43
48
|
},
|
|
44
|
-
|
|
45
|
-
|
|
49
|
+
layout,
|
|
50
|
+
setHandlers,
|
|
51
|
+
setEnabled
|
|
52
|
+
}), [enabled]);
|
|
46
53
|
const style = useMemo(() => [styles.hidden, {
|
|
47
54
|
transform: [{
|
|
48
55
|
translateX: height
|
|
@@ -67,7 +74,7 @@ export const KeyboardProvider = _ref => {
|
|
|
67
74
|
heightSV.value = -event.height;
|
|
68
75
|
}
|
|
69
76
|
};
|
|
70
|
-
const
|
|
77
|
+
const keyboardHandler = useAnimatedKeyboardHandler({
|
|
71
78
|
onKeyboardMoveStart: event => {
|
|
72
79
|
'worklet';
|
|
73
80
|
|
|
@@ -92,13 +99,34 @@ export const KeyboardProvider = _ref => {
|
|
|
92
99
|
broadcast('onInteractive', event);
|
|
93
100
|
}
|
|
94
101
|
}, []);
|
|
102
|
+
const inputHandler = useFocusedInputHandler({
|
|
103
|
+
onFocusedInputLayoutChanged: e => {
|
|
104
|
+
'worklet';
|
|
105
|
+
|
|
106
|
+
if (e.target !== -1) {
|
|
107
|
+
layout.value = e;
|
|
108
|
+
} else {
|
|
109
|
+
layout.value = null;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}, []);
|
|
113
|
+
// effects
|
|
114
|
+
useEffect(() => {
|
|
115
|
+
if (enabled) {
|
|
116
|
+
applyMonkeyPatch();
|
|
117
|
+
} else {
|
|
118
|
+
revertMonkeyPatch();
|
|
119
|
+
}
|
|
120
|
+
}, [enabled]);
|
|
95
121
|
return /*#__PURE__*/React.createElement(KeyboardContext.Provider, {
|
|
96
122
|
value: context
|
|
97
123
|
}, /*#__PURE__*/React.createElement(KeyboardControllerViewAnimated, {
|
|
98
|
-
|
|
124
|
+
enabled: enabled,
|
|
125
|
+
onKeyboardMoveReanimated: keyboardHandler,
|
|
99
126
|
onKeyboardMoveStart: Platform.OS === 'ios' ? onKeyboardMove : undefined,
|
|
100
127
|
onKeyboardMove: Platform.OS === 'android' ? onKeyboardMove : undefined,
|
|
101
128
|
onKeyboardMoveInteractive: onKeyboardMove,
|
|
129
|
+
onFocusedInputLayoutChangedReanimated: inputHandler,
|
|
102
130
|
navigationBarTranslucent: navigationBarTranslucent,
|
|
103
131
|
statusBarTranslucent: statusBarTranslucent
|
|
104
132
|
// @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","Animated","Platform","StyleSheet","Reanimated","useSharedValue","KeyboardContext","useSharedHandlers","useAnimatedValue","KeyboardControllerView","useAnimatedKeyboardHandler","KeyboardControllerViewAnimated","createAnimatedComponent","styles","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","navigationBarTranslucent","progress","height","progressSV","heightSV","setHandlers","broadcast","context","animated","multiply","reanimated","style","transform","translateX","translateY","onKeyboardMove","event","nativeEvent","useNativeDriver","updateSharedValues","platforms","includes","OS","value","handler","onKeyboardMoveStart","onKeyboardMoveEnd","onKeyboardMoveInteractive","undefined"],"sources":["animated.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';\nimport Reanimated, { useSharedValue } from 'react-native-reanimated';\n\nimport { KeyboardContext } from './context';\nimport { useSharedHandlers, useAnimatedValue } from './internal';\nimport { KeyboardControllerView } from './bindings';\nimport { useAnimatedKeyboardHandler } from './reanimated';\n\nimport type {\n KeyboardControllerProps,\n KeyboardHandler,\n NativeEvent,\n} from './types';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nconst styles = StyleSheet.create<Styles>({\n container: {\n flex: 1,\n },\n hidden: {\n display: 'none',\n position: 'absolute',\n },\n});\n\ntype KeyboardProviderProps = {\n children: React.ReactNode;\n /**\n * Set the value to `true`, if you use translucent status bar on Android.\n * If you already control status bar translucency via `react-native-screens`\n * or `StatusBar` component from `react-native`, you can ignore it.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14\n * @platform android\n */\n statusBarTranslucent?: boolean;\n /**\n * Set the value to `true`, if you use translucent navigation bar on Android.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119\n * @platform android\n */\n navigationBarTranslucent?: boolean;\n};\n\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n navigationBarTranslucent,\n}: KeyboardProviderProps) => {\n // animated values\n const progress = useAnimatedValue(0);\n const height = useAnimatedValue(0);\n // shared values\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();\n // memo\n const context = useMemo(\n () => ({\n animated: { progress: progress, height: Animated.multiply(height, -1) },\n reanimated: { progress: progressSV, height: heightSV },\n setHandlers,\n }),\n []\n );\n const style = useMemo(\n () => [\n styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ],\n []\n );\n const onKeyboardMove = useMemo(\n () =>\n Animated.event(\n [\n {\n nativeEvent: {\n progress,\n height,\n },\n },\n ],\n { useNativeDriver: true }\n ),\n []\n );\n // handlers\n const updateSharedValues = (event: NativeEvent, platforms: string[]) => {\n 'worklet';\n\n if (platforms.includes(Platform.OS)) {\n progressSV.value = event.progress;\n heightSV.value = -event.height;\n }\n };\n const handler = useAnimatedKeyboardHandler(\n {\n onKeyboardMoveStart: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onStart', event);\n updateSharedValues(event, ['ios']);\n },\n onKeyboardMove: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onMove', event);\n updateSharedValues(event, ['android']);\n },\n onKeyboardMoveEnd: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onEnd', event);\n },\n onKeyboardMoveInteractive: (event: NativeEvent) => {\n 'worklet';\n\n updateSharedValues(event, ['android', 'ios']);\n broadcast('onInteractive', event);\n },\n },\n []\n );\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n onKeyboardMoveReanimated={handler}\n onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}\n onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}\n onKeyboardMoveInteractive={onKeyboardMove}\n navigationBarTranslucent={navigationBarTranslucent}\n statusBarTranslucent={statusBarTranslucent}\n // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923\n style={styles.container}\n >\n {children}\n </KeyboardControllerViewAnimated>\n <Animated.View\n // we are using this small hack, because if the component (where\n // animated value has been used) is unmounted, then animation will\n // stop receiving events (seems like it's react-native optimization).\n // So we need to keep a reference to the animated value, to keep it's\n // always mounted (keep a reference to an animated value).\n //\n // To test why it's needed, try to open screen which consumes Animated.Value\n // then close it and open it again (for example 'Animated transition').\n style={style}\n />\n </KeyboardContext.Provider>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","useEffect","useMemo","useState","Animated","Platform","StyleSheet","Reanimated","useSharedValue","KeyboardControllerView","KeyboardContext","useAnimatedValue","useSharedHandlers","applyMonkeyPatch","revertMonkeyPatch","useAnimatedKeyboardHandler","useFocusedInputHandler","KeyboardControllerViewAnimated","createAnimatedComponent","styles","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","navigationBarTranslucent","enabled","initiallyEnabled","setEnabled","progress","height","progressSV","heightSV","layout","setHandlers","broadcast","context","animated","multiply","reanimated","style","transform","translateX","translateY","onKeyboardMove","event","nativeEvent","useNativeDriver","updateSharedValues","platforms","includes","OS","value","keyboardHandler","onKeyboardMoveStart","onKeyboardMoveEnd","onKeyboardMoveInteractive","inputHandler","onFocusedInputLayoutChanged","e","target","undefined"],"sources":["animated.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { Animated, Platform, StyleSheet } from 'react-native';\nimport Reanimated, { useSharedValue } from 'react-native-reanimated';\n\nimport { KeyboardControllerView } from './bindings';\nimport { KeyboardContext } from './context';\nimport { useAnimatedValue, useSharedHandlers } from './internal';\nimport { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';\nimport {\n useAnimatedKeyboardHandler,\n useFocusedInputHandler,\n} from './reanimated';\n\nimport type { KeyboardAnimationContext } from './context';\nimport type {\n FocusedInputLayoutChangedEvent,\n KeyboardControllerProps,\n KeyboardHandler,\n NativeEvent,\n} from './types';\nimport type { ViewStyle } from 'react-native';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nconst styles = StyleSheet.create<Styles>({\n container: {\n flex: 1,\n },\n hidden: {\n display: 'none',\n position: 'absolute',\n },\n});\n\ntype KeyboardProviderProps = {\n children: React.ReactNode;\n /**\n * Set the value to `true`, if you use translucent status bar on Android.\n * If you already control status bar translucency via `react-native-screens`\n * or `StatusBar` component from `react-native`, you can ignore it.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14\n * @platform android\n */\n statusBarTranslucent?: boolean;\n /**\n * Set the value to `true`, if you use translucent navigation bar on Android.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119\n * @platform android\n */\n navigationBarTranslucent?: boolean;\n /**\n * A boolean prop indicating whether the module is enabled. It indicate only initial state,\n * i. e. if you try to change this prop after component mount it will not have any effect.\n * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.\n * Defaults to `true`.\n */\n enabled?: boolean;\n};\n\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n navigationBarTranslucent,\n enabled: initiallyEnabled = true,\n}: KeyboardProviderProps) => {\n const [enabled, setEnabled] = useState(initiallyEnabled);\n // animated values\n const progress = useAnimatedValue(0);\n const height = useAnimatedValue(0);\n // shared values\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();\n // memo\n const context = useMemo<KeyboardAnimationContext>(\n () => ({\n enabled,\n animated: { progress: progress, height: Animated.multiply(height, -1) },\n reanimated: { progress: progressSV, height: heightSV },\n layout,\n setHandlers,\n setEnabled,\n }),\n [enabled]\n );\n const style = useMemo(\n () => [\n styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ],\n []\n );\n const onKeyboardMove = useMemo(\n () =>\n Animated.event(\n [\n {\n nativeEvent: {\n progress,\n height,\n },\n },\n ],\n { useNativeDriver: true }\n ),\n []\n );\n // handlers\n const updateSharedValues = (event: NativeEvent, platforms: string[]) => {\n 'worklet';\n\n if (platforms.includes(Platform.OS)) {\n progressSV.value = event.progress;\n heightSV.value = -event.height;\n }\n };\n const keyboardHandler = useAnimatedKeyboardHandler(\n {\n onKeyboardMoveStart: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onStart', event);\n updateSharedValues(event, ['ios']);\n },\n onKeyboardMove: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onMove', event);\n updateSharedValues(event, ['android']);\n },\n onKeyboardMoveEnd: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onEnd', event);\n },\n onKeyboardMoveInteractive: (event: NativeEvent) => {\n 'worklet';\n\n updateSharedValues(event, ['android', 'ios']);\n broadcast('onInteractive', event);\n },\n },\n []\n );\n const inputHandler = useFocusedInputHandler(\n {\n onFocusedInputLayoutChanged: (e) => {\n 'worklet';\n\n if (e.target !== -1) {\n layout.value = e;\n } else {\n layout.value = null;\n }\n },\n },\n []\n );\n // effects\n useEffect(() => {\n if (enabled) {\n applyMonkeyPatch();\n } else {\n revertMonkeyPatch();\n }\n }, [enabled]);\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n enabled={enabled}\n onKeyboardMoveReanimated={keyboardHandler}\n onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}\n onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}\n onKeyboardMoveInteractive={onKeyboardMove}\n onFocusedInputLayoutChangedReanimated={inputHandler}\n navigationBarTranslucent={navigationBarTranslucent}\n statusBarTranslucent={statusBarTranslucent}\n // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923\n style={styles.container}\n >\n {children}\n </KeyboardControllerViewAnimated>\n <Animated.View\n // we are using this small hack, because if the component (where\n // animated value has been used) is unmounted, then animation will\n // stop receiving events (seems like it's react-native optimization).\n // So we need to keep a reference to the animated value, to keep it's\n // always mounted (keep a reference to an animated value).\n //\n // To test why it's needed, try to open screen which consumes Animated.Value\n // then close it and open it again (for example 'Animated transition').\n style={style}\n />\n </KeyboardContext.Provider>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["View","NOOP","KeyboardController","setDefaultMode","setInputMode","addListener","removeListeners","KeyboardEvents","remove","KeyboardControllerView","KeyboardGestureArea"],"sources":["bindings.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"names":["View","NOOP","KeyboardController","setDefaultMode","setInputMode","addListener","removeListeners","KeyboardEvents","remove","KeyboardControllerView","KeyboardGestureArea"],"sources":["bindings.ts"],"sourcesContent":["import { View } from 'react-native';\n\nimport type {\n KeyboardControllerModule,\n KeyboardControllerProps,\n KeyboardEventsModule,\n KeyboardGestureAreaProps,\n} from './types';\nimport type { EmitterSubscription } from 'react-native';\n\nconst NOOP = () => {};\nexport const KeyboardController: KeyboardControllerModule = {\n setDefaultMode: NOOP,\n setInputMode: NOOP,\n addListener: NOOP,\n removeListeners: NOOP,\n};\nexport const KeyboardEvents: KeyboardEventsModule = {\n addListener: () => ({ remove: NOOP } as EmitterSubscription),\n};\nexport const KeyboardControllerView =\n View as unknown as React.FC<KeyboardControllerProps>;\nexport const KeyboardGestureArea =\n View as unknown as React.FC<KeyboardGestureAreaProps>;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,cAAc;AAUnC,MAAMC,IAAI,GAAG,MAAM,CAAC,CAAC;AACrB,OAAO,MAAMC,kBAA4C,GAAG;EAC1DC,cAAc,EAAEF,IAAI;EACpBG,YAAY,EAAEH,IAAI;EAClBI,WAAW,EAAEJ,IAAI;EACjBK,eAAe,EAAEL;AACnB,CAAC;AACD,OAAO,MAAMM,cAAoC,GAAG;EAClDF,WAAW,EAAE,OAAO;IAAEG,MAAM,EAAEP;EAAK,CAAC;AACtC,CAAC;AACD,OAAO,MAAMQ,sBAAsB,GACjCT,IAAoD;AACtD,OAAO,MAAMU,mBAAmB,GAC9BV,IAAqD"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { NativeEventEmitter, Platform } from 'react-native';
|
|
2
2
|
const LINKING_ERROR = `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \n\n` + Platform.select({
|
|
3
3
|
ios: "- You have run 'pod install'\n",
|
|
4
4
|
default: ''
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["NativeEventEmitter","Platform","LINKING_ERROR","select","ios","default","RCTKeyboardController","require","KeyboardController","Proxy","get","Error","eventEmitter","KeyboardEvents","addListener","name","cb","KeyboardControllerView","KeyboardGestureArea","OS","Version","children"],"sources":["bindings.native.ts"],"sourcesContent":["import { NativeEventEmitter, Platform } from 'react-native';\n\nimport type {\n KeyboardControllerModule,\n KeyboardControllerProps,\n KeyboardEventsModule,\n KeyboardGestureAreaProps,\n} from './types';\n\nconst LINKING_ERROR =\n `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \\n\\n` +\n Platform.select({ ios: \"- You have run 'pod install'\\n\", default: '' }) +\n '- You rebuilt the app after installing the package\\n' +\n '- You are not using Expo Go\\n';\n\nconst RCTKeyboardController =\n require('./specs/NativeKeyboardController').default;\nexport const KeyboardController = (\n RCTKeyboardController\n ? RCTKeyboardController\n : new Proxy(\n {},\n {\n get() {\n throw new Error(LINKING_ERROR);\n },\n }\n )\n) as KeyboardControllerModule;\n\nconst eventEmitter = new NativeEventEmitter(KeyboardController);\n\nexport const KeyboardEvents: KeyboardEventsModule = {\n addListener: (name, cb) =>\n eventEmitter.addListener('KeyboardController::' + name, cb),\n};\nexport const KeyboardControllerView: React.FC<KeyboardControllerProps> =\n require('./specs/KeyboardControllerViewNativeComponent').default;\nexport const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =\n Platform.OS === 'android' && Platform.Version >= 30\n ? require('./specs/KeyboardGestureAreaNativeComponent').default\n : ({ children }: KeyboardGestureAreaProps) => children;\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,QAAQ,QAAQ,cAAc;AAS3D,MAAMC,aAAa,GAChB,2FAA0F,GAC3FD,QAAQ,CAACE,MAAM,CAAC;EAAEC,GAAG,EAAE,gCAAgC;EAAEC,OAAO,EAAE;AAAG,CAAC,CAAC,GACvE,sDAAsD,GACtD,+BAA+B;AAEjC,MAAMC,qBAAqB,GACzBC,OAAO,CAAC,kCAAkC,CAAC,CAACF,OAAO;AACrD,OAAO,MAAMG,kBAAkB,GAC7BF,qBAAqB,GACjBA,qBAAqB,GACrB,IAAIG,KAAK,CACP,CAAC,CAAC,EACF;EACEC,GAAG,GAAG;IACJ,MAAM,IAAIC,KAAK,CAACT,aAAa,CAAC;EAChC;AACF,CAAC,CAEoB;AAE7B,MAAMU,YAAY,GAAG,IAAIZ,kBAAkB,CAACQ,kBAAkB,CAAC;AAE/D,OAAO,MAAMK,cAAoC,GAAG;EAClDC,WAAW,EAAE,CAACC,IAAI,EAAEC,EAAE,KACpBJ,YAAY,CAACE,WAAW,CAAC,sBAAsB,GAAGC,IAAI,EAAEC,EAAE;AAC9D,CAAC;AACD,OAAO,MAAMC,sBAAyD,GACpEV,OAAO,CAAC,+CAA+C,CAAC,CAACF,OAAO;AAClE,OAAO,MAAMa,mBAAuD,GAClEjB,QAAQ,CAACkB,EAAE,KAAK,SAAS,IAAIlB,QAAQ,CAACmB,OAAO,IAAI,EAAE,GAC/Cb,OAAO,CAAC,4CAA4C,CAAC,CAACF,OAAO,GAC7D;EAAA,IAAC;IAAEgB;EAAmC,CAAC;EAAA,OAAKA,QAAQ;AAAA"}
|
|
@@ -4,11 +4,13 @@ export const useKeyboardAnimation = () => {
|
|
|
4
4
|
const heightWhenOpened = useSharedValue(0);
|
|
5
5
|
const height = useSharedValue(0);
|
|
6
6
|
const progress = useSharedValue(0);
|
|
7
|
+
const isClosed = useSharedValue(true);
|
|
7
8
|
useKeyboardHandler({
|
|
8
9
|
onStart: e => {
|
|
9
10
|
'worklet';
|
|
10
11
|
|
|
11
12
|
if (e.height > 0) {
|
|
13
|
+
isClosed.value = false;
|
|
12
14
|
heightWhenOpened.value = e.height;
|
|
13
15
|
}
|
|
14
16
|
},
|
|
@@ -17,12 +19,18 @@ export const useKeyboardAnimation = () => {
|
|
|
17
19
|
|
|
18
20
|
progress.value = e.progress;
|
|
19
21
|
height.value = e.height;
|
|
22
|
+
},
|
|
23
|
+
onEnd: e => {
|
|
24
|
+
'worklet';
|
|
25
|
+
|
|
26
|
+
isClosed.value = e.height === 0;
|
|
20
27
|
}
|
|
21
28
|
}, []);
|
|
22
29
|
return {
|
|
23
30
|
height,
|
|
24
31
|
progress,
|
|
25
|
-
heightWhenOpened
|
|
32
|
+
heightWhenOpened,
|
|
33
|
+
isClosed
|
|
26
34
|
};
|
|
27
35
|
};
|
|
28
36
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useSharedValue","useKeyboardHandler","useKeyboardAnimation","heightWhenOpened","height","progress","onStart","e","value","onMove"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from 'react-native-reanimated';\nimport { useKeyboardHandler } from '../../hooks';\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n 'worklet';\n\n if (e.height > 0) {\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 },\n []\n );\n\n return { height, progress, heightWhenOpened };\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,yBAAyB;
|
|
1
|
+
{"version":3,"names":["useSharedValue","useKeyboardHandler","useKeyboardAnimation","heightWhenOpened","height","progress","isClosed","onStart","e","value","onMove","onEnd"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from 'react-native-reanimated';\n\nimport { useKeyboardHandler } from '../../hooks';\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n 'worklet';\n\n if (e.height > 0) {\n isClosed.value = false;\n heightWhenOpened.value = e.height;\n }\n },\n onMove: (e) => {\n 'worklet';\n\n progress.value = e.progress;\n height.value = e.height;\n },\n onEnd: (e) => {\n 'worklet';\n\n isClosed.value = e.height === 0;\n },\n },\n []\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,yBAAyB;AAExD,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAO,MAAMC,oBAAoB,GAAG,MAAM;EACxC,MAAMC,gBAAgB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC1C,MAAMI,MAAM,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAChC,MAAMK,QAAQ,GAAGL,cAAc,CAAC,CAAC,CAAC;EAClC,MAAMM,QAAQ,GAAGN,cAAc,CAAC,IAAI,CAAC;EAErCC,kBAAkB,CAChB;IACEM,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACJ,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACG,KAAK,GAAG,KAAK;QACtBN,gBAAgB,CAACM,KAAK,GAAGD,CAAC,CAACJ,MAAM;MACnC;IACF,CAAC;IACDM,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETH,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACH,QAAQ;MAC3BD,MAAM,CAACK,KAAK,GAAGD,CAAC,CAACJ,MAAM;IACzB,CAAC;IACDO,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETF,QAAQ,CAACG,KAAK,GAAGD,CAAC,CAACJ,MAAM,KAAK,CAAC;IACjC;EACF,CAAC,EACD,EAAE,CACH;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEF,gBAAgB;IAAEG;EAAS,CAAC;AACzD,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
import React, { forwardRef, useCallback, useMemo } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import Reanimated, {
|
|
3
|
+
import { View, useWindowDimensions } from 'react-native';
|
|
4
|
+
import Reanimated, { interpolate, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, useWorkletCallback } from 'react-native-reanimated';
|
|
5
5
|
import { useKeyboardAnimation } from './hooks';
|
|
6
6
|
const defaultLayout = {
|
|
7
7
|
x: 0,
|
|
@@ -35,10 +35,13 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
35
35
|
const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
|
|
36
36
|
return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
|
|
37
37
|
}, [screenHeight, keyboardVerticalOffset]);
|
|
38
|
-
const
|
|
39
|
-
if (
|
|
40
|
-
initialFrame.value =
|
|
38
|
+
const onLayoutWorklet = useWorkletCallback(layout => {
|
|
39
|
+
if (keyboard.isClosed.value) {
|
|
40
|
+
initialFrame.value = layout;
|
|
41
41
|
}
|
|
42
|
+
});
|
|
43
|
+
const onLayout = useCallback(e => {
|
|
44
|
+
runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
|
|
42
45
|
onLayoutProps === null || onLayoutProps === void 0 ? void 0 : onLayoutProps(e);
|
|
43
46
|
}, [onLayoutProps]);
|
|
44
47
|
const animatedStyle = useAnimatedStyle(() => {
|
|
@@ -46,7 +49,7 @@ const KeyboardAvoidingView = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
46
49
|
const bottomHeight = enabled ? bottom : 0;
|
|
47
50
|
switch (behavior) {
|
|
48
51
|
case 'height':
|
|
49
|
-
if (
|
|
52
|
+
if (!keyboard.isClosed.value) {
|
|
50
53
|
return {
|
|
51
54
|
height: frame.value.height - bottomHeight,
|
|
52
55
|
flex: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useCallback","useMemo","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useMemo","View","useWindowDimensions","Reanimated","interpolate","runOnUI","useAnimatedStyle","useDerivedValue","useSharedValue","useWorkletCallback","useKeyboardAnimation","defaultLayout","x","y","width","height","KeyboardAvoidingView","ref","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","initialFrame","frame","value","keyboard","screenHeight","relativeKeyboardHeight","keyboardY","heightWhenOpened","Math","max","onLayoutWorklet","layout","isClosed","e","nativeEvent","animatedStyle","bottom","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { View, useWindowDimensions } from 'react-native';\nimport Reanimated, {\n interpolate,\n runOnUI,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n useWorkletCallback,\n} from 'react-native-reanimated';\n\nimport { useKeyboardAnimation } from './hooks';\n\nimport type { LayoutRectangle, ViewProps } from 'react-native';\n\ntype Props = {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: 'height' | 'position' | 'padding';\n\n /**\n * Style of the content container when `behavior` is 'position'.\n */\n contentContainerStyle?: ViewProps['style'];\n\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\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<View, React.PropsWithChildren<Props>>(\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 = useWorkletCallback(() => {\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 = useWorkletCallback((layout: LayoutRectangle) => {\n if (keyboard.isClosed.value) {\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 // @ts-expect-error because `ref` from reanimated is not compatible with react-native\n ref={ref}\n onLayout={onLayout}\n style={combinedStyles}\n {...props}\n >\n {children}\n </Reanimated.View>\n );\n }\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React, { forwardRef, useMemo } from 'react';
|
|
3
|
+
import Reanimated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
|
|
4
|
+
import { useReanimatedKeyboardAnimation } from '../../hooks';
|
|
5
|
+
const KeyboardStickyView = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
6
|
+
let {
|
|
7
|
+
children,
|
|
8
|
+
offset: {
|
|
9
|
+
closed = 0,
|
|
10
|
+
opened = 0
|
|
11
|
+
} = {},
|
|
12
|
+
style,
|
|
13
|
+
...props
|
|
14
|
+
} = _ref;
|
|
15
|
+
const {
|
|
16
|
+
height,
|
|
17
|
+
progress
|
|
18
|
+
} = useReanimatedKeyboardAnimation();
|
|
19
|
+
const stickyViewStyle = useAnimatedStyle(() => {
|
|
20
|
+
const offset = interpolate(progress.value, [0, 1], [closed, opened]);
|
|
21
|
+
return {
|
|
22
|
+
transform: [{
|
|
23
|
+
translateY: height.value + offset
|
|
24
|
+
}]
|
|
25
|
+
};
|
|
26
|
+
}, [closed, opened]);
|
|
27
|
+
const styles = useMemo(() => [style, stickyViewStyle], [style, stickyViewStyle]);
|
|
28
|
+
return /*#__PURE__*/React.createElement(Reanimated.View, _extends({
|
|
29
|
+
// @ts-expect-error because `ref` from reanimated is not compatible with react-native
|
|
30
|
+
ref: ref,
|
|
31
|
+
style: styles
|
|
32
|
+
}, props), children);
|
|
33
|
+
});
|
|
34
|
+
export default KeyboardStickyView;
|
|
35
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useMemo","Reanimated","interpolate","useAnimatedStyle","useReanimatedKeyboardAnimation","KeyboardStickyView","ref","children","offset","closed","opened","style","props","height","progress","stickyViewStyle","value","transform","translateY","styles"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport Reanimated, {\n interpolate,\n useAnimatedStyle,\n} from 'react-native-reanimated';\n\nimport { useReanimatedKeyboardAnimation } from '../../hooks';\n\nimport type { View, ViewProps } from 'react-native';\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref\n ) => {\n const { height, progress } = useReanimatedKeyboardAnimation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(progress.value, [0, 1], [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle]\n );\n\n return (\n <Reanimated.View\n // @ts-expect-error because `ref` from reanimated is not compatible with react-native\n ref={ref}\n style={styles}\n {...props}\n >\n {children}\n </Reanimated.View>\n );\n }\n);\n\nexport default KeyboardStickyView;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,IACfC,WAAW,EACXC,gBAAgB,QACX,yBAAyB;AAEhC,SAASC,8BAA8B,QAAQ,aAAa;AAoB5D,MAAMC,kBAAkB,gBAAGN,UAAU,CAInC,OAEEO,GAAG,KACA;EAAA,IAFH;IAAEC,QAAQ;IAAEC,MAAM,EAAE;MAAEC,MAAM,GAAG,CAAC;MAAEC,MAAM,GAAG;IAAE,CAAC,GAAG,CAAC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC;EAGtE,MAAM;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGV,8BAA8B,EAAE;EAE7D,MAAMW,eAAe,GAAGZ,gBAAgB,CAAC,MAAM;IAC7C,MAAMK,MAAM,GAAGN,WAAW,CAACY,QAAQ,CAACE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAACP,MAAM,EAAEC,MAAM,CAAC,CAAC;IAEpE,OAAO;MACLO,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEL,MAAM,CAACG,KAAK,GAAGR;MAAO,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,MAAMS,MAAM,GAAGnB,OAAO,CACpB,MAAM,CAACW,KAAK,EAAEI,eAAe,CAAC,EAC9B,CAACJ,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE,oBAAC,UAAU,CAAC,IAAI;IACd;IACA,GAAG,EAAET,GAAI;IACT,KAAK,EAAEa;EAAO,GACVP,KAAK,GAERL,QAAQ,CACO;AAEtB,CAAC,CACF;AAED,eAAeF,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","KeyboardAvoidingView"],"sources":["index.ts"],"sourcesContent":["export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,wBAAwB"}
|
|
1
|
+
{"version":3,"names":["default","KeyboardAvoidingView","KeyboardStickyView"],"sources":["index.ts"],"sourcesContent":["export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';\nexport { default as KeyboardStickyView } from './KeyboardStickyView';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,wBAAwB;AACxE,SAASD,OAAO,IAAIE,kBAAkB,QAAQ,sBAAsB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["AndroidSoftInputModes"],"sources":["constants.ts"],"sourcesContent":["// copied from `android.view.WindowManager.LayoutParams`\nexport enum AndroidSoftInputModes {\n SOFT_INPUT_ADJUST_NOTHING = 48,\n SOFT_INPUT_ADJUST_PAN = 32,\n SOFT_INPUT_ADJUST_RESIZE = 16,\n SOFT_INPUT_ADJUST_UNSPECIFIED = 0,\n SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,\n SOFT_INPUT_MASK_ADJUST = 240,\n SOFT_INPUT_MASK_STATE = 15,\n SOFT_INPUT_MODE_CHANGED = 512,\n SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,\n SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,\n SOFT_INPUT_STATE_HIDDEN = 2,\n SOFT_INPUT_STATE_UNCHANGED = 1,\n SOFT_INPUT_STATE_UNSPECIFIED = 0,\n SOFT_INPUT_STATE_VISIBLE = 4,\n}\n"],"mappings":"AAAA;AACA,WAAYA,qBAAqB;
|
|
1
|
+
{"version":3,"names":["AndroidSoftInputModes"],"sources":["constants.ts"],"sourcesContent":["// copied from `android.view.WindowManager.LayoutParams`\nexport enum AndroidSoftInputModes {\n SOFT_INPUT_ADJUST_NOTHING = 48,\n SOFT_INPUT_ADJUST_PAN = 32,\n SOFT_INPUT_ADJUST_RESIZE = 16,\n SOFT_INPUT_ADJUST_UNSPECIFIED = 0,\n SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,\n SOFT_INPUT_MASK_ADJUST = 240,\n SOFT_INPUT_MASK_STATE = 15,\n SOFT_INPUT_MODE_CHANGED = 512,\n SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,\n SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,\n SOFT_INPUT_STATE_HIDDEN = 2,\n SOFT_INPUT_STATE_UNCHANGED = 1,\n // temporarily disable this rule to avoid breaking changes.\n // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values\n SOFT_INPUT_STATE_UNSPECIFIED = 0,\n SOFT_INPUT_STATE_VISIBLE = 4,\n}\n"],"mappings":"AAAA;AACA,WAAYA,qBAAqB;AAiBhC,WAjBWA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;AAAA,GAArBA,qBAAqB,KAArBA,qBAAqB"}
|
package/lib/module/context.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
const NOOP = () => {};
|
|
4
|
-
const
|
|
5
|
-
value
|
|
4
|
+
const withSharedValue = value => ({
|
|
5
|
+
value,
|
|
6
6
|
addListener: NOOP,
|
|
7
7
|
removeListener: NOOP,
|
|
8
8
|
modify: NOOP
|
|
9
|
-
};
|
|
9
|
+
});
|
|
10
|
+
const DEFAULT_SHARED_VALUE = withSharedValue(0);
|
|
11
|
+
const DEFAULT_LAYOUT = withSharedValue(null);
|
|
10
12
|
const defaultContext = {
|
|
13
|
+
enabled: true,
|
|
11
14
|
animated: {
|
|
12
15
|
progress: new Animated.Value(0),
|
|
13
16
|
height: new Animated.Value(0)
|
|
@@ -16,7 +19,9 @@ const defaultContext = {
|
|
|
16
19
|
progress: DEFAULT_SHARED_VALUE,
|
|
17
20
|
height: DEFAULT_SHARED_VALUE
|
|
18
21
|
},
|
|
19
|
-
|
|
22
|
+
layout: DEFAULT_LAYOUT,
|
|
23
|
+
setHandlers: NOOP,
|
|
24
|
+
setEnabled: NOOP
|
|
20
25
|
};
|
|
21
26
|
export const KeyboardContext = /*#__PURE__*/createContext(defaultContext);
|
|
22
27
|
export const useKeyboardContext = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","Animated","NOOP","
|
|
1
|
+
{"version":3,"names":["createContext","useContext","Animated","NOOP","withSharedValue","value","addListener","removeListener","modify","DEFAULT_SHARED_VALUE","DEFAULT_LAYOUT","defaultContext","enabled","animated","progress","Value","height","reanimated","layout","setHandlers","setEnabled","KeyboardContext","useKeyboardContext","context","__DEV__","console","warn"],"sources":["context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { Animated } from 'react-native';\n\nimport type { FocusedInputLayoutChangedEvent, KeyboardHandlers } from './types';\nimport type React from 'react';\nimport type { SharedValue } from 'react-native-reanimated';\n\nexport type AnimatedContext = {\n progress: Animated.Value;\n height: Animated.AnimatedMultiplication<number>;\n};\nexport type ReanimatedContext = {\n progress: SharedValue<number>;\n height: SharedValue<number>;\n};\nexport type KeyboardAnimationContext = {\n enabled: boolean;\n animated: AnimatedContext;\n reanimated: ReanimatedContext;\n layout: SharedValue<FocusedInputLayoutChangedEvent | null>;\n setHandlers: (handlers: KeyboardHandlers) => void;\n setEnabled: React.Dispatch<React.SetStateAction<boolean>>;\n};\nconst NOOP = () => {};\nconst withSharedValue = <T>(value: T): SharedValue<T> => ({\n value,\n addListener: NOOP,\n removeListener: NOOP,\n modify: NOOP,\n});\nconst DEFAULT_SHARED_VALUE = withSharedValue(0);\nconst DEFAULT_LAYOUT = withSharedValue<FocusedInputLayoutChangedEvent | null>(\n null\n);\nconst defaultContext: KeyboardAnimationContext = {\n enabled: true,\n animated: {\n progress: new Animated.Value(0),\n height: new Animated.Value(0),\n },\n reanimated: {\n progress: DEFAULT_SHARED_VALUE,\n height: DEFAULT_SHARED_VALUE,\n },\n layout: DEFAULT_LAYOUT,\n setHandlers: NOOP,\n setEnabled: NOOP,\n};\nexport const KeyboardContext = createContext(defaultContext);\nexport const useKeyboardContext = () => {\n const context = useContext(KeyboardContext);\n\n if (__DEV__ && context === defaultContext) {\n console.warn(\n \"Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work.\"\n );\n }\n\n return context;\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AACjD,SAASC,QAAQ,QAAQ,cAAc;AAsBvC,MAAMC,IAAI,GAAG,MAAM,CAAC,CAAC;AACrB,MAAMC,eAAe,GAAOC,KAAQ,KAAsB;EACxDA,KAAK;EACLC,WAAW,EAAEH,IAAI;EACjBI,cAAc,EAAEJ,IAAI;EACpBK,MAAM,EAAEL;AACV,CAAC,CAAC;AACF,MAAMM,oBAAoB,GAAGL,eAAe,CAAC,CAAC,CAAC;AAC/C,MAAMM,cAAc,GAAGN,eAAe,CACpC,IAAI,CACL;AACD,MAAMO,cAAwC,GAAG;EAC/CC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE;IACRC,QAAQ,EAAE,IAAIZ,QAAQ,CAACa,KAAK,CAAC,CAAC,CAAC;IAC/BC,MAAM,EAAE,IAAId,QAAQ,CAACa,KAAK,CAAC,CAAC;EAC9B,CAAC;EACDE,UAAU,EAAE;IACVH,QAAQ,EAAEL,oBAAoB;IAC9BO,MAAM,EAAEP;EACV,CAAC;EACDS,MAAM,EAAER,cAAc;EACtBS,WAAW,EAAEhB,IAAI;EACjBiB,UAAU,EAAEjB;AACd,CAAC;AACD,OAAO,MAAMkB,eAAe,gBAAGrB,aAAa,CAACW,cAAc,CAAC;AAC5D,OAAO,MAAMW,kBAAkB,GAAG,MAAM;EACtC,MAAMC,OAAO,GAAGtB,UAAU,CAACoB,eAAe,CAAC;EAE3C,IAAIG,OAAO,IAAID,OAAO,KAAKZ,cAAc,EAAE;IACzCc,OAAO,CAACC,IAAI,CACV,sLAAsL,CACvL;EACH;EAEA,OAAOH,OAAO;AAChB,CAAC"}
|
package/lib/module/hooks.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
|
-
import { useKeyboardContext } from './context';
|
|
3
2
|
import { KeyboardController } from './bindings';
|
|
4
3
|
import { AndroidSoftInputModes } from './constants';
|
|
4
|
+
import { useKeyboardContext } from './context';
|
|
5
5
|
import { uuid } from './utils';
|
|
6
6
|
export const useResizeMode = () => {
|
|
7
7
|
useEffect(() => {
|
|
@@ -37,4 +37,17 @@ export function useKeyboardHandler(handler, deps) {
|
|
|
37
37
|
useResizeMode();
|
|
38
38
|
useGenericKeyboardHandler(handler, deps);
|
|
39
39
|
}
|
|
40
|
+
export function useKeyboardController() {
|
|
41
|
+
const context = useKeyboardContext();
|
|
42
|
+
return {
|
|
43
|
+
setEnabled: context.setEnabled,
|
|
44
|
+
enabled: context.enabled
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
export function useReanimatedFocusedInput() {
|
|
48
|
+
const context = useKeyboardContext();
|
|
49
|
+
return {
|
|
50
|
+
input: context.layout
|
|
51
|
+
};
|
|
52
|
+
}
|
|
40
53
|
//# sourceMappingURL=hooks.js.map
|