react-native-keyboard-controller 1.0.0-alpha.0 → 1.0.0-alpha.3
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 +5 -4
- package/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt +8 -1
- package/android/src/main/java/com/reactnativekeyboardcontroller/TranslateDeferringInsetsAnimationCallback.kt +6 -4
- package/ios/KeyboardController.xcodeproj/project.xcworkspace/xcuserdata/kiryl.xcuserdatad/UserInterfaceState.xcuserstate +0 -0
- package/ios/KeyboardControllerModule.m +2 -2
- package/ios/KeyboardControllerModule.swift +15 -0
- package/ios/KeyboardControllerViewManager.m +1 -1
- package/ios/KeyboardControllerViewManager.swift +14 -10
- package/lib/commonjs/animated.js +5 -3
- package/lib/commonjs/animated.js.map +1 -1
- package/lib/commonjs/native.js.map +1 -1
- package/lib/module/animated.js +5 -3
- package/lib/module/animated.js.map +1 -1
- package/lib/module/native.js.map +1 -1
- package/lib/typescript/animated.d.ts +13 -2
- package/lib/typescript/native.d.ts +3 -5
- package/package.json +1 -1
- package/src/animated.tsx +34 -18
- package/src/native.ts +4 -5
package/README.md
CHANGED
|
@@ -7,24 +7,25 @@ Keyboard manager which works in identical way on both iOS and Android.
|
|
|
7
7
|
## Demonstration
|
|
8
8
|
|
|
9
9
|
<div>
|
|
10
|
-
<img align="right" width="
|
|
11
|
-
<img align="right" width="30%" style="margin-left: 20px" src="./gifs/android.gif?raw=true">
|
|
10
|
+
<img align="right" width="28.65%" style="margin-left: 20px" src="./gifs/ios.gif?raw=true">
|
|
11
|
+
<img align="right" width="30%" style="margin-left: 20px" src="./gifs/android.gif?raw=true">
|
|
12
12
|
</div>
|
|
13
13
|
|
|
14
14
|
- mapping keyboard appearance to animated values 😎
|
|
15
|
-
- missing `keyboardWillShow
|
|
15
|
+
- missing `keyboardWillShow` / `keyboardWillHide` events are available on Android 😍
|
|
16
16
|
- module for changing soft input mode on Android 🤔
|
|
17
17
|
- reanimated support 🚀
|
|
18
18
|
- interactive keyboard dismissing (planned) 👆📱
|
|
19
19
|
- and more is coming... Stay tuned! 😊
|
|
20
20
|
|
|
21
|
+
<br clear="right" />
|
|
22
|
+
|
|
21
23
|
## Installation
|
|
22
24
|
|
|
23
25
|
Install `react-native-keyboard-controller` package from npm:
|
|
24
26
|
|
|
25
27
|
```sh
|
|
26
28
|
yarn add react-native-keyboard-controller
|
|
27
|
-
|
|
28
29
|
# or
|
|
29
30
|
# npm install react-native-keyboard-controller --save
|
|
30
31
|
```
|
package/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt
CHANGED
|
@@ -5,12 +5,14 @@ import androidx.core.view.*
|
|
|
5
5
|
import com.facebook.react.bridge.ReactApplicationContext
|
|
6
6
|
import com.facebook.react.common.MapBuilder
|
|
7
7
|
import com.facebook.react.uimanager.ThemedReactContext
|
|
8
|
+
import com.facebook.react.uimanager.annotations.ReactProp
|
|
8
9
|
import com.facebook.react.views.view.ReactViewGroup
|
|
9
10
|
import com.facebook.react.views.view.ReactViewManager
|
|
10
11
|
import com.reactnativekeyboardcontroller.events.KeyboardTransitionEvent
|
|
11
12
|
|
|
12
13
|
class KeyboardControllerViewManager(reactContext: ReactApplicationContext) : ReactViewManager() {
|
|
13
14
|
private var mReactContext = reactContext
|
|
15
|
+
private var isStatusBarTranslucent = false
|
|
14
16
|
|
|
15
17
|
override fun getName() = "KeyboardControllerView"
|
|
16
18
|
|
|
@@ -23,7 +25,7 @@ class KeyboardControllerViewManager(reactContext: ReactApplicationContext) : Rea
|
|
|
23
25
|
R.id.action_bar_root
|
|
24
26
|
)
|
|
25
27
|
content?.setPadding(
|
|
26
|
-
0, insets?.getInsets(WindowInsetsCompat.Type.systemBars())?.top ?: 0, 0,
|
|
28
|
+
0, if (this.isStatusBarTranslucent) 0 else insets?.getInsets(WindowInsetsCompat.Type.systemBars())?.top ?: 0, 0,
|
|
27
29
|
insets?.getInsets(WindowInsetsCompat.Type.navigationBars())?.bottom ?: 0
|
|
28
30
|
)
|
|
29
31
|
|
|
@@ -46,6 +48,11 @@ class KeyboardControllerViewManager(reactContext: ReactApplicationContext) : Rea
|
|
|
46
48
|
return view
|
|
47
49
|
}
|
|
48
50
|
|
|
51
|
+
@ReactProp(name = "statusBarTranslucent")
|
|
52
|
+
fun setStatusBarTranslucent(view: ReactViewGroup, isStatusBarTranslucent: Boolean) {
|
|
53
|
+
this.isStatusBarTranslucent = isStatusBarTranslucent
|
|
54
|
+
}
|
|
55
|
+
|
|
49
56
|
override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
|
|
50
57
|
val map: MutableMap<String, Any> = MapBuilder.of(
|
|
51
58
|
KeyboardTransitionEvent.EVENT_NAME,
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
package com.reactnativekeyboardcontroller
|
|
18
18
|
|
|
19
19
|
import android.content.Context
|
|
20
|
+
import android.util.Log
|
|
20
21
|
import androidx.core.graphics.Insets
|
|
21
22
|
import androidx.core.view.ViewCompat
|
|
22
23
|
import androidx.core.view.WindowInsetsAnimationCompat
|
|
@@ -56,6 +57,7 @@ class TranslateDeferringInsetsAnimationCallback(
|
|
|
56
57
|
dispatchMode: Int = DISPATCH_MODE_STOP,
|
|
57
58
|
val context: ReactApplicationContext?
|
|
58
59
|
) : WindowInsetsAnimationCompat.Callback(dispatchMode) {
|
|
60
|
+
private val TAG = TranslateDeferringInsetsAnimationCallback::class.qualifiedName
|
|
59
61
|
private var persistentKeyboardHeight = 0
|
|
60
62
|
|
|
61
63
|
init {
|
|
@@ -81,8 +83,8 @@ class TranslateDeferringInsetsAnimationCallback(
|
|
|
81
83
|
params.putInt("height", keyboardHeight)
|
|
82
84
|
context?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)?.emit("KeyboardController::" + if(!isKeyboardVisible) "keyboardWillHide" else "keyboardWillShow", params)
|
|
83
85
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
+
Log.i(TAG, "KeyboardController::" + if(!isKeyboardVisible) "keyboardWillHide" else "keyboardWillShow")
|
|
87
|
+
Log.i(TAG, "HEIGHT:: $keyboardHeight")
|
|
86
88
|
|
|
87
89
|
return super.onStart(animation, bounds)
|
|
88
90
|
}
|
|
@@ -95,7 +97,7 @@ class TranslateDeferringInsetsAnimationCallback(
|
|
|
95
97
|
val params: WritableMap = Arguments.createMap()
|
|
96
98
|
context?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)?.emit("KeyboardController::" + if(!isKeyboardVisible) "keyboardDidHide" else "keyboardDidShow", params)
|
|
97
99
|
|
|
98
|
-
|
|
100
|
+
Log.i(TAG, "KeyboardController::" + if(!isKeyboardVisible) "keyboardDidHide" else "keyboardDidShow")
|
|
99
101
|
}
|
|
100
102
|
|
|
101
103
|
private fun isKeyboardVisible(): Boolean {
|
|
@@ -138,7 +140,7 @@ class TranslateDeferringInsetsAnimationCallback(
|
|
|
138
140
|
} catch (e: ArithmeticException) {
|
|
139
141
|
// do nothing, send progress as 0
|
|
140
142
|
}
|
|
141
|
-
|
|
143
|
+
Log.i(TAG, "DiffY: $diffY $height")
|
|
142
144
|
|
|
143
145
|
context
|
|
144
146
|
.getNativeModule(UIManagerModule::class.java)
|
|
Binary file
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
// Copyright © 2022 Facebook. All rights reserved.
|
|
7
7
|
//
|
|
8
8
|
|
|
9
|
-
#import
|
|
10
|
-
#import
|
|
9
|
+
#import <React/RCTBridgeModule.h>
|
|
10
|
+
#import <React/RCTEventEmitter.h>
|
|
11
11
|
|
|
12
12
|
@interface RCT_EXTERN_MODULE(KeyboardController, RCTEventEmitter)
|
|
13
13
|
|
|
@@ -13,6 +13,7 @@ import AVFoundation
|
|
|
13
13
|
@objc(KeyboardController)
|
|
14
14
|
class KeyboardController: RCTEventEmitter {
|
|
15
15
|
public static var shared: KeyboardController?
|
|
16
|
+
private var hasListeners = false
|
|
16
17
|
|
|
17
18
|
override class func requiresMainQueueSetup() -> Bool {
|
|
18
19
|
return false
|
|
@@ -35,4 +36,18 @@ class KeyboardController: RCTEventEmitter {
|
|
|
35
36
|
"KeyboardController::keyboardDidHide"
|
|
36
37
|
]
|
|
37
38
|
}
|
|
39
|
+
|
|
40
|
+
@objc open override func startObserving() {
|
|
41
|
+
hasListeners = true
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@objc open override func stopObserving() {
|
|
45
|
+
hasListeners = false
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@objc open override func sendEvent(withName name: String!, body: Any!) {
|
|
49
|
+
if (hasListeners) {
|
|
50
|
+
super.sendEvent(withName: name, body: body)
|
|
51
|
+
}
|
|
52
|
+
}
|
|
38
53
|
}
|
|
@@ -23,11 +23,20 @@ class KeyboardControllerView : UIView {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
override func willMove(toWindow newWindow: UIWindow?) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
if (newWindow == nil) {
|
|
27
|
+
// Will be removed from a window
|
|
28
|
+
NotificationCenter.default.removeObserver(self)
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
override func didMoveToWindow() {
|
|
33
|
+
if (self.window != nil) {
|
|
34
|
+
// Added to a window
|
|
35
|
+
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillDisappear), name: UIResponder.keyboardWillHideNotification, object: nil)
|
|
36
|
+
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillAppear), name: UIResponder.keyboardWillShowNotification, object: nil)
|
|
37
|
+
NotificationCenter.default.addObserver(self, selector: #selector(keyboardDidAppear), name: UIResponder.keyboardDidShowNotification, object: nil)
|
|
38
|
+
NotificationCenter.default.addObserver(self, selector: #selector(keyboardDidDisappear), name: UIResponder.keyboardDidHideNotification, object: nil)
|
|
39
|
+
}
|
|
31
40
|
}
|
|
32
41
|
|
|
33
42
|
@objc func keyboardWillAppear(_ notification: Notification) {
|
|
@@ -66,9 +75,4 @@ class KeyboardControllerView : UIView {
|
|
|
66
75
|
data["height"] = 0
|
|
67
76
|
KeyboardController.shared?.sendEvent(withName: "KeyboardController::keyboardDidHide", body: data)
|
|
68
77
|
}
|
|
69
|
-
|
|
70
|
-
override func willRemoveSubview(_ subview: UIView) {
|
|
71
|
-
super.willRemoveSubview(subview)
|
|
72
|
-
NotificationCenter.default.removeObserver(self) // TODO: correct place?
|
|
73
|
-
}
|
|
74
78
|
}
|
package/lib/commonjs/animated.js
CHANGED
|
@@ -84,7 +84,8 @@ exports.styles = styles;
|
|
|
84
84
|
|
|
85
85
|
const KeyboardProvider = _ref => {
|
|
86
86
|
let {
|
|
87
|
-
children
|
|
87
|
+
children,
|
|
88
|
+
statusBarTranslucent
|
|
88
89
|
} = _ref;
|
|
89
90
|
const progress = (0, _react.useMemo)(() => new _reactNative.Animated.Value(0), []);
|
|
90
91
|
const height = (0, _react.useMemo)(() => new _reactNative.Animated.Value(0), []);
|
|
@@ -121,8 +122,9 @@ const KeyboardProvider = _ref => {
|
|
|
121
122
|
}, /*#__PURE__*/_react.default.createElement(KeyboardControllerViewAnimated, {
|
|
122
123
|
onKeyboardMoveReanimated: handler,
|
|
123
124
|
onKeyboardMove: onKeyboardMove,
|
|
125
|
+
statusBarTranslucent: statusBarTranslucent,
|
|
124
126
|
style: styles.container
|
|
125
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
127
|
+
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
126
128
|
style: [// we are using this small hack, because if the component (where
|
|
127
129
|
// animated value has been used) is unmounted, then animation will
|
|
128
130
|
// stop receiving events (seems like it's react-native optimization).
|
|
@@ -138,7 +140,7 @@ const KeyboardProvider = _ref => {
|
|
|
138
140
|
translateY: progress
|
|
139
141
|
}]
|
|
140
142
|
}]
|
|
141
|
-
}), children));
|
|
143
|
+
}), children)));
|
|
142
144
|
};
|
|
143
145
|
|
|
144
146
|
exports.KeyboardProvider = KeyboardProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["animated.tsx"],"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","React","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","progressSV","heightSV","nativeEvent","useNativeDriver","handler","transform","translateX","translateY"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAKA;;;;;;AAQA,MAAMA,8BAA8B,GAAGC,+BAAWC,uBAAX,CACrCC,sBAASD,uBAAT,CACEE,8BADF,CADqC,CAAvC;;AAkBA,MAAMC,cAAwC,GAAG;AAC/CC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,QAAQ,EAAE,IAAIJ,sBAASK,KAAb,CAAmB,CAAnB,CADF;AAERC,IAAAA,MAAM,EAAE,IAAIN,sBAASK,KAAb,CAAmB,CAAnB;AAFA,GADqC;AAK/CE,EAAAA,UAAU,EAAE;AACVH,IAAAA,QAAQ,EAAE;AAAEI,MAAAA,KAAK,EAAE;AAAT,KADA;AAEVF,IAAAA,MAAM,EAAE;AAAEE,MAAAA,KAAK,EAAE;AAAT;AAFE;AALmC,CAAjD;;AAUA,MAAMC,eAAe,gBAAGC,eAAMC,aAAN,CAAoBT,cAApB,CAAxB;;AAEO,MAAMU,oBAAoB,GAAG,MAAuB;AACzD;AACA,QAAMC,OAAO,GAAG,uBAAWJ,eAAX,CAAhB;AAEA,SAAOI,OAAO,CAACV,QAAf;AACD,CALM;;;;AAOA,MAAMW,8BAA8B,GAAG,MAAyB;AACrE;AACA,QAAMD,OAAO,GAAG,uBAAWJ,eAAX,CAAhB;AAEA,SAAOI,OAAO,CAACN,UAAf;AACD,CALM;;;;AAOP,SAASQ,0BAAT,CACEC,QADF,EAIEC,YAJF,EAKE;AACA,QAAM;AAAEJ,IAAAA,OAAF;AAAWK,IAAAA;AAAX,MAAoC,uCAAWF,QAAX,EAAqBC,YAArB,CAA1C;AAEA,SAAO,qCACJE,KAAD,IAAuC;AACrC;;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAqBJ,QAA3B;;AAEA,QAAII,cAAc,IAAID,KAAK,CAACE,SAAN,CAAgBC,QAAhB,CAAyB,gBAAzB,CAAtB,EAAkE;AAChEF,MAAAA,cAAc,CAACD,KAAD,EAAQN,OAAR,CAAd;AACD;AACF,GARI,EASL,CAAC,gBAAD,CATK,EAULK,oBAVK,CAAP;AAYD;;AAOM,MAAMK,MAAM,GAAGC,wBAAWC,MAAX,CAA0B;AAC9CC,EAAAA,SAAS,EAAE;AACTC,IAAAA,IAAI,EAAE;AADG,GADmC;AAI9CC,EAAAA,MAAM,EAAE;AACNC,IAAAA,OAAO,EAAE,MADH;AAENC,IAAAA,QAAQ,EAAE;AAFJ;AAJsC,CAA1B,CAAf;;;;
|
|
1
|
+
{"version":3,"sources":["animated.tsx"],"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","React","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","progressSV","heightSV","nativeEvent","useNativeDriver","handler","transform","translateX","translateY"],"mappings":"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","sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { Animated, StyleSheet, ViewStyle } from 'react-native';\nimport Reanimated, {\n useEvent,\n useHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport {\n EventWithName,\n KeyboardControllerProps,\n KeyboardControllerView,\n NativeEvent,\n useResizeMode,\n} from './native';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype AnimatedContext = {\n progress: Animated.Value;\n height: Animated.Value;\n};\ntype ReanimatedContext = {\n progress: Reanimated.SharedValue<number>;\n height: Reanimated.SharedValue<number>;\n};\ntype KeyboardAnimationContext = {\n animated: AnimatedContext;\n reanimated: ReanimatedContext;\n};\nconst defaultContext: KeyboardAnimationContext = {\n animated: {\n progress: new Animated.Value(0),\n height: new Animated.Value(0),\n },\n reanimated: {\n progress: { value: 0 },\n height: { value: 0 },\n },\n};\nconst KeyboardContext = React.createContext(defaultContext);\n\nexport const useKeyboardAnimation = (): AnimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.animated;\n};\n\nexport const useReanimatedKeyboardAnimation = (): ReanimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.reanimated;\n};\n\nfunction useAnimatedKeyboardHandler<TContext extends Record<string, unknown>>(\n handlers: {\n onKeyboardMove?: (e: NativeEvent, context: TContext) => void;\n },\n dependencies?: ReadonlyArray<unknown>\n) {\n const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);\n\n return useEvent(\n (event: EventWithName<NativeEvent>) => {\n 'worklet';\n const { onKeyboardMove } = handlers;\n\n if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {\n onKeyboardMove(event, context);\n }\n },\n ['onKeyboardMove'],\n doDependenciesDiffer\n );\n}\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nexport const 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\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n}: KeyboardProviderProps) => {\n const progress = useMemo(() => new Animated.Value(0), []);\n const height = useMemo(() => new Animated.Value(0), []);\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const context = useMemo(\n () => ({\n animated: { progress: progress, height: height },\n reanimated: { progress: progressSV, height: heightSV },\n }),\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\n const handler = useAnimatedKeyboardHandler(\n {\n onKeyboardMove: (event: NativeEvent) => {\n 'worklet';\n progressSV.value = event.progress;\n heightSV.value = event.height;\n },\n },\n []\n );\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n onKeyboardMoveReanimated={handler}\n onKeyboardMove={onKeyboardMove}\n statusBarTranslucent={statusBarTranslucent}\n style={styles.container}\n >\n <>\n <Animated.View\n style={[\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 styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ]}\n />\n {children}\n </>\n </KeyboardControllerViewAnimated>\n </KeyboardContext.Provider>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["native.ts"],"names":["LINKING_ERROR","Platform","select","ios","default","AndroidSoftInputModes","ComponentName","RCTKeyboardController","NativeModules","KeyboardController","eventEmitter","NativeEventEmitter","KeyboardEvents","addListener","name","cb","KeyboardControllerView","UIManager","getViewManagerConfig","Error","useResizeMode","setInputMode","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode"],"mappings":";;;;;;;AAAA;;AACA;;AAUA,MAAMA,aAAa,GAChB,2FAAD,GACAC,sBAASC,MAAT,CAAgB;AAAEC,EAAAA,GAAG,EAAE,gCAAP;AAAyCC,EAAAA,OAAO,EAAE;AAAlD,CAAhB,CADA,GAEA,sDAFA,GAGA,6CAJF;IAMYC,qB;;;WAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;GAAAA,qB,qCAAAA,qB;;
|
|
1
|
+
{"version":3,"sources":["native.ts"],"names":["LINKING_ERROR","Platform","select","ios","default","AndroidSoftInputModes","ComponentName","RCTKeyboardController","NativeModules","KeyboardController","eventEmitter","NativeEventEmitter","KeyboardEvents","addListener","name","cb","KeyboardControllerView","UIManager","getViewManagerConfig","Error","useResizeMode","setInputMode","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode"],"mappings":";;;;;;;AAAA;;AACA;;AAUA,MAAMA,aAAa,GAChB,2FAAD,GACAC,sBAASC,MAAT,CAAgB;AAAEC,EAAAA,GAAG,EAAE,gCAAP;AAAyCC,EAAAA,OAAO,EAAE;AAAlD,CAAhB,CADA,GAEA,sDAFA,GAGA,6CAJF;IAMYC,qB;;;WAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;GAAAA,qB,qCAAAA,qB;;AA4BZ,MAAMC,aAAa,GAAG,wBAAtB;AAEA,MAAMC,qBAAqB,GAAGC,2BAAcC,kBAA5C;AACO,MAAMA,kBAAkB,GAAGF,qBAA3B;;AAEP,MAAMG,YAAY,GAAG,IAAIC,+BAAJ,CAAuBJ,qBAAvB,CAArB;AASO,MAAMK,cAAc,GAAG;AAC5BC,EAAAA,WAAW,EAAE,CACXC,IADW,EAEXC,EAFW,KAGRL,YAAY,CAACG,WAAb,CAAyB,yBAAyBC,IAAlD,EAAwDC,EAAxD;AAJuB,CAAvB;;AAMA,MAAMC,sBAAsB,GACjCC,uBAAUC,oBAAV,CAA+BZ,aAA/B,KAAiD,IAAjD,GACI,yCAAgDA,aAAhD,CADJ,GAEI,MAAM;AACJ,QAAM,IAAIa,KAAJ,CAAUnB,aAAV,CAAN;AACD,CALA;;;AAOA,MAAMoB,aAAa,GAAG,MAAM;AACjC,wBAAU,MAAM;AACdX,IAAAA,kBAAkB,CAACY,YAAnB,CACEhB,qBAAqB,CAACiB,wBADxB;AAIA,WAAO,MAAMb,kBAAkB,CAACc,cAAnB,EAAb;AACD,GAND,EAMG,EANH;AAOD,CARM","sourcesContent":["import { useEffect } from 'react';\nimport {\n requireNativeComponent,\n UIManager,\n Platform,\n NativeModules,\n NativeEventEmitter,\n NativeSyntheticEvent,\n ViewProps,\n} from 'react-native';\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 managed workflow\\n';\n\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}\n\nexport type NativeEvent = {\n progress: number;\n height: number;\n};\nexport type EventWithName<T> = {\n eventName: string;\n} & T;\nexport type KeyboardControllerProps = {\n onKeyboardMove: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;\n // fake prop used to activate reanimated bindings\n onKeyboardMoveReanimated: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n statusBarTranslucent?: boolean;\n} & ViewProps;\ntype KeyboardController = {\n // android only\n setDefaultMode: () => void;\n setInputMode: (mode: AndroidSoftInputModes) => void;\n};\n\nconst ComponentName = 'KeyboardControllerView';\n\nconst RCTKeyboardController = NativeModules.KeyboardController;\nexport const KeyboardController = RCTKeyboardController as KeyboardController;\n\nconst eventEmitter = new NativeEventEmitter(RCTKeyboardController);\ntype KeyboardControllerEvents =\n | 'keyboardWillShow'\n | 'keyboardDidShow'\n | 'keyboardWillHide'\n | 'keyboardDidHide';\ntype KeyboardEvent = {\n height: number;\n};\nexport const KeyboardEvents = {\n addListener: (\n name: KeyboardControllerEvents,\n cb: (e: KeyboardEvent) => void\n ) => eventEmitter.addListener('KeyboardController::' + name, cb),\n};\nexport const KeyboardControllerView =\n UIManager.getViewManagerConfig(ComponentName) != null\n ? requireNativeComponent<KeyboardControllerProps>(ComponentName)\n : () => {\n throw new Error(LINKING_ERROR);\n };\n\nexport const useResizeMode = () => {\n useEffect(() => {\n KeyboardController.setInputMode(\n AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE\n );\n\n return () => KeyboardController.setDefaultMode();\n }, []);\n};\n"]}
|
package/lib/module/animated.js
CHANGED
|
@@ -58,7 +58,8 @@ export const styles = StyleSheet.create({
|
|
|
58
58
|
});
|
|
59
59
|
export const KeyboardProvider = _ref => {
|
|
60
60
|
let {
|
|
61
|
-
children
|
|
61
|
+
children,
|
|
62
|
+
statusBarTranslucent
|
|
62
63
|
} = _ref;
|
|
63
64
|
const progress = useMemo(() => new Animated.Value(0), []);
|
|
64
65
|
const height = useMemo(() => new Animated.Value(0), []);
|
|
@@ -95,8 +96,9 @@ export const KeyboardProvider = _ref => {
|
|
|
95
96
|
}, /*#__PURE__*/React.createElement(KeyboardControllerViewAnimated, {
|
|
96
97
|
onKeyboardMoveReanimated: handler,
|
|
97
98
|
onKeyboardMove: onKeyboardMove,
|
|
99
|
+
statusBarTranslucent: statusBarTranslucent,
|
|
98
100
|
style: styles.container
|
|
99
|
-
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
101
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated.View, {
|
|
100
102
|
style: [// we are using this small hack, because if the component (where
|
|
101
103
|
// animated value has been used) is unmounted, then animation will
|
|
102
104
|
// stop receiving events (seems like it's react-native optimization).
|
|
@@ -112,6 +114,6 @@ export const KeyboardProvider = _ref => {
|
|
|
112
114
|
translateY: progress
|
|
113
115
|
}]
|
|
114
116
|
}]
|
|
115
|
-
}), children));
|
|
117
|
+
}), children)));
|
|
116
118
|
};
|
|
117
119
|
//# sourceMappingURL=animated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["animated.tsx"],"names":["React","useContext","useMemo","Animated","StyleSheet","Reanimated","useEvent","useHandler","useSharedValue","KeyboardControllerView","useResizeMode","KeyboardControllerViewAnimated","createAnimatedComponent","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","create","container","flex","hidden","display","position","KeyboardProvider","children","progressSV","heightSV","nativeEvent","useNativeDriver","handler","transform","translateX","translateY"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,SAASC,QAAT,EAAmBC,UAAnB,QAAgD,cAAhD;AACA,OAAOC,UAAP,IACEC,QADF,EAEEC,UAFF,EAGEC,cAHF,QAIO,yBAJP;AAKA,SAGEC,sBAHF,EAKEC,aALF,QAMO,UANP;AAQA,MAAMC,8BAA8B,GAAGN,UAAU,CAACO,uBAAX,CACrCT,QAAQ,CAACS,uBAAT,CACEH,sBADF,CADqC,CAAvC;AAkBA,MAAMI,cAAwC,GAAG;AAC/CC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,QAAQ,EAAE,IAAIZ,QAAQ,CAACa,KAAb,CAAmB,CAAnB,CADF;AAERC,IAAAA,MAAM,EAAE,IAAId,QAAQ,CAACa,KAAb,CAAmB,CAAnB;AAFA,GADqC;AAK/CE,EAAAA,UAAU,EAAE;AACVH,IAAAA,QAAQ,EAAE;AAAEI,MAAAA,KAAK,EAAE;AAAT,KADA;AAEVF,IAAAA,MAAM,EAAE;AAAEE,MAAAA,KAAK,EAAE;AAAT;AAFE;AALmC,CAAjD;AAUA,MAAMC,eAAe,gBAAGpB,KAAK,CAACqB,aAAN,CAAoBR,cAApB,CAAxB;AAEA,OAAO,MAAMS,oBAAoB,GAAG,MAAuB;AACzDZ,EAAAA,aAAa;AACb,QAAMa,OAAO,GAAGtB,UAAU,CAACmB,eAAD,CAA1B;AAEA,SAAOG,OAAO,CAACT,QAAf;AACD,CALM;AAOP,OAAO,MAAMU,8BAA8B,GAAG,MAAyB;AACrEd,EAAAA,aAAa;AACb,QAAMa,OAAO,GAAGtB,UAAU,CAACmB,eAAD,CAA1B;AAEA,SAAOG,OAAO,CAACL,UAAf;AACD,CALM;;AAOP,SAASO,0BAAT,CACEC,QADF,EAIEC,YAJF,EAKE;AACA,QAAM;AAAEJ,IAAAA,OAAF;AAAWK,IAAAA;AAAX,MAAoCrB,UAAU,CAACmB,QAAD,EAAWC,YAAX,CAApD;AAEA,SAAOrB,QAAQ,CACZuB,KAAD,IAAuC;AACrC;;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAqBJ,QAA3B;;AAEA,QAAII,cAAc,IAAID,KAAK,CAACE,SAAN,CAAgBC,QAAhB,CAAyB,gBAAzB,CAAtB,EAAkE;AAChEF,MAAAA,cAAc,CAACD,KAAD,EAAQN,OAAR,CAAd;AACD;AACF,GARY,EASb,CAAC,gBAAD,CATa,EAUbK,oBAVa,CAAf;AAYD;;AAOD,OAAO,MAAMK,MAAM,GAAG7B,UAAU,CAAC8B,MAAX,CAA0B;AAC9CC,EAAAA,SAAS,EAAE;AACTC,IAAAA,IAAI,EAAE;AADG,GADmC;AAI9CC,EAAAA,MAAM,EAAE;AACNC,IAAAA,OAAO,EAAE,MADH;AAENC,IAAAA,QAAQ,EAAE;AAFJ;AAJsC,CAA1B,CAAf;
|
|
1
|
+
{"version":3,"sources":["animated.tsx"],"names":["React","useContext","useMemo","Animated","StyleSheet","Reanimated","useEvent","useHandler","useSharedValue","KeyboardControllerView","useResizeMode","KeyboardControllerViewAnimated","createAnimatedComponent","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","progressSV","heightSV","nativeEvent","useNativeDriver","handler","transform","translateX","translateY"],"mappings":"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","sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { Animated, StyleSheet, ViewStyle } from 'react-native';\nimport Reanimated, {\n useEvent,\n useHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport {\n EventWithName,\n KeyboardControllerProps,\n KeyboardControllerView,\n NativeEvent,\n useResizeMode,\n} from './native';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype AnimatedContext = {\n progress: Animated.Value;\n height: Animated.Value;\n};\ntype ReanimatedContext = {\n progress: Reanimated.SharedValue<number>;\n height: Reanimated.SharedValue<number>;\n};\ntype KeyboardAnimationContext = {\n animated: AnimatedContext;\n reanimated: ReanimatedContext;\n};\nconst defaultContext: KeyboardAnimationContext = {\n animated: {\n progress: new Animated.Value(0),\n height: new Animated.Value(0),\n },\n reanimated: {\n progress: { value: 0 },\n height: { value: 0 },\n },\n};\nconst KeyboardContext = React.createContext(defaultContext);\n\nexport const useKeyboardAnimation = (): AnimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.animated;\n};\n\nexport const useReanimatedKeyboardAnimation = (): ReanimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.reanimated;\n};\n\nfunction useAnimatedKeyboardHandler<TContext extends Record<string, unknown>>(\n handlers: {\n onKeyboardMove?: (e: NativeEvent, context: TContext) => void;\n },\n dependencies?: ReadonlyArray<unknown>\n) {\n const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);\n\n return useEvent(\n (event: EventWithName<NativeEvent>) => {\n 'worklet';\n const { onKeyboardMove } = handlers;\n\n if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {\n onKeyboardMove(event, context);\n }\n },\n ['onKeyboardMove'],\n doDependenciesDiffer\n );\n}\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nexport const 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\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n}: KeyboardProviderProps) => {\n const progress = useMemo(() => new Animated.Value(0), []);\n const height = useMemo(() => new Animated.Value(0), []);\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const context = useMemo(\n () => ({\n animated: { progress: progress, height: height },\n reanimated: { progress: progressSV, height: heightSV },\n }),\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\n const handler = useAnimatedKeyboardHandler(\n {\n onKeyboardMove: (event: NativeEvent) => {\n 'worklet';\n progressSV.value = event.progress;\n heightSV.value = event.height;\n },\n },\n []\n );\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n onKeyboardMoveReanimated={handler}\n onKeyboardMove={onKeyboardMove}\n statusBarTranslucent={statusBarTranslucent}\n style={styles.container}\n >\n <>\n <Animated.View\n style={[\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 styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ]}\n />\n {children}\n </>\n </KeyboardControllerViewAnimated>\n </KeyboardContext.Provider>\n );\n};\n"]}
|
package/lib/module/native.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["native.ts"],"names":["useEffect","requireNativeComponent","UIManager","Platform","NativeModules","NativeEventEmitter","LINKING_ERROR","select","ios","default","AndroidSoftInputModes","ComponentName","RCTKeyboardController","KeyboardController","eventEmitter","KeyboardEvents","addListener","name","cb","KeyboardControllerView","getViewManagerConfig","Error","useResizeMode","setInputMode","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["native.ts"],"names":["useEffect","requireNativeComponent","UIManager","Platform","NativeModules","NativeEventEmitter","LINKING_ERROR","select","ios","default","AndroidSoftInputModes","ComponentName","RCTKeyboardController","KeyboardController","eventEmitter","KeyboardEvents","addListener","name","cb","KeyboardControllerView","getViewManagerConfig","Error","useResizeMode","setInputMode","SOFT_INPUT_ADJUST_RESIZE","setDefaultMode"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;AACA,SACEC,sBADF,EAEEC,SAFF,EAGEC,QAHF,EAIEC,aAJF,EAKEC,kBALF,QAQO,cARP;AAUA,MAAMC,aAAa,GAChB,2FAAD,GACAH,QAAQ,CAACI,MAAT,CAAgB;AAAEC,EAAAA,GAAG,EAAE,gCAAP;AAAyCC,EAAAA,OAAO,EAAE;AAAlD,CAAhB,CADA,GAEA,sDAFA,GAGA,6CAJF;AAMA,WAAYC,qBAAZ;;WAAYA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;AAAAA,EAAAA,qB,CAAAA,qB;GAAAA,qB,KAAAA,qB;;AA4BZ,MAAMC,aAAa,GAAG,wBAAtB;AAEA,MAAMC,qBAAqB,GAAGR,aAAa,CAACS,kBAA5C;AACA,OAAO,MAAMA,kBAAkB,GAAGD,qBAA3B;AAEP,MAAME,YAAY,GAAG,IAAIT,kBAAJ,CAAuBO,qBAAvB,CAArB;AASA,OAAO,MAAMG,cAAc,GAAG;AAC5BC,EAAAA,WAAW,EAAE,CACXC,IADW,EAEXC,EAFW,KAGRJ,YAAY,CAACE,WAAb,CAAyB,yBAAyBC,IAAlD,EAAwDC,EAAxD;AAJuB,CAAvB;AAMP,OAAO,MAAMC,sBAAsB,GACjCjB,SAAS,CAACkB,oBAAV,CAA+BT,aAA/B,KAAiD,IAAjD,GACIV,sBAAsB,CAA0BU,aAA1B,CAD1B,GAEI,MAAM;AACJ,QAAM,IAAIU,KAAJ,CAAUf,aAAV,CAAN;AACD,CALA;AAOP,OAAO,MAAMgB,aAAa,GAAG,MAAM;AACjCtB,EAAAA,SAAS,CAAC,MAAM;AACda,IAAAA,kBAAkB,CAACU,YAAnB,CACEb,qBAAqB,CAACc,wBADxB;AAIA,WAAO,MAAMX,kBAAkB,CAACY,cAAnB,EAAb;AACD,GANQ,EAMN,EANM,CAAT;AAOD,CARM","sourcesContent":["import { useEffect } from 'react';\nimport {\n requireNativeComponent,\n UIManager,\n Platform,\n NativeModules,\n NativeEventEmitter,\n NativeSyntheticEvent,\n ViewProps,\n} from 'react-native';\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 managed workflow\\n';\n\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}\n\nexport type NativeEvent = {\n progress: number;\n height: number;\n};\nexport type EventWithName<T> = {\n eventName: string;\n} & T;\nexport type KeyboardControllerProps = {\n onKeyboardMove: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;\n // fake prop used to activate reanimated bindings\n onKeyboardMoveReanimated: (\n e: NativeSyntheticEvent<EventWithName<NativeEvent>>\n ) => void;\n statusBarTranslucent?: boolean;\n} & ViewProps;\ntype KeyboardController = {\n // android only\n setDefaultMode: () => void;\n setInputMode: (mode: AndroidSoftInputModes) => void;\n};\n\nconst ComponentName = 'KeyboardControllerView';\n\nconst RCTKeyboardController = NativeModules.KeyboardController;\nexport const KeyboardController = RCTKeyboardController as KeyboardController;\n\nconst eventEmitter = new NativeEventEmitter(RCTKeyboardController);\ntype KeyboardControllerEvents =\n | 'keyboardWillShow'\n | 'keyboardDidShow'\n | 'keyboardWillHide'\n | 'keyboardDidHide';\ntype KeyboardEvent = {\n height: number;\n};\nexport const KeyboardEvents = {\n addListener: (\n name: KeyboardControllerEvents,\n cb: (e: KeyboardEvent) => void\n ) => eventEmitter.addListener('KeyboardController::' + name, cb),\n};\nexport const KeyboardControllerView =\n UIManager.getViewManagerConfig(ComponentName) != null\n ? requireNativeComponent<KeyboardControllerProps>(ComponentName)\n : () => {\n throw new Error(LINKING_ERROR);\n };\n\nexport const useResizeMode = () => {\n useEffect(() => {\n KeyboardController.setInputMode(\n AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE\n );\n\n return () => KeyboardController.setDefaultMode();\n }, []);\n};\n"]}
|
|
@@ -16,7 +16,18 @@ declare type Styles = {
|
|
|
16
16
|
hidden: ViewStyle;
|
|
17
17
|
};
|
|
18
18
|
export declare const styles: Styles;
|
|
19
|
-
|
|
19
|
+
declare type KeyboardProviderProps = {
|
|
20
20
|
children: React.ReactNode;
|
|
21
|
-
|
|
21
|
+
/**
|
|
22
|
+
* Set the value to `true`, if you use translucent status bar on Android.
|
|
23
|
+
* If you already control status bar translucency via `react-native-screens`
|
|
24
|
+
* or `StatusBar` component from `react-native`, you can ignore it.
|
|
25
|
+
* Defaults to `false`.
|
|
26
|
+
*
|
|
27
|
+
* @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14
|
|
28
|
+
* @platform android
|
|
29
|
+
*/
|
|
30
|
+
statusBarTranslucent?: boolean;
|
|
31
|
+
};
|
|
32
|
+
export declare const KeyboardProvider: ({ children, statusBarTranslucent, }: KeyboardProviderProps) => JSX.Element;
|
|
22
33
|
export {};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ViewStyle, NativeSyntheticEvent } from 'react-native';
|
|
1
|
+
import { NativeSyntheticEvent, ViewProps } from 'react-native';
|
|
3
2
|
export declare enum AndroidSoftInputModes {
|
|
4
3
|
SOFT_INPUT_ADJUST_NOTHING = 48,
|
|
5
4
|
SOFT_INPUT_ADJUST_PAN = 32,
|
|
@@ -14,11 +13,10 @@ export declare type EventWithName<T> = {
|
|
|
14
13
|
eventName: string;
|
|
15
14
|
} & T;
|
|
16
15
|
export declare type KeyboardControllerProps = {
|
|
17
|
-
style?: ViewStyle;
|
|
18
|
-
children: React.ReactNode;
|
|
19
16
|
onKeyboardMove: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
|
|
20
17
|
onKeyboardMoveReanimated: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
|
|
21
|
-
|
|
18
|
+
statusBarTranslucent?: boolean;
|
|
19
|
+
} & ViewProps;
|
|
22
20
|
declare type KeyboardController = {
|
|
23
21
|
setDefaultMode: () => void;
|
|
24
22
|
setInputMode: (mode: AndroidSoftInputModes) => void;
|
package/package.json
CHANGED
package/src/animated.tsx
CHANGED
|
@@ -94,11 +94,24 @@ export const styles = StyleSheet.create<Styles>({
|
|
|
94
94
|
},
|
|
95
95
|
});
|
|
96
96
|
|
|
97
|
+
type KeyboardProviderProps = {
|
|
98
|
+
children: React.ReactNode;
|
|
99
|
+
/**
|
|
100
|
+
* Set the value to `true`, if you use translucent status bar on Android.
|
|
101
|
+
* If you already control status bar translucency via `react-native-screens`
|
|
102
|
+
* or `StatusBar` component from `react-native`, you can ignore it.
|
|
103
|
+
* Defaults to `false`.
|
|
104
|
+
*
|
|
105
|
+
* @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14
|
|
106
|
+
* @platform android
|
|
107
|
+
*/
|
|
108
|
+
statusBarTranslucent?: boolean;
|
|
109
|
+
};
|
|
110
|
+
|
|
97
111
|
export const KeyboardProvider = ({
|
|
98
112
|
children,
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}) => {
|
|
113
|
+
statusBarTranslucent,
|
|
114
|
+
}: KeyboardProviderProps) => {
|
|
102
115
|
const progress = useMemo(() => new Animated.Value(0), []);
|
|
103
116
|
const height = useMemo(() => new Animated.Value(0), []);
|
|
104
117
|
const progressSV = useSharedValue(0);
|
|
@@ -143,23 +156,26 @@ export const KeyboardProvider = ({
|
|
|
143
156
|
<KeyboardControllerViewAnimated
|
|
144
157
|
onKeyboardMoveReanimated={handler}
|
|
145
158
|
onKeyboardMove={onKeyboardMove}
|
|
159
|
+
statusBarTranslucent={statusBarTranslucent}
|
|
146
160
|
style={styles.container}
|
|
147
161
|
>
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
162
|
+
<>
|
|
163
|
+
<Animated.View
|
|
164
|
+
style={[
|
|
165
|
+
// we are using this small hack, because if the component (where
|
|
166
|
+
// animated value has been used) is unmounted, then animation will
|
|
167
|
+
// stop receiving events (seems like it's react-native optimization).
|
|
168
|
+
// So we need to keep a reference to the animated value, to keep it's
|
|
169
|
+
// always mounted (keep a reference to an animated value).
|
|
170
|
+
//
|
|
171
|
+
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
172
|
+
// then close it and open it again (for example 'Animated transition').
|
|
173
|
+
styles.hidden,
|
|
174
|
+
{ transform: [{ translateX: height }, { translateY: progress }] },
|
|
175
|
+
]}
|
|
176
|
+
/>
|
|
177
|
+
{children}
|
|
178
|
+
</>
|
|
163
179
|
</KeyboardControllerViewAnimated>
|
|
164
180
|
</KeyboardContext.Provider>
|
|
165
181
|
);
|
package/src/native.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
requireNativeComponent,
|
|
4
4
|
UIManager,
|
|
5
5
|
Platform,
|
|
6
|
-
ViewStyle,
|
|
7
6
|
NativeModules,
|
|
8
7
|
NativeEventEmitter,
|
|
9
8
|
NativeSyntheticEvent,
|
|
9
|
+
ViewProps,
|
|
10
10
|
} from 'react-native';
|
|
11
11
|
|
|
12
12
|
const LINKING_ERROR =
|
|
@@ -30,14 +30,13 @@ export type EventWithName<T> = {
|
|
|
30
30
|
eventName: string;
|
|
31
31
|
} & T;
|
|
32
32
|
export type KeyboardControllerProps = {
|
|
33
|
-
style?: ViewStyle;
|
|
34
|
-
children: React.ReactNode;
|
|
35
33
|
onKeyboardMove: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
|
|
36
34
|
// fake prop used to activate reanimated bindings
|
|
37
35
|
onKeyboardMoveReanimated: (
|
|
38
36
|
e: NativeSyntheticEvent<EventWithName<NativeEvent>>
|
|
39
37
|
) => void;
|
|
40
|
-
|
|
38
|
+
statusBarTranslucent?: boolean;
|
|
39
|
+
} & ViewProps;
|
|
41
40
|
type KeyboardController = {
|
|
42
41
|
// android only
|
|
43
42
|
setDefaultMode: () => void;
|