react-native-keyboard-controller 1.5.4 → 1.5.6
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 -1
- package/ios/Extensions.swift +23 -0
- package/ios/KeyboardController.xcodeproj/project.pbxproj +4 -0
- package/ios/KeyboardControllerView.mm +1 -1
- package/ios/KeyboardControllerViewManager.swift +11 -3
- package/ios/KeyboardMovementObserver.swift +1 -13
- package/lib/commonjs/animated.js +2 -2
- package/lib/commonjs/animated.js.map +1 -1
- package/lib/module/animated.js +2 -2
- package/lib/module/animated.js.map +1 -1
- package/package.json +1 -1
- package/src/animated.tsx +12 -14
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Keyboard manager which works in identical way on both iOS and Android.
|
|
|
8
8
|
|
|
9
9
|
## Key features
|
|
10
10
|
|
|
11
|
-
- mapping keyboard
|
|
11
|
+
- mapping keyboard movement to animated values 😎
|
|
12
12
|
- missing `keyboardWillShow` / `keyboardWillHide` events are available on Android 😍
|
|
13
13
|
- module for changing soft input mode on Android 🤔
|
|
14
14
|
- reanimated support 🚀
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Extensions.swift
|
|
3
|
+
// KeyboardController
|
|
4
|
+
//
|
|
5
|
+
// Created by Kiryl Ziusko on 10/06/2023.
|
|
6
|
+
// Copyright © 2023 Facebook. All rights reserved.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
import Foundation
|
|
10
|
+
|
|
11
|
+
public extension CGFloat {
|
|
12
|
+
static func interpolate(inputRange: [CGFloat], outputRange: [CGFloat], currentValue: CGFloat) -> CGFloat {
|
|
13
|
+
let inputMin = inputRange.min() ?? 0
|
|
14
|
+
let inputMax = inputRange.max() ?? 1
|
|
15
|
+
let outputMin = outputRange.min() ?? 0
|
|
16
|
+
let outputMax = outputRange.max() ?? 1
|
|
17
|
+
|
|
18
|
+
let normalizedValue = (currentValue - inputMin) / (inputMax - inputMin)
|
|
19
|
+
let interpolatedValue = outputMin + (outputMax - outputMin) * normalizedValue
|
|
20
|
+
|
|
21
|
+
return interpolatedValue
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
objects = {
|
|
8
8
|
|
|
9
9
|
/* Begin PBXBuildFile section */
|
|
10
|
+
0807071E2A34807B00C05A19 /* Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0807071D2A34807B00C05A19 /* Extensions.swift */; };
|
|
10
11
|
F333F8D428996B8D0015B05F /* KeyboardControllerView.mm in Sources */ = {isa = PBXBuildFile; fileRef = F333F8D228996B8D0015B05F /* KeyboardControllerView.mm */; };
|
|
11
12
|
F359D34F28133C26000B6AFE /* KeyboardControllerModule.mm in Sources */ = {isa = PBXBuildFile; fileRef = F359D34E28133C26000B6AFE /* KeyboardControllerModule.mm */; };
|
|
12
13
|
F3626A0728B3FE760021B2D9 /* KeyboardMovementObserver.swift in Sources */ = {isa = PBXBuildFile; fileRef = F3626A0628B3FE760021B2D9 /* KeyboardMovementObserver.swift */; };
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
/* End PBXCopyFilesBuildPhase section */
|
|
28
29
|
|
|
29
30
|
/* Begin PBXFileReference section */
|
|
31
|
+
0807071D2A34807B00C05A19 /* Extensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Extensions.swift; sourceTree = "<group>"; };
|
|
30
32
|
134814201AA4EA6300B7C361 /* libKeyboardController.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libKeyboardController.a; sourceTree = BUILT_PRODUCTS_DIR; };
|
|
31
33
|
B3E7B5891CC2AC0600A0062D /* KeyboardControllerViewManager.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = KeyboardControllerViewManager.mm; sourceTree = "<group>"; };
|
|
32
34
|
F333F8D128996B1C0015B05F /* KeyboardControllerView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = KeyboardControllerView.h; sourceTree = "<group>"; };
|
|
@@ -62,6 +64,7 @@
|
|
|
62
64
|
58B511D21A9E6C8500147676 = {
|
|
63
65
|
isa = PBXGroup;
|
|
64
66
|
children = (
|
|
67
|
+
0807071D2A34807B00C05A19 /* Extensions.swift */,
|
|
65
68
|
F3F50667289E653B003091D6 /* KeyboardMoveEvent.h */,
|
|
66
69
|
F3F50668289E653B003091D6 /* KeyboardMoveEvent.m */,
|
|
67
70
|
F3626A0628B3FE760021B2D9 /* KeyboardMovementObserver.swift */,
|
|
@@ -134,6 +137,7 @@
|
|
|
134
137
|
buildActionMask = 2147483647;
|
|
135
138
|
files = (
|
|
136
139
|
F3626A0728B3FE760021B2D9 /* KeyboardMovementObserver.swift in Sources */,
|
|
140
|
+
0807071E2A34807B00C05A19 /* Extensions.swift in Sources */,
|
|
137
141
|
F359D34F28133C26000B6AFE /* KeyboardControllerModule.mm in Sources */,
|
|
138
142
|
F4FF95D7245B92E800C19C63 /* KeyboardControllerViewManager.swift in Sources */,
|
|
139
143
|
F333F8D428996B8D0015B05F /* KeyboardControllerView.mm in Sources */,
|
|
@@ -79,7 +79,7 @@ using namespace facebook::react;
|
|
|
79
79
|
|
|
80
80
|
// TODO: use built-in _eventEmitter once NativeAnimated module will use ModernEventemitter
|
|
81
81
|
RCTBridge *bridge = [RCTBridge currentBridge];
|
|
82
|
-
if (bridge) {
|
|
82
|
+
if (bridge && [bridge valueForKey:@"_jsThread"]) {
|
|
83
83
|
KeyboardMoveEvent *keyboardMoveEvent =
|
|
84
84
|
[[KeyboardMoveEvent alloc] initWithReactTag:@(self.tag)
|
|
85
85
|
event:event
|
|
@@ -5,20 +5,24 @@ class KeyboardControllerViewManager: RCTViewManager {
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
override func view() -> (KeyboardControllerView) {
|
|
8
|
-
return KeyboardControllerView(frame: CGRect.zero,
|
|
8
|
+
return KeyboardControllerView(frame: CGRect.zero, bridge: bridge)
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
class KeyboardControllerView: UIView {
|
|
13
|
+
// internal variables
|
|
13
14
|
private var keyboardObserver: KeyboardMovementObserver?
|
|
14
15
|
private var eventDispatcher: RCTEventDispatcherProtocol
|
|
16
|
+
private var bridge: RCTBridge
|
|
17
|
+
// react props
|
|
15
18
|
@objc var onKeyboardMoveStart: RCTDirectEventBlock?
|
|
16
19
|
@objc var onKeyboardMove: RCTDirectEventBlock?
|
|
17
20
|
@objc var onKeyboardMoveEnd: RCTDirectEventBlock?
|
|
18
21
|
@objc var onKeyboardMoveInteractive: RCTDirectEventBlock?
|
|
19
22
|
|
|
20
|
-
init(frame: CGRect,
|
|
21
|
-
self.
|
|
23
|
+
init(frame: CGRect, bridge: RCTBridge) {
|
|
24
|
+
self.bridge = bridge
|
|
25
|
+
eventDispatcher = bridge.eventDispatcher()
|
|
22
26
|
super.init(frame: frame)
|
|
23
27
|
}
|
|
24
28
|
|
|
@@ -43,6 +47,10 @@ class KeyboardControllerView: UIView {
|
|
|
43
47
|
}
|
|
44
48
|
|
|
45
49
|
func onEvent(event: NSString, height: NSNumber, progress: NSNumber) {
|
|
50
|
+
// we don't want to send event to JS before the JS thread is ready
|
|
51
|
+
if bridge.value(forKey: "_jsThread") == nil {
|
|
52
|
+
return
|
|
53
|
+
}
|
|
46
54
|
eventDispatcher.send(
|
|
47
55
|
KeyboardMoveEvent(
|
|
48
56
|
reactTag: reactTag,
|
|
@@ -8,18 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
import Foundation
|
|
10
10
|
|
|
11
|
-
func interpolate(inputRange: [CGFloat], outputRange: [CGFloat], currentValue: CGFloat) -> CGFloat {
|
|
12
|
-
let inputMin = inputRange.min() ?? 0
|
|
13
|
-
let inputMax = inputRange.max() ?? 1
|
|
14
|
-
let outputMin = outputRange.min() ?? 0
|
|
15
|
-
let outputMax = outputRange.max() ?? 1
|
|
16
|
-
|
|
17
|
-
let normalizedValue = (currentValue - inputMin) / (inputMax - inputMin)
|
|
18
|
-
let interpolatedValue = outputMin + (outputMax - outputMin) * normalizedValue
|
|
19
|
-
|
|
20
|
-
return interpolatedValue
|
|
21
|
-
}
|
|
22
|
-
|
|
23
11
|
@objc(KeyboardMovementObserver)
|
|
24
12
|
public class KeyboardMovementObserver: NSObject {
|
|
25
13
|
// class members
|
|
@@ -137,7 +125,7 @@ public class KeyboardMovementObserver: NSObject {
|
|
|
137
125
|
let keyboardFrameY = (change?[.newKey] as! NSValue).cgPointValue.y
|
|
138
126
|
let keyboardWindowH = keyboardView?.window?.bounds.size.height ?? 0
|
|
139
127
|
let keyboardPosition = keyboardWindowH - keyboardFrameY
|
|
140
|
-
let position = interpolate(
|
|
128
|
+
let position = CGFloat.interpolate(
|
|
141
129
|
inputRange: [keyboardHeight / 2, -keyboardHeight / 2],
|
|
142
130
|
outputRange: [keyboardHeight, 0],
|
|
143
131
|
currentValue: keyboardPosition
|
package/lib/commonjs/animated.js
CHANGED
|
@@ -109,7 +109,7 @@ const KeyboardProvider = _ref => {
|
|
|
109
109
|
navigationBarTranslucent: navigationBarTranslucent,
|
|
110
110
|
statusBarTranslucent: statusBarTranslucent,
|
|
111
111
|
style: styles.container
|
|
112
|
-
},
|
|
112
|
+
}, children), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
113
113
|
// we are using this small hack, because if the component (where
|
|
114
114
|
// animated value has been used) is unmounted, then animation will
|
|
115
115
|
// stop receiving events (seems like it's react-native optimization).
|
|
@@ -119,7 +119,7 @@ const KeyboardProvider = _ref => {
|
|
|
119
119
|
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
120
120
|
// then close it and open it again (for example 'Animated transition').
|
|
121
121
|
style: style
|
|
122
|
-
})
|
|
122
|
+
}));
|
|
123
123
|
};
|
|
124
124
|
exports.KeyboardProvider = KeyboardProvider;
|
|
125
125
|
//# sourceMappingURL=animated.js.map
|
|
@@ -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 {\n useAnimatedKeyboardHandler,\n useSharedHandlers,\n useAnimatedValue,\n} from './internal';\nimport { KeyboardControllerView } from './native';\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 style={styles.container}\n >\n
|
|
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 {\n useAnimatedKeyboardHandler,\n useSharedHandlers,\n useAnimatedValue,\n} from './internal';\nimport { KeyboardControllerView } from './native';\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 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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"}
|
package/lib/module/animated.js
CHANGED
|
@@ -101,7 +101,7 @@ export const KeyboardProvider = _ref => {
|
|
|
101
101
|
navigationBarTranslucent: navigationBarTranslucent,
|
|
102
102
|
statusBarTranslucent: statusBarTranslucent,
|
|
103
103
|
style: styles.container
|
|
104
|
-
},
|
|
104
|
+
}, children), /*#__PURE__*/React.createElement(Animated.View, {
|
|
105
105
|
// we are using this small hack, because if the component (where
|
|
106
106
|
// animated value has been used) is unmounted, then animation will
|
|
107
107
|
// stop receiving events (seems like it's react-native optimization).
|
|
@@ -111,6 +111,6 @@ export const KeyboardProvider = _ref => {
|
|
|
111
111
|
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
112
112
|
// then close it and open it again (for example 'Animated transition').
|
|
113
113
|
style: style
|
|
114
|
-
})
|
|
114
|
+
}));
|
|
115
115
|
};
|
|
116
116
|
//# sourceMappingURL=animated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","Animated","Platform","StyleSheet","Reanimated","useSharedValue","KeyboardContext","useAnimatedKeyboardHandler","useSharedHandlers","useAnimatedValue","KeyboardControllerView","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 {\n useAnimatedKeyboardHandler,\n useSharedHandlers,\n useAnimatedValue,\n} from './internal';\nimport { KeyboardControllerView } from './native';\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 style={styles.container}\n >\n
|
|
1
|
+
{"version":3,"names":["React","useMemo","Animated","Platform","StyleSheet","Reanimated","useSharedValue","KeyboardContext","useAnimatedKeyboardHandler","useSharedHandlers","useAnimatedValue","KeyboardControllerView","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 {\n useAnimatedKeyboardHandler,\n useSharedHandlers,\n useAnimatedValue,\n} from './internal';\nimport { KeyboardControllerView } from './native';\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 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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"}
|
package/package.json
CHANGED
package/src/animated.tsx
CHANGED
|
@@ -151,21 +151,19 @@ export const KeyboardProvider = ({
|
|
|
151
151
|
statusBarTranslucent={statusBarTranslucent}
|
|
152
152
|
style={styles.container}
|
|
153
153
|
>
|
|
154
|
-
|
|
155
|
-
<Animated.View
|
|
156
|
-
// we are using this small hack, because if the component (where
|
|
157
|
-
// animated value has been used) is unmounted, then animation will
|
|
158
|
-
// stop receiving events (seems like it's react-native optimization).
|
|
159
|
-
// So we need to keep a reference to the animated value, to keep it's
|
|
160
|
-
// always mounted (keep a reference to an animated value).
|
|
161
|
-
//
|
|
162
|
-
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
163
|
-
// then close it and open it again (for example 'Animated transition').
|
|
164
|
-
style={style}
|
|
165
|
-
/>
|
|
166
|
-
{children}
|
|
167
|
-
</>
|
|
154
|
+
{children}
|
|
168
155
|
</KeyboardControllerViewAnimated>
|
|
156
|
+
<Animated.View
|
|
157
|
+
// we are using this small hack, because if the component (where
|
|
158
|
+
// animated value has been used) is unmounted, then animation will
|
|
159
|
+
// stop receiving events (seems like it's react-native optimization).
|
|
160
|
+
// So we need to keep a reference to the animated value, to keep it's
|
|
161
|
+
// always mounted (keep a reference to an animated value).
|
|
162
|
+
//
|
|
163
|
+
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
164
|
+
// then close it and open it again (for example 'Animated transition').
|
|
165
|
+
style={style}
|
|
166
|
+
/>
|
|
169
167
|
</KeyboardContext.Provider>
|
|
170
168
|
);
|
|
171
169
|
};
|