react-native-keyboard-controller 1.6.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardAnimationCallback.kt +9 -1
- package/android/src/main/java/com/reactnativekeyboardcontroller/events/KeyboardTransitionEvent.kt +9 -9
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/ViewGroup.kt +10 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/modules/KeyboardControllerModuleImpl.kt +13 -7
- package/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt +58 -40
- package/ios/Extensions.swift +2 -2
- package/ios/KeyboardController-Bridging-Header.h +0 -1
- package/lib/commonjs/animated.js +1 -1
- package/lib/commonjs/animated.js.map +1 -1
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js +35 -0
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js.map +1 -0
- package/lib/commonjs/components/KeyboardAvoidingView/index.js +97 -0
- package/lib/commonjs/components/KeyboardAvoidingView/index.js.map +1 -0
- package/lib/commonjs/components/index.js +14 -0
- package/lib/commonjs/components/index.js.map +1 -0
- package/lib/commonjs/context.js +9 -6
- package/lib/commonjs/context.js.map +1 -1
- package/lib/commonjs/index.js +17 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/module/animated.js +1 -1
- package/lib/module/animated.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/hooks.js +28 -0
- package/lib/module/components/KeyboardAvoidingView/hooks.js.map +1 -0
- package/lib/module/components/KeyboardAvoidingView/index.js +88 -0
- package/lib/module/components/KeyboardAvoidingView/index.js.map +1 -0
- package/lib/module/components/index.js +2 -0
- package/lib/module/components/index.js.map +1 -0
- package/lib/module/context.js +9 -6
- package/lib/module/context.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/typescript/components/KeyboardAvoidingView/hooks.d.ts +5 -0
- package/lib/typescript/components/KeyboardAvoidingView/index.d.ts +29 -0
- package/lib/typescript/components/index.d.ts +1 -0
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/replicas.d.ts +2 -7
- package/lib/typescript/types.d.ts +1 -1
- package/package.json +5 -5
- package/src/animated.tsx +1 -1
- package/src/components/KeyboardAvoidingView/hooks.ts +29 -0
- package/src/components/KeyboardAvoidingView/index.tsx +147 -0
- package/src/components/index.ts +1 -0
- package/src/context.ts +9 -2
- package/src/index.ts +2 -0
- package/src/types.ts +1 -1
package/README.md
CHANGED
|
@@ -13,6 +13,7 @@ Keyboard manager which works in identical way on both iOS and Android.
|
|
|
13
13
|
- module for changing soft input mode on Android 🤔
|
|
14
14
|
- reanimated support 🚀
|
|
15
15
|
- interactive keyboard dismissing 👆📱
|
|
16
|
+
- works with any navigation library 🧭
|
|
16
17
|
- and more is coming... Stay tuned! 😊
|
|
17
18
|
|
|
18
19
|
## Installation
|
package/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardAnimationCallback.kt
CHANGED
|
@@ -32,6 +32,7 @@ class KeyboardAnimationCallback(
|
|
|
32
32
|
dispatchMode: Int = DISPATCH_MODE_STOP,
|
|
33
33
|
val context: ThemedReactContext?,
|
|
34
34
|
) : WindowInsetsAnimationCompat.Callback(dispatchMode), OnApplyWindowInsetsListener {
|
|
35
|
+
private val surfaceId = UIManagerHelper.getSurfaceId(view)
|
|
35
36
|
private var persistentKeyboardHeight = 0.0
|
|
36
37
|
private var isKeyboardVisible = false
|
|
37
38
|
private var isTransitioning = false
|
|
@@ -57,6 +58,7 @@ class KeyboardAnimationCallback(
|
|
|
57
58
|
// can bring breaking changes
|
|
58
59
|
this.sendEventToJS(
|
|
59
60
|
KeyboardTransitionEvent(
|
|
61
|
+
surfaceId,
|
|
60
62
|
view.id,
|
|
61
63
|
"topKeyboardMoveStart",
|
|
62
64
|
this.persistentKeyboardHeight,
|
|
@@ -67,6 +69,7 @@ class KeyboardAnimationCallback(
|
|
|
67
69
|
)
|
|
68
70
|
this.sendEventToJS(
|
|
69
71
|
KeyboardTransitionEvent(
|
|
72
|
+
surfaceId,
|
|
70
73
|
view.id,
|
|
71
74
|
"topKeyboardMoveEnd",
|
|
72
75
|
this.persistentKeyboardHeight,
|
|
@@ -115,6 +118,7 @@ class KeyboardAnimationCallback(
|
|
|
115
118
|
this.emitEvent("KeyboardController::keyboardWillShow", getEventParams(keyboardHeight))
|
|
116
119
|
this.sendEventToJS(
|
|
117
120
|
KeyboardTransitionEvent(
|
|
121
|
+
surfaceId,
|
|
118
122
|
view.id,
|
|
119
123
|
"topKeyboardMoveStart",
|
|
120
124
|
keyboardHeight,
|
|
@@ -129,6 +133,7 @@ class KeyboardAnimationCallback(
|
|
|
129
133
|
val toValue = animator.animatedValue as Float
|
|
130
134
|
this.sendEventToJS(
|
|
131
135
|
KeyboardTransitionEvent(
|
|
136
|
+
surfaceId,
|
|
132
137
|
view.id,
|
|
133
138
|
"topKeyboardMove",
|
|
134
139
|
toValue.toDouble(),
|
|
@@ -142,6 +147,7 @@ class KeyboardAnimationCallback(
|
|
|
142
147
|
this.emitEvent("KeyboardController::keyboardDidShow", getEventParams(keyboardHeight))
|
|
143
148
|
this.sendEventToJS(
|
|
144
149
|
KeyboardTransitionEvent(
|
|
150
|
+
surfaceId,
|
|
145
151
|
view.id,
|
|
146
152
|
"topKeyboardMoveEnd",
|
|
147
153
|
keyboardHeight,
|
|
@@ -182,6 +188,7 @@ class KeyboardAnimationCallback(
|
|
|
182
188
|
Log.i(TAG, "HEIGHT:: $keyboardHeight TAG:: $viewTagFocused")
|
|
183
189
|
this.sendEventToJS(
|
|
184
190
|
KeyboardTransitionEvent(
|
|
191
|
+
surfaceId,
|
|
185
192
|
view.id,
|
|
186
193
|
"topKeyboardMoveStart",
|
|
187
194
|
keyboardHeight,
|
|
@@ -223,7 +230,7 @@ class KeyboardAnimationCallback(
|
|
|
223
230
|
Log.i(TAG, "DiffY: $diffY $height $progress ${InteractiveKeyboardProvider.isInteractive} $viewTagFocused")
|
|
224
231
|
|
|
225
232
|
val event = if (InteractiveKeyboardProvider.isInteractive) "topKeyboardMoveInteractive" else "topKeyboardMove"
|
|
226
|
-
this.sendEventToJS(KeyboardTransitionEvent(view.id, event, height, progress, duration, viewTagFocused))
|
|
233
|
+
this.sendEventToJS(KeyboardTransitionEvent(surfaceId, view.id, event, height, progress, duration, viewTagFocused))
|
|
227
234
|
|
|
228
235
|
return insets
|
|
229
236
|
}
|
|
@@ -254,6 +261,7 @@ class KeyboardAnimationCallback(
|
|
|
254
261
|
)
|
|
255
262
|
this.sendEventToJS(
|
|
256
263
|
KeyboardTransitionEvent(
|
|
264
|
+
surfaceId,
|
|
257
265
|
view.id,
|
|
258
266
|
"topKeyboardMoveEnd",
|
|
259
267
|
keyboardHeight,
|
package/android/src/main/java/com/reactnativekeyboardcontroller/events/KeyboardTransitionEvent.kt
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
package com.reactnativekeyboardcontroller.events
|
|
2
2
|
|
|
3
3
|
import com.facebook.react.bridge.Arguments
|
|
4
|
+
import com.facebook.react.bridge.WritableMap
|
|
4
5
|
import com.facebook.react.uimanager.events.Event
|
|
5
|
-
import com.facebook.react.uimanager.events.RCTEventEmitter
|
|
6
6
|
|
|
7
|
+
@Suppress("detekt:LongParameterList")
|
|
7
8
|
class KeyboardTransitionEvent(
|
|
9
|
+
surfaceId: Int,
|
|
8
10
|
viewId: Int,
|
|
9
11
|
private val event: String,
|
|
10
12
|
private val height: Double,
|
|
11
13
|
private val progress: Double,
|
|
12
14
|
private val duration: Int,
|
|
13
15
|
private val target: Int,
|
|
14
|
-
) : Event<KeyboardTransitionEvent>(viewId) {
|
|
16
|
+
) : Event<KeyboardTransitionEvent>(surfaceId, viewId) {
|
|
15
17
|
override fun getEventName() = event
|
|
16
18
|
|
|
17
19
|
// All events for a given view can be coalesced?
|
|
18
20
|
override fun getCoalescingKey(): Short = 0
|
|
19
21
|
|
|
20
|
-
override fun
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
map.putInt("target", target)
|
|
26
|
-
rctEventEmitter.receiveEvent(viewTag, eventName, map)
|
|
22
|
+
override fun getEventData(): WritableMap? = Arguments.createMap().apply {
|
|
23
|
+
putDouble("progress", progress)
|
|
24
|
+
putDouble("height", height)
|
|
25
|
+
putInt("duration", duration)
|
|
26
|
+
putInt("target", target)
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -5,12 +5,7 @@ import com.facebook.react.bridge.ReactApplicationContext
|
|
|
5
5
|
import com.facebook.react.bridge.UiThreadUtil
|
|
6
6
|
|
|
7
7
|
class KeyboardControllerModuleImpl(private val mReactContext: ReactApplicationContext) {
|
|
8
|
-
private val mDefaultMode: Int =
|
|
9
|
-
.currentActivity
|
|
10
|
-
?.window
|
|
11
|
-
?.attributes
|
|
12
|
-
?.softInputMode
|
|
13
|
-
?: WindowManager.LayoutParams.SOFT_INPUT_STATE_UNSPECIFIED
|
|
8
|
+
private val mDefaultMode: Int = getCurrentMode()
|
|
14
9
|
|
|
15
10
|
fun setInputMode(mode: Int) {
|
|
16
11
|
setSoftInputMode(mode)
|
|
@@ -22,10 +17,21 @@ class KeyboardControllerModuleImpl(private val mReactContext: ReactApplicationCo
|
|
|
22
17
|
|
|
23
18
|
private fun setSoftInputMode(mode: Int) {
|
|
24
19
|
UiThreadUtil.runOnUiThread {
|
|
25
|
-
|
|
20
|
+
if (getCurrentMode() != mode) {
|
|
21
|
+
mReactContext.currentActivity?.window?.setSoftInputMode(mode)
|
|
22
|
+
}
|
|
26
23
|
}
|
|
27
24
|
}
|
|
28
25
|
|
|
26
|
+
private fun getCurrentMode(): Int {
|
|
27
|
+
return mReactContext
|
|
28
|
+
.currentActivity
|
|
29
|
+
?.window
|
|
30
|
+
?.attributes
|
|
31
|
+
?.softInputMode
|
|
32
|
+
?: WindowManager.LayoutParams.SOFT_INPUT_STATE_UNSPECIFIED
|
|
33
|
+
}
|
|
34
|
+
|
|
29
35
|
companion object {
|
|
30
36
|
const val NAME = "KeyboardController"
|
|
31
37
|
}
|
package/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt
CHANGED
|
@@ -13,6 +13,7 @@ import androidx.core.view.WindowInsetsCompat
|
|
|
13
13
|
import com.facebook.react.uimanager.ThemedReactContext
|
|
14
14
|
import com.facebook.react.views.view.ReactViewGroup
|
|
15
15
|
import com.reactnativekeyboardcontroller.KeyboardAnimationCallback
|
|
16
|
+
import com.reactnativekeyboardcontroller.extensions.removeSelf
|
|
16
17
|
import com.reactnativekeyboardcontroller.extensions.requestApplyInsetsWhenAttached
|
|
17
18
|
import com.reactnativekeyboardcontroller.extensions.rootView
|
|
18
19
|
|
|
@@ -22,36 +23,72 @@ private val TAG = EdgeToEdgeReactViewGroup::class.qualifiedName
|
|
|
22
23
|
class EdgeToEdgeReactViewGroup(private val reactContext: ThemedReactContext) : ReactViewGroup(reactContext) {
|
|
23
24
|
private var isStatusBarTranslucent = false
|
|
24
25
|
private var isNavigationBarTranslucent = false
|
|
26
|
+
private var eventView: ReactViewGroup? = null
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
// region View lifecycles
|
|
29
|
+
override fun onAttachedToWindow() {
|
|
30
|
+
super.onAttachedToWindow()
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
view = this,
|
|
32
|
-
persistentInsetTypes = WindowInsetsCompat.Type.systemBars(),
|
|
33
|
-
deferredInsetTypes = WindowInsetsCompat.Type.ime(),
|
|
34
|
-
// We explicitly allow dispatch to continue down to binding.messageHolder's
|
|
35
|
-
// child views, so that step 2.5 below receives the call
|
|
36
|
-
dispatchMode = WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_CONTINUE_ON_SUBTREE,
|
|
37
|
-
context = reactContext,
|
|
38
|
-
)
|
|
39
|
-
ViewCompat.setWindowInsetsAnimationCallback(this, callback)
|
|
40
|
-
ViewCompat.setOnApplyWindowInsetsListener(this, callback)
|
|
41
|
-
this.requestApplyInsetsWhenAttached()
|
|
42
|
-
} else {
|
|
32
|
+
val activity = reactContext.currentActivity
|
|
33
|
+
if (activity == null) {
|
|
43
34
|
Log.w(TAG, "Can not setup keyboard animation listener, since `currentActivity` is null")
|
|
35
|
+
return
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
Handler(Looper.getMainLooper()).post(this::setupWindowInsets)
|
|
39
|
+
WindowCompat.setDecorFitsSystemWindows(
|
|
40
|
+
activity.window,
|
|
41
|
+
false,
|
|
42
|
+
)
|
|
43
|
+
|
|
44
|
+
eventView = ReactViewGroup(context)
|
|
45
|
+
val root = this.getContentView()
|
|
46
|
+
root?.addView(eventView)
|
|
47
|
+
|
|
48
|
+
val callback = KeyboardAnimationCallback(
|
|
49
|
+
view = this,
|
|
50
|
+
persistentInsetTypes = WindowInsetsCompat.Type.systemBars(),
|
|
51
|
+
deferredInsetTypes = WindowInsetsCompat.Type.ime(),
|
|
52
|
+
dispatchMode = WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_CONTINUE_ON_SUBTREE,
|
|
53
|
+
context = reactContext,
|
|
54
|
+
)
|
|
55
|
+
|
|
56
|
+
eventView?.let {
|
|
57
|
+
ViewCompat.setWindowInsetsAnimationCallback(it, callback)
|
|
58
|
+
ViewCompat.setOnApplyWindowInsetsListener(it, callback)
|
|
59
|
+
it.requestApplyInsetsWhenAttached()
|
|
44
60
|
}
|
|
45
61
|
}
|
|
46
62
|
|
|
63
|
+
override fun onDetachedFromWindow() {
|
|
64
|
+
super.onDetachedFromWindow()
|
|
65
|
+
|
|
66
|
+
eventView.removeSelf()
|
|
67
|
+
}
|
|
68
|
+
// endregion
|
|
69
|
+
|
|
70
|
+
// region Props setters
|
|
71
|
+
fun setStatusBarTranslucent(isStatusBarTranslucent: Boolean) {
|
|
72
|
+
this.isStatusBarTranslucent = isStatusBarTranslucent
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
fun setNavigationBarTranslucent(isNavigationBarTranslucent: Boolean) {
|
|
76
|
+
this.isNavigationBarTranslucent = isNavigationBarTranslucent
|
|
77
|
+
}
|
|
78
|
+
// endregion
|
|
79
|
+
|
|
80
|
+
// region Private functions/class helpers
|
|
81
|
+
private fun getContentView(): FitWindowsLinearLayout? {
|
|
82
|
+
return reactContext.currentActivity?.window?.decorView?.rootView?.findViewById(
|
|
83
|
+
androidx.appcompat.R.id.action_bar_root,
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
47
87
|
private fun setupWindowInsets() {
|
|
48
88
|
val rootView = reactContext.rootView
|
|
49
89
|
if (rootView != null) {
|
|
50
90
|
ViewCompat.setOnApplyWindowInsetsListener(rootView) { v, insets ->
|
|
51
|
-
val content =
|
|
52
|
-
reactContext.rootView?.findViewById<FitWindowsLinearLayout>(
|
|
53
|
-
androidx.appcompat.R.id.action_bar_root,
|
|
54
|
-
)
|
|
91
|
+
val content = getContentView()
|
|
55
92
|
val params = FrameLayout.LayoutParams(
|
|
56
93
|
FrameLayout.LayoutParams.MATCH_PARENT,
|
|
57
94
|
FrameLayout.LayoutParams.MATCH_PARENT,
|
|
@@ -80,24 +117,5 @@ class EdgeToEdgeReactViewGroup(private val reactContext: ThemedReactContext) : R
|
|
|
80
117
|
}
|
|
81
118
|
}
|
|
82
119
|
}
|
|
83
|
-
|
|
84
|
-
override fun onAttachedToWindow() {
|
|
85
|
-
super.onAttachedToWindow()
|
|
86
|
-
|
|
87
|
-
Handler(Looper.getMainLooper()).post(this::setupWindowInsets)
|
|
88
|
-
reactContext.currentActivity?.let {
|
|
89
|
-
WindowCompat.setDecorFitsSystemWindows(
|
|
90
|
-
it.window,
|
|
91
|
-
false,
|
|
92
|
-
)
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
fun setStatusBarTranslucent(isStatusBarTranslucent: Boolean) {
|
|
97
|
-
this.isStatusBarTranslucent = isStatusBarTranslucent
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
fun setNavigationBarTranslucent(isNavigationBarTranslucent: Boolean) {
|
|
101
|
-
this.isNavigationBarTranslucent = isNavigationBarTranslucent
|
|
102
|
-
}
|
|
120
|
+
// endregion
|
|
103
121
|
}
|
package/ios/Extensions.swift
CHANGED
|
@@ -46,9 +46,9 @@ public extension UIResponder {
|
|
|
46
46
|
public extension Optional where Wrapped == UIResponder {
|
|
47
47
|
var reactViewTag: NSNumber {
|
|
48
48
|
#if KEYBOARD_CONTROLLER_NEW_ARCH_ENABLED
|
|
49
|
-
return ((self as?
|
|
49
|
+
return ((self as? UIView)?.superview?.tag ?? -1) as NSNumber
|
|
50
50
|
#else
|
|
51
|
-
return (self as?
|
|
51
|
+
return (self as? UIView)?.superview?.reactTag ?? -1
|
|
52
52
|
#endif
|
|
53
53
|
}
|
|
54
54
|
}
|
package/lib/commonjs/animated.js
CHANGED
|
@@ -109,7 +109,7 @@ const KeyboardProvider = _ref => {
|
|
|
109
109
|
onKeyboardMoveInteractive: onKeyboardMove,
|
|
110
110
|
navigationBarTranslucent: navigationBarTranslucent,
|
|
111
111
|
statusBarTranslucent: statusBarTranslucent
|
|
112
|
-
// @ts-expect-error
|
|
112
|
+
// @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923
|
|
113
113
|
,
|
|
114
114
|
style: styles.container
|
|
115
115
|
}, children), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","navigationBarTranslucent","progress","useAnimatedValue","height","progressSV","useSharedValue","heightSV","setHandlers","broadcast","useSharedHandlers","context","useMemo","animated","multiply","reanimated","style","transform","translateX","translateY","onKeyboardMove","event","nativeEvent","useNativeDriver","updateSharedValues","platforms","includes","Platform","OS","value","handler","useAnimatedKeyboardHandler","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
|
|
1
|
+
{"version":3,"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","navigationBarTranslucent","progress","useAnimatedValue","height","progressSV","useSharedValue","heightSV","setHandlers","broadcast","useSharedHandlers","context","useMemo","animated","multiply","reanimated","style","transform","translateX","translateY","onKeyboardMove","event","nativeEvent","useNativeDriver","updateSharedValues","platforms","includes","Platform","OS","value","handler","useAnimatedKeyboardHandler","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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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useKeyboardAnimation = void 0;
|
|
7
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
8
|
+
var _hooks = require("../../hooks");
|
|
9
|
+
const useKeyboardAnimation = () => {
|
|
10
|
+
const heightWhenOpened = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
11
|
+
const height = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
12
|
+
const progress = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
13
|
+
(0, _hooks.useKeyboardHandler)({
|
|
14
|
+
onStart: e => {
|
|
15
|
+
'worklet';
|
|
16
|
+
|
|
17
|
+
if (e.height > 0) {
|
|
18
|
+
heightWhenOpened.value = e.height;
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
onMove: e => {
|
|
22
|
+
'worklet';
|
|
23
|
+
|
|
24
|
+
progress.value = e.progress;
|
|
25
|
+
height.value = e.height;
|
|
26
|
+
}
|
|
27
|
+
}, []);
|
|
28
|
+
return {
|
|
29
|
+
height,
|
|
30
|
+
progress,
|
|
31
|
+
heightWhenOpened
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
exports.useKeyboardAnimation = useKeyboardAnimation;
|
|
35
|
+
//# sourceMappingURL=hooks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useKeyboardAnimation","heightWhenOpened","useSharedValue","height","progress","useKeyboardHandler","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;AACA;AAEO,MAAMA,oBAAoB,GAAG,MAAM;EACxC,MAAMC,gBAAgB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAC1C,MAAMC,MAAM,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAChC,MAAME,QAAQ,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAElC,IAAAG,yBAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACJ,MAAM,GAAG,CAAC,EAAE;QAChBF,gBAAgB,CAACO,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;EACF,CAAC,EACD,EAAE,CACH;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEH;EAAiB,CAAC;AAC/C,CAAC;AAAC"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
|
+
var _hooks = require("./hooks");
|
|
11
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
+
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); }
|
|
14
|
+
const defaultLayout = {
|
|
15
|
+
x: 0,
|
|
16
|
+
y: 0,
|
|
17
|
+
width: 0,
|
|
18
|
+
height: 0
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* View that moves out of the way when the keyboard appears by automatically
|
|
23
|
+
* adjusting its height, position, or bottom padding.
|
|
24
|
+
*/
|
|
25
|
+
const KeyboardAvoidingView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
26
|
+
let {
|
|
27
|
+
behavior,
|
|
28
|
+
children,
|
|
29
|
+
contentContainerStyle,
|
|
30
|
+
enabled = true,
|
|
31
|
+
keyboardVerticalOffset = 0,
|
|
32
|
+
style,
|
|
33
|
+
onLayout: onLayoutProps,
|
|
34
|
+
...props
|
|
35
|
+
} = _ref;
|
|
36
|
+
const initialFrame = (0, _reactNativeReanimated.useSharedValue)(null);
|
|
37
|
+
const frame = (0, _reactNativeReanimated.useDerivedValue)(() => initialFrame.value || defaultLayout);
|
|
38
|
+
const keyboard = (0, _hooks.useKeyboardAnimation)();
|
|
39
|
+
const {
|
|
40
|
+
height: screenHeight
|
|
41
|
+
} = (0, _reactNative.useWindowDimensions)();
|
|
42
|
+
const relativeKeyboardHeight = (0, _reactNativeReanimated.useWorkletCallback)(() => {
|
|
43
|
+
const keyboardY = screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
|
|
44
|
+
return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
|
|
45
|
+
}, [screenHeight, keyboardVerticalOffset]);
|
|
46
|
+
const onLayout = (0, _react.useCallback)(e => {
|
|
47
|
+
if (initialFrame.value === null) {
|
|
48
|
+
initialFrame.value = e.nativeEvent.layout;
|
|
49
|
+
}
|
|
50
|
+
onLayoutProps === null || onLayoutProps === void 0 ? void 0 : onLayoutProps(e);
|
|
51
|
+
}, [onLayoutProps]);
|
|
52
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
53
|
+
const bottom = (0, _reactNativeReanimated.interpolate)(keyboard.progress.value, [0, 1], [0, relativeKeyboardHeight()]);
|
|
54
|
+
const bottomHeight = enabled ? bottom : 0;
|
|
55
|
+
switch (behavior) {
|
|
56
|
+
case 'height':
|
|
57
|
+
if (bottomHeight > 0) {
|
|
58
|
+
return {
|
|
59
|
+
height: frame.value.height - bottomHeight,
|
|
60
|
+
flex: 0
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
return {};
|
|
64
|
+
case 'position':
|
|
65
|
+
return {
|
|
66
|
+
bottom: bottomHeight
|
|
67
|
+
};
|
|
68
|
+
case 'padding':
|
|
69
|
+
return {
|
|
70
|
+
paddingBottom: bottomHeight
|
|
71
|
+
};
|
|
72
|
+
default:
|
|
73
|
+
return {};
|
|
74
|
+
}
|
|
75
|
+
}, [behavior, enabled, relativeKeyboardHeight]);
|
|
76
|
+
const isPositionBehavior = behavior === 'position';
|
|
77
|
+
const containerStyle = isPositionBehavior ? contentContainerStyle : style;
|
|
78
|
+
const combinedStyles = (0, _react.useMemo)(() => [containerStyle, animatedStyle], [containerStyle, animatedStyle]);
|
|
79
|
+
if (isPositionBehavior) {
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
81
|
+
ref: ref,
|
|
82
|
+
style: style,
|
|
83
|
+
onLayout: onLayout
|
|
84
|
+
}, props), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
85
|
+
style: combinedStyles
|
|
86
|
+
}, children));
|
|
87
|
+
}
|
|
88
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
|
|
89
|
+
// @ts-expect-error because `ref` from reanimated is not compatible with react-native
|
|
90
|
+
ref: ref,
|
|
91
|
+
onLayout: onLayout,
|
|
92
|
+
style: combinedStyles
|
|
93
|
+
}, props), children);
|
|
94
|
+
});
|
|
95
|
+
var _default = KeyboardAvoidingView;
|
|
96
|
+
exports.default = _default;
|
|
97
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["defaultLayout","x","y","width","height","KeyboardAvoidingView","forwardRef","ref","behavior","children","contentContainerStyle","enabled","keyboardVerticalOffset","style","onLayout","onLayoutProps","props","initialFrame","useSharedValue","frame","useDerivedValue","value","keyboard","useKeyboardAnimation","screenHeight","useWindowDimensions","relativeKeyboardHeight","useWorkletCallback","keyboardY","heightWhenOpened","Math","max","useCallback","e","nativeEvent","layout","animatedStyle","useAnimatedStyle","bottom","interpolate","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles","useMemo"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport {\n LayoutRectangle,\n useWindowDimensions,\n View,\n ViewProps,\n} from 'react-native';\nimport Reanimated, {\n useAnimatedStyle,\n useWorkletCallback,\n useSharedValue,\n useDerivedValue,\n interpolate,\n} from 'react-native-reanimated';\nimport { useKeyboardAnimation } from './hooks';\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 onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(\n (e) => {\n if (initialFrame.value === null) {\n initialFrame.value = e.nativeEvent.layout;\n }\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 (bottomHeight > 0) {\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,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "KeyboardAvoidingView", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _KeyboardAvoidingView.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _KeyboardAvoidingView = _interopRequireDefault(require("./KeyboardAvoidingView"));
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';\n"],"mappings":";;;;;;;;;;;AAAA;AAAyE"}
|
package/lib/commonjs/context.js
CHANGED
|
@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useKeyboardContext = exports.KeyboardContext = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
+
const NOOP = () => {};
|
|
10
|
+
const DEFAULT_SHARED_VALUE = {
|
|
11
|
+
value: 0,
|
|
12
|
+
addListener: NOOP,
|
|
13
|
+
removeListener: NOOP,
|
|
14
|
+
modify: NOOP
|
|
15
|
+
};
|
|
9
16
|
const defaultContext = {
|
|
10
17
|
animated: {
|
|
11
18
|
progress: new _reactNative.Animated.Value(0),
|
|
12
19
|
height: new _reactNative.Animated.Value(0)
|
|
13
20
|
},
|
|
14
21
|
reanimated: {
|
|
15
|
-
progress:
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
height: {
|
|
19
|
-
value: 0
|
|
20
|
-
}
|
|
22
|
+
progress: DEFAULT_SHARED_VALUE,
|
|
23
|
+
height: DEFAULT_SHARED_VALUE
|
|
21
24
|
},
|
|
22
25
|
setHandlers: () => {}
|
|
23
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultContext","animated","progress","Animated","Value","height","reanimated","
|
|
1
|
+
{"version":3,"names":["NOOP","DEFAULT_SHARED_VALUE","value","addListener","removeListener","modify","defaultContext","animated","progress","Animated","Value","height","reanimated","setHandlers","KeyboardContext","createContext","useKeyboardContext","context","useContext","__DEV__","console","warn"],"sources":["context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { Animated } from 'react-native';\n\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { KeyboardHandlers } from './types';\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 animated: AnimatedContext;\n reanimated: ReanimatedContext;\n setHandlers: (handlers: KeyboardHandlers) => void;\n};\nconst NOOP = () => {};\nconst DEFAULT_SHARED_VALUE: SharedValue<number> = {\n value: 0,\n addListener: NOOP,\n removeListener: NOOP,\n modify: NOOP,\n};\nconst defaultContext: KeyboardAnimationContext = {\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 setHandlers: () => {},\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;AACA;AAkBA,MAAMA,IAAI,GAAG,MAAM,CAAC,CAAC;AACrB,MAAMC,oBAAyC,GAAG;EAChDC,KAAK,EAAE,CAAC;EACRC,WAAW,EAAEH,IAAI;EACjBI,cAAc,EAAEJ,IAAI;EACpBK,MAAM,EAAEL;AACV,CAAC;AACD,MAAMM,cAAwC,GAAG;EAC/CC,QAAQ,EAAE;IACRC,QAAQ,EAAE,IAAIC,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;IAC/BC,MAAM,EAAE,IAAIF,qBAAQ,CAACC,KAAK,CAAC,CAAC;EAC9B,CAAC;EACDE,UAAU,EAAE;IACVJ,QAAQ,EAAEP,oBAAoB;IAC9BU,MAAM,EAAEV;EACV,CAAC;EACDY,WAAW,EAAE,MAAM,CAAC;AACtB,CAAC;AACM,MAAMC,eAAe,gBAAG,IAAAC,oBAAa,EAACT,cAAc,CAAC;AAAC;AACtD,MAAMU,kBAAkB,GAAG,MAAM;EACtC,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACJ,eAAe,CAAC;EAE3C,IAAIK,OAAO,IAAIF,OAAO,KAAKX,cAAc,EAAE;IACzCc,OAAO,CAACC,IAAI,CACV,sLAAsL,CACvL;EACH;EAEA,OAAOJ,OAAO;AAChB,CAAC;AAAC"}
|