react-native-keyboard-controller 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/android/gradle.properties +1 -1
- package/android/src/main/java/com/reactnativekeyboardcontroller/events/FocusedInputLayoutChangedEvent.kt +41 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/ThemedReactContext.kt +9 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt +7 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/FocusedInputLayoutObserver.kt +93 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/{KeyboardAnimationCallback.kt → listeners/KeyboardAnimationCallback.kt} +86 -55
- package/android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardControllerViewManagerImpl.kt +2 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt +16 -8
- package/ios/Extensions.swift +7 -0
- package/ios/KeyboardController.xcodeproj/project.pbxproj +41 -7
- package/ios/events/FocusedInputLayoutChangedEvent.h +16 -0
- package/ios/events/FocusedInputLayoutChangedEvent.m +75 -0
- package/ios/observers/FocusedInputLayoutObserver.swift +136 -0
- package/ios/{KeyboardControllerView.mm → views/KeyboardControllerView.mm} +40 -4
- package/ios/{KeyboardControllerViewManager.mm → views/KeyboardControllerViewManager.mm} +3 -0
- package/ios/{KeyboardControllerViewManager.swift → views/KeyboardControllerViewManager.swift} +14 -0
- package/jest/index.js +16 -0
- package/lib/commonjs/animated.js +18 -4
- package/lib/commonjs/animated.js.map +1 -1
- package/lib/commonjs/bindings.js.map +1 -1
- package/lib/commonjs/bindings.native.js.map +1 -1
- package/lib/commonjs/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/commonjs/components/KeyboardAvoidingView/index.js.map +1 -1
- package/lib/commonjs/components/KeyboardStickyView/index.js +44 -0
- package/lib/commonjs/components/KeyboardStickyView/index.js.map +1 -0
- package/lib/commonjs/components/index.js +7 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/constants.js.map +1 -1
- package/lib/commonjs/context.js +6 -3
- package/lib/commonjs/context.js.map +1 -1
- package/lib/commonjs/hooks.js +8 -1
- package/lib/commonjs/hooks.js.map +1 -1
- package/lib/commonjs/index.js +8 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/internal.js.map +1 -1
- package/lib/commonjs/reanimated.js +5 -2
- package/lib/commonjs/reanimated.js.map +1 -1
- package/lib/commonjs/reanimated.native.js +18 -1
- package/lib/commonjs/reanimated.native.js.map +1 -1
- package/lib/commonjs/replicas.js +1 -1
- package/lib/commonjs/replicas.js.map +1 -1
- package/lib/commonjs/specs/KeyboardControllerViewNativeComponent.js.map +1 -1
- package/lib/commonjs/specs/KeyboardGestureAreaNativeComponent.js.map +1 -1
- package/lib/commonjs/specs/NativeKeyboardController.js.map +1 -1
- package/lib/commonjs/specs/NativeStatusBarManagerCompat.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/module/animated.js +19 -5
- package/lib/module/animated.js.map +1 -1
- package/lib/module/bindings.js.map +1 -1
- package/lib/module/bindings.native.js +1 -1
- package/lib/module/bindings.native.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/hooks.js.map +1 -1
- package/lib/module/components/KeyboardAvoidingView/index.js +2 -2
- package/lib/module/components/KeyboardAvoidingView/index.js.map +1 -1
- package/lib/module/components/KeyboardStickyView/index.js +35 -0
- package/lib/module/components/KeyboardStickyView/index.js.map +1 -0
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/constants.js.map +1 -1
- package/lib/module/context.js +6 -3
- package/lib/module/context.js.map +1 -1
- package/lib/module/hooks.js +7 -1
- package/lib/module/hooks.js.map +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/internal.js.map +1 -1
- package/lib/module/reanimated.js +3 -1
- package/lib/module/reanimated.js.map +1 -1
- package/lib/module/reanimated.native.js +16 -0
- package/lib/module/reanimated.native.js.map +1 -1
- package/lib/module/replicas.js +2 -2
- package/lib/module/replicas.js.map +1 -1
- package/lib/module/specs/KeyboardControllerViewNativeComponent.js.map +1 -1
- package/lib/module/specs/KeyboardGestureAreaNativeComponent.js.map +1 -1
- package/lib/module/specs/NativeKeyboardController.js.map +1 -1
- package/lib/module/specs/NativeStatusBarManagerCompat.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/typescript/components/KeyboardAvoidingView/index.d.ts +2 -1
- package/lib/typescript/components/KeyboardStickyView/index.d.ts +20 -0
- package/lib/typescript/components/index.d.ts +1 -0
- package/lib/typescript/context.d.ts +3 -2
- package/lib/typescript/hooks.d.ts +5 -2
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/internal.d.ts +1 -1
- package/lib/typescript/reanimated.d.ts +2 -1
- package/lib/typescript/reanimated.native.d.ts +2 -1
- package/lib/typescript/specs/KeyboardControllerViewNativeComponent.d.ts +12 -0
- package/lib/typescript/types.d.ts +16 -0
- package/package.json +9 -28
- package/src/animated.tsx +30 -7
- package/src/bindings.native.ts +1 -1
- package/src/bindings.ts +3 -1
- package/src/components/KeyboardAvoidingView/hooks.ts +1 -0
- package/src/components/KeyboardAvoidingView/index.tsx +8 -10
- package/src/components/KeyboardStickyView/index.tsx +63 -0
- package/src/components/index.ts +1 -0
- package/src/constants.ts +2 -0
- package/src/context.ts +12 -5
- package/src/hooks.ts +10 -6
- package/src/index.ts +1 -1
- package/src/internal.ts +3 -1
- package/src/reanimated.native.ts +30 -1
- package/src/reanimated.ts +13 -2
- package/src/replicas.ts +2 -2
- package/src/specs/KeyboardControllerViewNativeComponent.ts +15 -1
- package/src/specs/KeyboardGestureAreaNativeComponent.ts +2 -1
- package/src/specs/NativeKeyboardController.ts +2 -1
- package/src/specs/NativeStatusBarManagerCompat.ts +2 -1
- package/src/types.ts +27 -1
- /package/ios/{KeyboardMoveEvent.h → events/KeyboardMoveEvent.h} +0 -0
- /package/ios/{KeyboardMoveEvent.m → events/KeyboardMoveEvent.m} +0 -0
- /package/ios/{KeyboardMovementObserver.swift → observers/KeyboardMovementObserver.swift} +0 -0
- /package/ios/{KeyboardControllerView.h → views/KeyboardControllerView.h} +0 -0
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
//
|
|
2
|
+
// FocusedInputLayoutChangedEvent.m
|
|
3
|
+
// KeyboardController
|
|
4
|
+
//
|
|
5
|
+
// Created by Kiryl Ziusko on 05/10/2023.
|
|
6
|
+
// Copyright © 2023 Facebook. All rights reserved.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
#import "FocusedInputLayoutChangedEvent.h"
|
|
10
|
+
#import <React/RCTAssert.h>
|
|
11
|
+
|
|
12
|
+
@implementation FocusedInputLayoutChangedEvent {
|
|
13
|
+
NSNumber *_target;
|
|
14
|
+
NSObject *_layout;
|
|
15
|
+
uint16_t _coalescingKey;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
- (NSString *)eventName
|
|
19
|
+
{
|
|
20
|
+
return @"onFocusedInputLayoutChanged";
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@synthesize viewTag = _viewTag;
|
|
24
|
+
|
|
25
|
+
- (instancetype)initWithReactTag:(NSNumber *)reactTag event:(NSObject *)event
|
|
26
|
+
{
|
|
27
|
+
RCTAssertParam(reactTag);
|
|
28
|
+
|
|
29
|
+
if ((self = [super init])) {
|
|
30
|
+
_viewTag = reactTag;
|
|
31
|
+
_target = [event valueForKey:@"target"];
|
|
32
|
+
_layout = [event valueForKey:@"layout"];
|
|
33
|
+
_coalescingKey = 0;
|
|
34
|
+
}
|
|
35
|
+
return self;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
RCT_NOT_IMPLEMENTED(-(instancetype)init)
|
|
39
|
+
|
|
40
|
+
- (uint16_t)coalescingKey
|
|
41
|
+
{
|
|
42
|
+
return _coalescingKey;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
- (NSDictionary *)body
|
|
46
|
+
{
|
|
47
|
+
NSDictionary *body = @{
|
|
48
|
+
@"target" : _target,
|
|
49
|
+
@"layout" : _layout,
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
return body;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
- (BOOL)canCoalesce
|
|
56
|
+
{
|
|
57
|
+
return NO;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
- (FocusedInputLayoutChangedEvent *)coalesceWithEvent:(FocusedInputLayoutChangedEvent *)newEvent
|
|
61
|
+
{
|
|
62
|
+
return newEvent;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
+ (NSString *)moduleDotMethod
|
|
66
|
+
{
|
|
67
|
+
return @"RCTEventEmitter.receiveEvent";
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
- (NSArray *)arguments
|
|
71
|
+
{
|
|
72
|
+
return @[ self.viewTag, RCTNormalizeInputEventName(self.eventName), [self body] ];
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@end
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
//
|
|
2
|
+
// FocusedInputLayoutObserver.swift
|
|
3
|
+
// KeyboardController
|
|
4
|
+
//
|
|
5
|
+
// Created by Kiryl Ziusko on 05/10/2023.
|
|
6
|
+
// Copyright © 2023 Facebook. All rights reserved.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
import Foundation
|
|
10
|
+
import UIKit
|
|
11
|
+
|
|
12
|
+
let noFocusedInputEvent: [String: Any] = [
|
|
13
|
+
"target": -1,
|
|
14
|
+
"layout": [
|
|
15
|
+
"absoluteX": 0,
|
|
16
|
+
"absoluteY": 0,
|
|
17
|
+
"width": 0,
|
|
18
|
+
"height": 0,
|
|
19
|
+
"x": 0,
|
|
20
|
+
"y": 0,
|
|
21
|
+
],
|
|
22
|
+
]
|
|
23
|
+
|
|
24
|
+
@objc(FocusedInputLayoutObserver)
|
|
25
|
+
public class FocusedInputLayoutObserver: NSObject {
|
|
26
|
+
// class members
|
|
27
|
+
var onEvent: (NSDictionary) -> Void
|
|
28
|
+
// input tracking
|
|
29
|
+
private var currentInput: UIView?
|
|
30
|
+
private var hasKVObserver = false
|
|
31
|
+
private var lastEventDispatched: [AnyHashable: Any] = noFocusedInputEvent
|
|
32
|
+
|
|
33
|
+
@objc public init(
|
|
34
|
+
handler: @escaping (NSDictionary) -> Void
|
|
35
|
+
) {
|
|
36
|
+
onEvent = handler
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@objc public func mount() {
|
|
40
|
+
NotificationCenter.default.addObserver(
|
|
41
|
+
self,
|
|
42
|
+
selector: #selector(keyboardWillShow),
|
|
43
|
+
name: UIResponder.keyboardWillShowNotification,
|
|
44
|
+
object: nil
|
|
45
|
+
)
|
|
46
|
+
NotificationCenter.default.addObserver(
|
|
47
|
+
self,
|
|
48
|
+
selector: #selector(keyboardWillHide),
|
|
49
|
+
name: UIResponder.keyboardWillHideNotification,
|
|
50
|
+
object: nil
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@objc public func unmount() {
|
|
55
|
+
// swiftlint:disable:next notification_center_detachment
|
|
56
|
+
NotificationCenter.default.removeObserver(self)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@objc func keyboardWillShow(_: Notification) {
|
|
60
|
+
removeKVObserver()
|
|
61
|
+
currentInput = (UIResponder.current as? UIView)?.superview as UIView?
|
|
62
|
+
setupKVObserver()
|
|
63
|
+
syncUpLayout()
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@objc func keyboardWillHide(_: Notification) {
|
|
67
|
+
removeKVObserver()
|
|
68
|
+
dispatchEventToJS(data: noFocusedInputEvent)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@objc func syncUpLayout() {
|
|
72
|
+
let responder = UIResponder.current
|
|
73
|
+
let focusedInput = (responder as? UIView)?.superview
|
|
74
|
+
let globalFrame = focusedInput?.globalFrame
|
|
75
|
+
|
|
76
|
+
let data: [String: Any] = [
|
|
77
|
+
"target": responder.reactViewTag,
|
|
78
|
+
"layout": [
|
|
79
|
+
"absoluteX": globalFrame?.origin.x,
|
|
80
|
+
"absoluteY": globalFrame?.origin.y,
|
|
81
|
+
"width": focusedInput?.frame.width,
|
|
82
|
+
"height": focusedInput?.frame.height,
|
|
83
|
+
"x": focusedInput?.frame.origin.x,
|
|
84
|
+
"y": focusedInput?.frame.origin.y,
|
|
85
|
+
],
|
|
86
|
+
]
|
|
87
|
+
|
|
88
|
+
dispatchEventToJS(data: data)
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
private func dispatchEventToJS(data: [String: Any]) {
|
|
92
|
+
if NSDictionary(dictionary: data).isEqual(to: lastEventDispatched) {
|
|
93
|
+
return
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
lastEventDispatched = data
|
|
97
|
+
onEvent(data as NSDictionary)
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
private func setupKVObserver() {
|
|
101
|
+
if hasKVObserver {
|
|
102
|
+
return
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
if currentInput != nil {
|
|
106
|
+
hasKVObserver = true
|
|
107
|
+
currentInput?.addObserver(self, forKeyPath: "center", options: .new, context: nil)
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
private func removeKVObserver() {
|
|
112
|
+
if !hasKVObserver {
|
|
113
|
+
return
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
hasKVObserver = false
|
|
117
|
+
currentInput?.removeObserver(self, forKeyPath: "center", context: nil)
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// swiftlint:disable:next block_based_kvo
|
|
121
|
+
@objc override public func observeValue(
|
|
122
|
+
forKeyPath keyPath: String?,
|
|
123
|
+
of object: Any?,
|
|
124
|
+
change _: [NSKeyValueChangeKey: Any]?,
|
|
125
|
+
context _: UnsafeMutableRawPointer?
|
|
126
|
+
) {
|
|
127
|
+
// swiftlint:disable:next force_cast
|
|
128
|
+
if keyPath == "center", object as! NSObject == currentInput! {
|
|
129
|
+
// we need to read layout in next frame, otherwise we'll get old
|
|
130
|
+
// layout values
|
|
131
|
+
DispatchQueue.main.async {
|
|
132
|
+
self.syncUpLayout()
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
// This guard prevent the code from being compiled in the old architecture
|
|
10
10
|
#ifdef RCT_NEW_ARCH_ENABLED
|
|
11
11
|
#import "KeyboardControllerView.h"
|
|
12
|
+
#import "FocusedInputLayoutChangedEvent.h"
|
|
12
13
|
#import "KeyboardMoveEvent.h"
|
|
13
14
|
#import "react_native_keyboard_controller-Swift.h"
|
|
14
15
|
|
|
@@ -29,7 +30,8 @@ using namespace facebook::react;
|
|
|
29
30
|
@end
|
|
30
31
|
|
|
31
32
|
@implementation KeyboardControllerView {
|
|
32
|
-
KeyboardMovementObserver *
|
|
33
|
+
KeyboardMovementObserver *keyboardObserver;
|
|
34
|
+
FocusedInputLayoutObserver *inputObserver;
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
+ (ComponentDescriptorProvider)componentDescriptorProvider
|
|
@@ -43,7 +45,39 @@ using namespace facebook::react;
|
|
|
43
45
|
static const auto defaultProps = std::make_shared<const KeyboardControllerViewProps>();
|
|
44
46
|
_props = defaultProps;
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
inputObserver = [[FocusedInputLayoutObserver alloc] initWithHandler:^(NSDictionary *event) {
|
|
49
|
+
if (self->_eventEmitter) {
|
|
50
|
+
int target = [event[@"target"] integerValue];
|
|
51
|
+
double absoluteY = [event[@"layout"][@"absoluteY"] doubleValue];
|
|
52
|
+
double absoulteX = [event[@"layout"][@"absoluteX"] doubleValue];
|
|
53
|
+
double y = [event[@"layout"][@"y"] doubleValue];
|
|
54
|
+
double x = [event[@"layout"][@"x"] doubleValue];
|
|
55
|
+
double width = [event[@"layout"][@"width"] doubleValue];
|
|
56
|
+
double height = [event[@"layout"][@"height"] doubleValue];
|
|
57
|
+
|
|
58
|
+
std::dynamic_pointer_cast<const facebook::react::KeyboardControllerViewEventEmitter>(
|
|
59
|
+
self->_eventEmitter)
|
|
60
|
+
->onFocusedInputLayoutChanged(
|
|
61
|
+
facebook::react::KeyboardControllerViewEventEmitter::OnFocusedInputLayoutChanged{
|
|
62
|
+
.target = target,
|
|
63
|
+
.layout = facebook::react::KeyboardControllerViewEventEmitter::
|
|
64
|
+
OnFocusedInputLayoutChangedLayout{
|
|
65
|
+
.absoluteY = absoluteY,
|
|
66
|
+
.absoluteX = absoulteX,
|
|
67
|
+
.height = height,
|
|
68
|
+
.width = width,
|
|
69
|
+
.x = x,
|
|
70
|
+
.y = y}});
|
|
71
|
+
// TODO: use built-in _eventEmitter once NativeAnimated module will use ModernEventemitter
|
|
72
|
+
RCTBridge *bridge = [RCTBridge currentBridge];
|
|
73
|
+
if (bridge && [bridge valueForKey:@"_jsThread"]) {
|
|
74
|
+
FocusedInputLayoutChangedEvent *inputChangedEvent =
|
|
75
|
+
[[FocusedInputLayoutChangedEvent alloc] initWithReactTag:@(self.tag) event:event];
|
|
76
|
+
[bridge.eventDispatcher sendEvent:inputChangedEvent];
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}];
|
|
80
|
+
keyboardObserver = [[KeyboardMovementObserver alloc]
|
|
47
81
|
initWithHandler:^(
|
|
48
82
|
NSString *event,
|
|
49
83
|
NSNumber *height,
|
|
@@ -122,9 +156,11 @@ using namespace facebook::react;
|
|
|
122
156
|
|
|
123
157
|
if (newViewProps.enabled != oldViewProps.enabled) {
|
|
124
158
|
if (newViewProps.enabled) {
|
|
125
|
-
[
|
|
159
|
+
[inputObserver mount];
|
|
160
|
+
[keyboardObserver mount];
|
|
126
161
|
} else {
|
|
127
|
-
[
|
|
162
|
+
[inputObserver unmount];
|
|
163
|
+
[keyboardObserver unmount];
|
|
128
164
|
}
|
|
129
165
|
}
|
|
130
166
|
|
|
@@ -6,9 +6,12 @@
|
|
|
6
6
|
RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
|
|
7
7
|
|
|
8
8
|
// callbacks
|
|
9
|
+
/// keyboard callbacks
|
|
9
10
|
RCT_EXPORT_VIEW_PROPERTY(onKeyboardMoveStart, RCTDirectEventBlock);
|
|
10
11
|
RCT_EXPORT_VIEW_PROPERTY(onKeyboardMove, RCTDirectEventBlock);
|
|
11
12
|
RCT_EXPORT_VIEW_PROPERTY(onKeyboardMoveEnd, RCTDirectEventBlock);
|
|
12
13
|
RCT_EXPORT_VIEW_PROPERTY(onKeyboardMoveInteractive, RCTDirectEventBlock);
|
|
14
|
+
/// input callbacks
|
|
15
|
+
RCT_EXPORT_VIEW_PROPERTY(onFocusedInputLayoutChanged, RCTDirectEventBlock);
|
|
13
16
|
|
|
14
17
|
@end
|
package/ios/{KeyboardControllerViewManager.swift → views/KeyboardControllerViewManager.swift}
RENAMED
|
@@ -12,6 +12,7 @@ class KeyboardControllerViewManager: RCTViewManager {
|
|
|
12
12
|
class KeyboardControllerView: UIView {
|
|
13
13
|
// internal variables
|
|
14
14
|
private var keyboardObserver: KeyboardMovementObserver?
|
|
15
|
+
private var inputObserver: FocusedInputLayoutObserver?
|
|
15
16
|
private var eventDispatcher: RCTEventDispatcherProtocol
|
|
16
17
|
private var bridge: RCTBridge
|
|
17
18
|
// react callbacks
|
|
@@ -23,8 +24,10 @@ class KeyboardControllerView: UIView {
|
|
|
23
24
|
@objc var enabled: ObjCBool = true {
|
|
24
25
|
didSet {
|
|
25
26
|
if enabled.boolValue {
|
|
27
|
+
inputObserver?.mount()
|
|
26
28
|
keyboardObserver?.mount()
|
|
27
29
|
} else {
|
|
30
|
+
inputObserver?.unmount()
|
|
28
31
|
keyboardObserver?.unmount()
|
|
29
32
|
}
|
|
30
33
|
}
|
|
@@ -44,6 +47,7 @@ class KeyboardControllerView: UIView {
|
|
|
44
47
|
override func willMove(toWindow newWindow: UIWindow?) {
|
|
45
48
|
if newWindow == nil {
|
|
46
49
|
// Will be removed from a window
|
|
50
|
+
inputObserver?.unmount()
|
|
47
51
|
keyboardObserver?.unmount()
|
|
48
52
|
}
|
|
49
53
|
}
|
|
@@ -51,11 +55,21 @@ class KeyboardControllerView: UIView {
|
|
|
51
55
|
override func didMoveToWindow() {
|
|
52
56
|
if window != nil {
|
|
53
57
|
// Added to a window
|
|
58
|
+
inputObserver = FocusedInputLayoutObserver(handler: onInput)
|
|
59
|
+
inputObserver?.mount()
|
|
54
60
|
keyboardObserver = KeyboardMovementObserver(handler: onEvent, onNotify: onNotify)
|
|
55
61
|
keyboardObserver?.mount()
|
|
56
62
|
}
|
|
57
63
|
}
|
|
58
64
|
|
|
65
|
+
func onInput(event: NSObject) {
|
|
66
|
+
// we don't want to send event to JS before the JS thread is ready
|
|
67
|
+
if bridge.value(forKey: "_jsThread") == nil {
|
|
68
|
+
return
|
|
69
|
+
}
|
|
70
|
+
eventDispatcher.send(FocusedInputLayoutChangedEvent(reactTag: reactTag, event: event))
|
|
71
|
+
}
|
|
72
|
+
|
|
59
73
|
func onEvent(event: NSString, height: NSNumber, progress: NSNumber, duration: NSNumber, target: NSNumber) {
|
|
60
74
|
// we don't want to send event to JS before the JS thread is ready
|
|
61
75
|
if bridge.value(forKey: "_jsThread") == nil {
|
package/jest/index.js
CHANGED
|
@@ -10,6 +10,21 @@ const values = {
|
|
|
10
10
|
height: { value: 0 },
|
|
11
11
|
},
|
|
12
12
|
};
|
|
13
|
+
const focusedInput = {
|
|
14
|
+
input: {
|
|
15
|
+
value: {
|
|
16
|
+
target: 1,
|
|
17
|
+
layout: {
|
|
18
|
+
x: 0,
|
|
19
|
+
y: 0,
|
|
20
|
+
width: 200,
|
|
21
|
+
height: 40,
|
|
22
|
+
absoluteX: 0,
|
|
23
|
+
absoluteY: 100,
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
};
|
|
13
28
|
|
|
14
29
|
const mock = {
|
|
15
30
|
// hooks
|
|
@@ -18,6 +33,7 @@ const mock = {
|
|
|
18
33
|
useResizeMode: jest.fn(),
|
|
19
34
|
useGenericKeyboardHandler: jest.fn(),
|
|
20
35
|
useKeyboardHandler: jest.fn(),
|
|
36
|
+
useReanimatedFocusedInput: jest.fn().mockReturnValue(focusedInput),
|
|
21
37
|
// modules
|
|
22
38
|
KeyboardController: {
|
|
23
39
|
setInputMode: jest.fn(),
|
package/lib/commonjs/animated.js
CHANGED
|
@@ -7,11 +7,11 @@ exports.KeyboardProvider = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
|
+
var _bindings = require("./bindings");
|
|
10
11
|
var _context = require("./context");
|
|
11
12
|
var _internal = require("./internal");
|
|
12
|
-
var _bindings = require("./bindings");
|
|
13
|
-
var _reanimated = require("./reanimated");
|
|
14
13
|
var _monkeyPatch = require("./monkey-patch");
|
|
14
|
+
var _reanimated = require("./reanimated");
|
|
15
15
|
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); }
|
|
16
16
|
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; }
|
|
17
17
|
const KeyboardControllerViewAnimated = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.Animated.createAnimatedComponent(_bindings.KeyboardControllerView));
|
|
@@ -38,6 +38,7 @@ const KeyboardProvider = _ref => {
|
|
|
38
38
|
// shared values
|
|
39
39
|
const progressSV = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
40
40
|
const heightSV = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
41
|
+
const layout = (0, _reactNativeReanimated.useSharedValue)(null);
|
|
41
42
|
const {
|
|
42
43
|
setHandlers,
|
|
43
44
|
broadcast
|
|
@@ -53,6 +54,7 @@ const KeyboardProvider = _ref => {
|
|
|
53
54
|
progress: progressSV,
|
|
54
55
|
height: heightSV
|
|
55
56
|
},
|
|
57
|
+
layout,
|
|
56
58
|
setHandlers,
|
|
57
59
|
setEnabled
|
|
58
60
|
}), [enabled]);
|
|
@@ -80,7 +82,7 @@ const KeyboardProvider = _ref => {
|
|
|
80
82
|
heightSV.value = -event.height;
|
|
81
83
|
}
|
|
82
84
|
};
|
|
83
|
-
const
|
|
85
|
+
const keyboardHandler = (0, _reanimated.useAnimatedKeyboardHandler)({
|
|
84
86
|
onKeyboardMoveStart: event => {
|
|
85
87
|
'worklet';
|
|
86
88
|
|
|
@@ -105,6 +107,17 @@ const KeyboardProvider = _ref => {
|
|
|
105
107
|
broadcast('onInteractive', event);
|
|
106
108
|
}
|
|
107
109
|
}, []);
|
|
110
|
+
const inputHandler = (0, _reanimated.useFocusedInputHandler)({
|
|
111
|
+
onFocusedInputLayoutChanged: e => {
|
|
112
|
+
'worklet';
|
|
113
|
+
|
|
114
|
+
if (e.target !== -1) {
|
|
115
|
+
layout.value = e;
|
|
116
|
+
} else {
|
|
117
|
+
layout.value = null;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}, []);
|
|
108
121
|
// effects
|
|
109
122
|
(0, _react.useEffect)(() => {
|
|
110
123
|
if (enabled) {
|
|
@@ -117,10 +130,11 @@ const KeyboardProvider = _ref => {
|
|
|
117
130
|
value: context
|
|
118
131
|
}, /*#__PURE__*/_react.default.createElement(KeyboardControllerViewAnimated, {
|
|
119
132
|
enabled: enabled,
|
|
120
|
-
onKeyboardMoveReanimated:
|
|
133
|
+
onKeyboardMoveReanimated: keyboardHandler,
|
|
121
134
|
onKeyboardMoveStart: _reactNative.Platform.OS === 'ios' ? onKeyboardMove : undefined,
|
|
122
135
|
onKeyboardMove: _reactNative.Platform.OS === 'android' ? onKeyboardMove : undefined,
|
|
123
136
|
onKeyboardMoveInteractive: onKeyboardMove,
|
|
137
|
+
onFocusedInputLayoutChangedReanimated: inputHandler,
|
|
124
138
|
navigationBarTranslucent: navigationBarTranslucent,
|
|
125
139
|
statusBarTranslucent: statusBarTranslucent
|
|
126
140
|
// @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","navigationBarTranslucent","enabled","initiallyEnabled","setEnabled","useState","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","useEffect","applyMonkeyPatch","revertMonkeyPatch","undefined"],"sources":["animated.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';\nimport Reanimated, { useSharedValue } from 'react-native-reanimated';\n\nimport { KeyboardAnimationContext, 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';\nimport { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nconst styles = StyleSheet.create<Styles>({\n container: {\n flex: 1,\n },\n hidden: {\n display: 'none',\n position: 'absolute',\n },\n});\n\ntype KeyboardProviderProps = {\n children: React.ReactNode;\n /**\n * Set the value to `true`, if you use translucent status bar on Android.\n * If you already control status bar translucency via `react-native-screens`\n * or `StatusBar` component from `react-native`, you can ignore it.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14\n * @platform android\n */\n statusBarTranslucent?: boolean;\n /**\n * Set the value to `true`, if you use translucent navigation bar on Android.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119\n * @platform android\n */\n navigationBarTranslucent?: boolean;\n /**\n * A boolean prop indicating whether the module is enabled. It indicate only initial state,\n * i. e. if you try to change this prop after component mount it will not have any effect.\n * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.\n * Defaults to `true`.\n */\n enabled?: boolean;\n};\n\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n navigationBarTranslucent,\n enabled: initiallyEnabled = true,\n}: KeyboardProviderProps) => {\n const [enabled, setEnabled] = useState(initiallyEnabled);\n // animated values\n const progress = useAnimatedValue(0);\n const height = useAnimatedValue(0);\n // shared values\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();\n // memo\n const context = useMemo<KeyboardAnimationContext>(\n () => ({\n enabled,\n animated: { progress: progress, height: Animated.multiply(height, -1) },\n reanimated: { progress: progressSV, height: heightSV },\n setHandlers,\n setEnabled,\n }),\n [enabled]\n );\n const style = useMemo(\n () => [\n styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ],\n []\n );\n const onKeyboardMove = useMemo(\n () =>\n Animated.event(\n [\n {\n nativeEvent: {\n progress,\n height,\n },\n },\n ],\n { useNativeDriver: true }\n ),\n []\n );\n // handlers\n const updateSharedValues = (event: NativeEvent, platforms: string[]) => {\n 'worklet';\n\n if (platforms.includes(Platform.OS)) {\n progressSV.value = event.progress;\n heightSV.value = -event.height;\n }\n };\n const 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 // effects\n useEffect(() => {\n if (enabled) {\n applyMonkeyPatch();\n } else {\n revertMonkeyPatch();\n }\n }, [enabled]);\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n enabled={enabled}\n onKeyboardMoveReanimated={handler}\n onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}\n onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}\n onKeyboardMoveInteractive={onKeyboardMove}\n navigationBarTranslucent={navigationBarTranslucent}\n statusBarTranslucent={statusBarTranslucent}\n // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923\n style={styles.container}\n >\n {children}\n </KeyboardControllerViewAnimated>\n <Animated.View\n // we are using this small hack, because if the component (where\n // animated value has been used) is unmounted, then animation will\n // stop receiving events (seems like it's react-native optimization).\n // So we need to keep a reference to the animated value, to keep it's\n // always mounted (keep a reference to an animated value).\n //\n // To test why it's needed, try to open screen which consumes Animated.Value\n // then close it and open it again (for example 'Animated transition').\n style={style}\n />\n </KeyboardContext.Provider>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","navigationBarTranslucent","enabled","initiallyEnabled","setEnabled","useState","progress","useAnimatedValue","height","progressSV","useSharedValue","heightSV","layout","setHandlers","broadcast","useSharedHandlers","context","useMemo","animated","multiply","reanimated","style","transform","translateX","translateY","onKeyboardMove","event","nativeEvent","useNativeDriver","updateSharedValues","platforms","includes","Platform","OS","value","keyboardHandler","useAnimatedKeyboardHandler","onKeyboardMoveStart","onKeyboardMoveEnd","onKeyboardMoveInteractive","inputHandler","useFocusedInputHandler","onFocusedInputLayoutChanged","e","target","useEffect","applyMonkeyPatch","revertMonkeyPatch","undefined"],"sources":["animated.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { Animated, Platform, StyleSheet } from 'react-native';\nimport Reanimated, { useSharedValue } from 'react-native-reanimated';\n\nimport { KeyboardControllerView } from './bindings';\nimport { KeyboardContext } from './context';\nimport { useAnimatedValue, useSharedHandlers } from './internal';\nimport { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';\nimport {\n useAnimatedKeyboardHandler,\n useFocusedInputHandler,\n} from './reanimated';\n\nimport type { KeyboardAnimationContext } from './context';\nimport type {\n FocusedInputLayoutChangedEvent,\n KeyboardControllerProps,\n KeyboardHandler,\n NativeEvent,\n} from './types';\nimport type { ViewStyle } from 'react-native';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nconst styles = StyleSheet.create<Styles>({\n container: {\n flex: 1,\n },\n hidden: {\n display: 'none',\n position: 'absolute',\n },\n});\n\ntype KeyboardProviderProps = {\n children: React.ReactNode;\n /**\n * Set the value to `true`, if you use translucent status bar on Android.\n * If you already control status bar translucency via `react-native-screens`\n * or `StatusBar` component from `react-native`, you can ignore it.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14\n * @platform android\n */\n statusBarTranslucent?: boolean;\n /**\n * Set the value to `true`, if you use translucent navigation bar on Android.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119\n * @platform android\n */\n navigationBarTranslucent?: boolean;\n /**\n * A boolean prop indicating whether the module is enabled. It indicate only initial state,\n * i. e. if you try to change this prop after component mount it will not have any effect.\n * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.\n * Defaults to `true`.\n */\n enabled?: boolean;\n};\n\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n navigationBarTranslucent,\n enabled: initiallyEnabled = true,\n}: KeyboardProviderProps) => {\n const [enabled, setEnabled] = useState(initiallyEnabled);\n // animated values\n const progress = useAnimatedValue(0);\n const height = useAnimatedValue(0);\n // shared values\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);\n const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();\n // memo\n const context = useMemo<KeyboardAnimationContext>(\n () => ({\n enabled,\n animated: { progress: progress, height: Animated.multiply(height, -1) },\n reanimated: { progress: progressSV, height: heightSV },\n layout,\n setHandlers,\n setEnabled,\n }),\n [enabled]\n );\n const style = useMemo(\n () => [\n styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ],\n []\n );\n const onKeyboardMove = useMemo(\n () =>\n Animated.event(\n [\n {\n nativeEvent: {\n progress,\n height,\n },\n },\n ],\n { useNativeDriver: true }\n ),\n []\n );\n // handlers\n const updateSharedValues = (event: NativeEvent, platforms: string[]) => {\n 'worklet';\n\n if (platforms.includes(Platform.OS)) {\n progressSV.value = event.progress;\n heightSV.value = -event.height;\n }\n };\n const keyboardHandler = useAnimatedKeyboardHandler(\n {\n onKeyboardMoveStart: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onStart', event);\n updateSharedValues(event, ['ios']);\n },\n onKeyboardMove: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onMove', event);\n updateSharedValues(event, ['android']);\n },\n onKeyboardMoveEnd: (event: NativeEvent) => {\n 'worklet';\n\n broadcast('onEnd', event);\n },\n onKeyboardMoveInteractive: (event: NativeEvent) => {\n 'worklet';\n\n updateSharedValues(event, ['android', 'ios']);\n broadcast('onInteractive', event);\n },\n },\n []\n );\n const inputHandler = useFocusedInputHandler(\n {\n onFocusedInputLayoutChanged: (e) => {\n 'worklet';\n\n if (e.target !== -1) {\n layout.value = e;\n } else {\n layout.value = null;\n }\n },\n },\n []\n );\n // effects\n useEffect(() => {\n if (enabled) {\n applyMonkeyPatch();\n } else {\n revertMonkeyPatch();\n }\n }, [enabled]);\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n enabled={enabled}\n onKeyboardMoveReanimated={keyboardHandler}\n onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}\n onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}\n onKeyboardMoveInteractive={onKeyboardMove}\n onFocusedInputLayoutChangedReanimated={inputHandler}\n navigationBarTranslucent={navigationBarTranslucent}\n statusBarTranslucent={statusBarTranslucent}\n // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923\n style={styles.container}\n >\n {children}\n </KeyboardControllerViewAnimated>\n <Animated.View\n // we are using this small hack, because if the component (where\n // animated value has been used) is unmounted, then animation will\n // stop receiving events (seems like it's react-native optimization).\n // So we need to keep a reference to the animated value, to keep it's\n // always mounted (keep a reference to an animated value).\n //\n // To test why it's needed, try to open screen which consumes Animated.Value\n // then close it and open it again (for example 'Animated transition').\n style={style}\n />\n </KeyboardContext.Provider>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["NOOP","KeyboardController","setDefaultMode","setInputMode","addListener","removeListeners","KeyboardEvents","remove","KeyboardControllerView","View","KeyboardGestureArea"],"sources":["bindings.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"names":["NOOP","KeyboardController","setDefaultMode","setInputMode","addListener","removeListeners","KeyboardEvents","remove","KeyboardControllerView","View","KeyboardGestureArea"],"sources":["bindings.ts"],"sourcesContent":["import { View } from 'react-native';\n\nimport type {\n KeyboardControllerModule,\n KeyboardControllerProps,\n KeyboardEventsModule,\n KeyboardGestureAreaProps,\n} from './types';\nimport type { EmitterSubscription } from 'react-native';\n\nconst NOOP = () => {};\nexport const KeyboardController: KeyboardControllerModule = {\n setDefaultMode: NOOP,\n setInputMode: NOOP,\n addListener: NOOP,\n removeListeners: NOOP,\n};\nexport const KeyboardEvents: KeyboardEventsModule = {\n addListener: () => ({ remove: NOOP } as EmitterSubscription),\n};\nexport const KeyboardControllerView =\n View as unknown as React.FC<KeyboardControllerProps>;\nexport const KeyboardGestureArea =\n View as unknown as React.FC<KeyboardGestureAreaProps>;\n"],"mappings":";;;;;;AAAA;AAUA,MAAMA,IAAI,GAAG,MAAM,CAAC,CAAC;AACd,MAAMC,kBAA4C,GAAG;EAC1DC,cAAc,EAAEF,IAAI;EACpBG,YAAY,EAAEH,IAAI;EAClBI,WAAW,EAAEJ,IAAI;EACjBK,eAAe,EAAEL;AACnB,CAAC;AAAC;AACK,MAAMM,cAAoC,GAAG;EAClDF,WAAW,EAAE,OAAO;IAAEG,MAAM,EAAEP;EAAK,CAAC;AACtC,CAAC;AAAC;AACK,MAAMQ,sBAAsB,GACjCC,iBAAoD;AAAC;AAChD,MAAMC,mBAAmB,GAC9BD,iBAAqD;AAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["LINKING_ERROR","Platform","select","ios","default","RCTKeyboardController","require","KeyboardController","Proxy","get","Error","eventEmitter","NativeEventEmitter","KeyboardEvents","addListener","name","cb","KeyboardControllerView","KeyboardGestureArea","OS","Version","children"],"sources":["bindings.native.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"names":["LINKING_ERROR","Platform","select","ios","default","RCTKeyboardController","require","KeyboardController","Proxy","get","Error","eventEmitter","NativeEventEmitter","KeyboardEvents","addListener","name","cb","KeyboardControllerView","KeyboardGestureArea","OS","Version","children"],"sources":["bindings.native.ts"],"sourcesContent":["import { NativeEventEmitter, Platform } from 'react-native';\n\nimport type {\n KeyboardControllerModule,\n KeyboardControllerProps,\n KeyboardEventsModule,\n KeyboardGestureAreaProps,\n} from './types';\n\nconst LINKING_ERROR =\n `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \\n\\n` +\n Platform.select({ ios: \"- You have run 'pod install'\\n\", default: '' }) +\n '- You rebuilt the app after installing the package\\n' +\n '- You are not using Expo Go\\n';\n\nconst RCTKeyboardController =\n require('./specs/NativeKeyboardController').default;\nexport const KeyboardController = (\n RCTKeyboardController\n ? RCTKeyboardController\n : new Proxy(\n {},\n {\n get() {\n throw new Error(LINKING_ERROR);\n },\n }\n )\n) as KeyboardControllerModule;\n\nconst eventEmitter = new NativeEventEmitter(KeyboardController);\n\nexport const KeyboardEvents: KeyboardEventsModule = {\n addListener: (name, cb) =>\n eventEmitter.addListener('KeyboardController::' + name, cb),\n};\nexport const KeyboardControllerView: React.FC<KeyboardControllerProps> =\n require('./specs/KeyboardControllerViewNativeComponent').default;\nexport const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =\n Platform.OS === 'android' && Platform.Version >= 30\n ? require('./specs/KeyboardGestureAreaNativeComponent').default\n : ({ children }: KeyboardGestureAreaProps) => children;\n"],"mappings":";;;;;;AAAA;AASA,MAAMA,aAAa,GAChB,2FAA0F,GAC3FC,qBAAQ,CAACC,MAAM,CAAC;EAAEC,GAAG,EAAE,gCAAgC;EAAEC,OAAO,EAAE;AAAG,CAAC,CAAC,GACvE,sDAAsD,GACtD,+BAA+B;AAEjC,MAAMC,qBAAqB,GACzBC,OAAO,CAAC,kCAAkC,CAAC,CAACF,OAAO;AAC9C,MAAMG,kBAAkB,GAC7BF,qBAAqB,GACjBA,qBAAqB,GACrB,IAAIG,KAAK,CACP,CAAC,CAAC,EACF;EACEC,GAAG,GAAG;IACJ,MAAM,IAAIC,KAAK,CAACV,aAAa,CAAC;EAChC;AACF,CAAC,CAEoB;AAAC;AAE9B,MAAMW,YAAY,GAAG,IAAIC,+BAAkB,CAACL,kBAAkB,CAAC;AAExD,MAAMM,cAAoC,GAAG;EAClDC,WAAW,EAAE,CAACC,IAAI,EAAEC,EAAE,KACpBL,YAAY,CAACG,WAAW,CAAC,sBAAsB,GAAGC,IAAI,EAAEC,EAAE;AAC9D,CAAC;AAAC;AACK,MAAMC,sBAAyD,GACpEX,OAAO,CAAC,+CAA+C,CAAC,CAACF,OAAO;AAAC;AAC5D,MAAMc,mBAAuD,GAClEjB,qBAAQ,CAACkB,EAAE,KAAK,SAAS,IAAIlB,qBAAQ,CAACmB,OAAO,IAAI,EAAE,GAC/Cd,OAAO,CAAC,4CAA4C,CAAC,CAACF,OAAO,GAC7D;EAAA,IAAC;IAAEiB;EAAmC,CAAC;EAAA,OAAKA,QAAQ;AAAA;AAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useKeyboardAnimation","heightWhenOpened","useSharedValue","height","progress","isClosed","useKeyboardHandler","onStart","e","value","onMove","onEnd"],"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 const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n 'worklet';\n\n if (e.height > 0) {\n isClosed.value = false;\n heightWhenOpened.value = e.height;\n }\n },\n onMove: (e) => {\n 'worklet';\n\n progress.value = e.progress;\n height.value = e.height;\n },\n onEnd: (e) => {\n 'worklet';\n\n isClosed.value = e.height === 0;\n },\n },\n []\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":";;;;;;AAAA;
|
|
1
|
+
{"version":3,"names":["useKeyboardAnimation","heightWhenOpened","useSharedValue","height","progress","isClosed","useKeyboardHandler","onStart","e","value","onMove","onEnd"],"sources":["hooks.ts"],"sourcesContent":["import { useSharedValue } from 'react-native-reanimated';\n\nimport { useKeyboardHandler } from '../../hooks';\n\nexport const useKeyboardAnimation = () => {\n const heightWhenOpened = useSharedValue(0);\n const height = useSharedValue(0);\n const progress = useSharedValue(0);\n const isClosed = useSharedValue(true);\n\n useKeyboardHandler(\n {\n onStart: (e) => {\n 'worklet';\n\n if (e.height > 0) {\n isClosed.value = false;\n heightWhenOpened.value = e.height;\n }\n },\n onMove: (e) => {\n 'worklet';\n\n progress.value = e.progress;\n height.value = e.height;\n },\n onEnd: (e) => {\n 'worklet';\n\n isClosed.value = e.height === 0;\n },\n },\n []\n );\n\n return { height, progress, heightWhenOpened, isClosed };\n};\n"],"mappings":";;;;;;AAAA;AAEA;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;EAClC,MAAMG,QAAQ,GAAG,IAAAH,qCAAc,EAAC,IAAI,CAAC;EAErC,IAAAI,yBAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,IAAIA,CAAC,CAACL,MAAM,GAAG,CAAC,EAAE;QAChBE,QAAQ,CAACI,KAAK,GAAG,KAAK;QACtBR,gBAAgB,CAACQ,KAAK,GAAGD,CAAC,CAACL,MAAM;MACnC;IACF,CAAC;IACDO,MAAM,EAAGF,CAAC,IAAK;MACb,SAAS;;MAETJ,QAAQ,CAACK,KAAK,GAAGD,CAAC,CAACJ,QAAQ;MAC3BD,MAAM,CAACM,KAAK,GAAGD,CAAC,CAACL,MAAM;IACzB,CAAC;IACDQ,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAETH,QAAQ,CAACI,KAAK,GAAGD,CAAC,CAACL,MAAM,KAAK,CAAC;IACjC;EACF,CAAC,EACD,EAAE,CACH;EAED,OAAO;IAAEA,MAAM;IAAEC,QAAQ;IAAEH,gBAAgB;IAAEI;EAAS,CAAC;AACzD,CAAC;AAAC"}
|
|
@@ -1 +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","onLayoutWorklet","layout","isClosed","useCallback","e","runOnUI","nativeEvent","animatedStyle","useAnimatedStyle","bottom","interpolate","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles","useMemo"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport {
|
|
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","onLayoutWorklet","layout","isClosed","useCallback","e","runOnUI","nativeEvent","animatedStyle","useAnimatedStyle","bottom","interpolate","progress","bottomHeight","flex","paddingBottom","isPositionBehavior","containerStyle","combinedStyles","useMemo"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { View, useWindowDimensions } from 'react-native';\nimport Reanimated, {\n interpolate,\n runOnUI,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n useWorkletCallback,\n} from 'react-native-reanimated';\n\nimport { useKeyboardAnimation } from './hooks';\n\nimport type { LayoutRectangle, ViewProps } from 'react-native';\n\ntype Props = {\n /**\n * Specify how to react to the presence of the keyboard.\n */\n behavior?: 'height' | 'position' | 'padding';\n\n /**\n * Style of the content container when `behavior` is 'position'.\n */\n contentContainerStyle?: ViewProps['style'];\n\n /**\n * Controls whether this `KeyboardAvoidingView` instance should take effect.\n * This is useful when more than one is on the screen. Defaults to true.\n */\n enabled?: boolean;\n\n /**\n * Distance between the top of the user screen and the React Native view. This\n * may be non-zero in some cases. Defaults to 0.\n */\n keyboardVerticalOffset?: number;\n} & ViewProps;\n\nconst defaultLayout: LayoutRectangle = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n};\n\n/**\n * View that moves out of the way when the keyboard appears by automatically\n * adjusting its height, position, or bottom padding.\n */\nconst KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(\n (\n {\n behavior,\n children,\n contentContainerStyle,\n enabled = true,\n keyboardVerticalOffset = 0,\n style,\n onLayout: onLayoutProps,\n ...props\n },\n ref\n ) => {\n const initialFrame = useSharedValue<LayoutRectangle | null>(null);\n const frame = useDerivedValue(() => initialFrame.value || defaultLayout);\n\n const keyboard = useKeyboardAnimation();\n const { height: screenHeight } = useWindowDimensions();\n\n const relativeKeyboardHeight = useWorkletCallback(() => {\n const keyboardY =\n screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;\n\n return Math.max(frame.value.y + frame.value.height - keyboardY, 0);\n }, [screenHeight, keyboardVerticalOffset]);\n\n const onLayoutWorklet = useWorkletCallback((layout: LayoutRectangle) => {\n if (keyboard.isClosed.value) {\n initialFrame.value = layout;\n }\n });\n const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(\n (e) => {\n runOnUI(onLayoutWorklet)(e.nativeEvent.layout);\n onLayoutProps?.(e);\n },\n [onLayoutProps]\n );\n\n const animatedStyle = useAnimatedStyle(() => {\n const bottom = interpolate(\n keyboard.progress.value,\n [0, 1],\n [0, relativeKeyboardHeight()]\n );\n const bottomHeight = enabled ? bottom : 0;\n\n switch (behavior) {\n case 'height':\n if (!keyboard.isClosed.value) {\n return {\n height: frame.value.height - bottomHeight,\n flex: 0,\n };\n }\n\n return {};\n\n case 'position':\n return { bottom: bottomHeight };\n\n case 'padding':\n return { paddingBottom: bottomHeight };\n\n default:\n return {};\n }\n }, [behavior, enabled, relativeKeyboardHeight]);\n const isPositionBehavior = behavior === 'position';\n const containerStyle = isPositionBehavior ? contentContainerStyle : style;\n const combinedStyles = useMemo(\n () => [containerStyle, animatedStyle],\n [containerStyle, animatedStyle]\n );\n\n if (isPositionBehavior) {\n return (\n <View ref={ref} style={style} onLayout={onLayout} {...props}>\n <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>\n </View>\n );\n }\n\n return (\n <Reanimated.View\n // @ts-expect-error because `ref` from reanimated is not compatible with react-native\n ref={ref}\n onLayout={onLayout}\n style={combinedStyles}\n {...props}\n >\n {children}\n </Reanimated.View>\n );\n }\n);\n\nexport default KeyboardAvoidingView;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
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 _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
9
|
+
var _hooks = require("../../hooks");
|
|
10
|
+
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); }
|
|
11
|
+
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; }
|
|
12
|
+
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); }
|
|
13
|
+
const KeyboardStickyView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
14
|
+
let {
|
|
15
|
+
children,
|
|
16
|
+
offset: {
|
|
17
|
+
closed = 0,
|
|
18
|
+
opened = 0
|
|
19
|
+
} = {},
|
|
20
|
+
style,
|
|
21
|
+
...props
|
|
22
|
+
} = _ref;
|
|
23
|
+
const {
|
|
24
|
+
height,
|
|
25
|
+
progress
|
|
26
|
+
} = (0, _hooks.useReanimatedKeyboardAnimation)();
|
|
27
|
+
const stickyViewStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
28
|
+
const offset = (0, _reactNativeReanimated.interpolate)(progress.value, [0, 1], [closed, opened]);
|
|
29
|
+
return {
|
|
30
|
+
transform: [{
|
|
31
|
+
translateY: height.value + offset
|
|
32
|
+
}]
|
|
33
|
+
};
|
|
34
|
+
}, [closed, opened]);
|
|
35
|
+
const styles = (0, _react.useMemo)(() => [style, stickyViewStyle], [style, stickyViewStyle]);
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
|
|
37
|
+
// @ts-expect-error because `ref` from reanimated is not compatible with react-native
|
|
38
|
+
ref: ref,
|
|
39
|
+
style: styles
|
|
40
|
+
}, props), children);
|
|
41
|
+
});
|
|
42
|
+
var _default = KeyboardStickyView;
|
|
43
|
+
exports.default = _default;
|
|
44
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["KeyboardStickyView","forwardRef","ref","children","offset","closed","opened","style","props","height","progress","useReanimatedKeyboardAnimation","stickyViewStyle","useAnimatedStyle","interpolate","value","transform","translateY","styles","useMemo"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport Reanimated, {\n interpolate,\n useAnimatedStyle,\n} from 'react-native-reanimated';\n\nimport { useReanimatedKeyboardAnimation } from '../../hooks';\n\nimport type { View, ViewProps } from 'react-native';\n\ntype KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n} & ViewProps;\n\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },\n ref\n ) => {\n const { height, progress } = useReanimatedKeyboardAnimation();\n\n const stickyViewStyle = useAnimatedStyle(() => {\n const offset = interpolate(progress.value, [0, 1], [closed, opened]);\n\n return {\n transform: [{ translateY: height.value + offset }],\n };\n }, [closed, opened]);\n\n const styles = useMemo(\n () => [style, stickyViewStyle],\n [style, stickyViewStyle]\n );\n\n return (\n <Reanimated.View\n // @ts-expect-error because `ref` from reanimated is not compatible with react-native\n ref={ref}\n style={styles}\n {...props}\n >\n {children}\n </Reanimated.View>\n );\n }\n);\n\nexport default KeyboardStickyView;\n"],"mappings":";;;;;;AAAA;AACA;AAKA;AAA6D;AAAA;AAAA;AAoB7D,MAAMA,kBAAkB,gBAAG,IAAAC,iBAAU,EAInC,OAEEC,GAAG,KACA;EAAA,IAFH;IAAEC,QAAQ;IAAEC,MAAM,EAAE;MAAEC,MAAM,GAAG,CAAC;MAAEC,MAAM,GAAG;IAAE,CAAC,GAAG,CAAC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC;EAGtE,MAAM;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,qCAA8B,GAAE;EAE7D,MAAMC,eAAe,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAC7C,MAAMT,MAAM,GAAG,IAAAU,kCAAW,EAACJ,QAAQ,CAACK,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAACV,MAAM,EAAEC,MAAM,CAAC,CAAC;IAEpE,OAAO;MACLU,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAER,MAAM,CAACM,KAAK,GAAGX;MAAO,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,MAAMY,MAAM,GAAG,IAAAC,cAAO,EACpB,MAAM,CAACZ,KAAK,EAAEK,eAAe,CAAC,EAC9B,CAACL,KAAK,EAAEK,eAAe,CAAC,CACzB;EAED,oBACE,6BAAC,8BAAU,CAAC,IAAI;IACd;IACA,GAAG,EAAEV,GAAI;IACT,KAAK,EAAEgB;EAAO,GACVV,KAAK,GAERL,QAAQ,CACO;AAEtB,CAAC,CACF;AAAC,eAEaH,kBAAkB;AAAA"}
|
|
@@ -9,6 +9,13 @@ Object.defineProperty(exports, "KeyboardAvoidingView", {
|
|
|
9
9
|
return _KeyboardAvoidingView.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
+
Object.defineProperty(exports, "KeyboardStickyView", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _KeyboardStickyView.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
12
18
|
var _KeyboardAvoidingView = _interopRequireDefault(require("./KeyboardAvoidingView"));
|
|
19
|
+
var _KeyboardStickyView = _interopRequireDefault(require("./KeyboardStickyView"));
|
|
13
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
21
|
//# sourceMappingURL=index.js.map
|