-
Notifications
You must be signed in to change notification settings - Fork 24k
/
Keyboard.js
204 lines (184 loc) · 5.65 KB
/
Keyboard.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
import dismissKeyboard from '../../Utilities/dismissKeyboard';
import Platform from '../../Utilities/Platform';
import NativeKeyboardObserver from './NativeKeyboardObserver';
import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
export type KeyboardEventName = $Keys<KeyboardEventDefinitions>;
export type KeyboardEventEasing =
| 'easeIn'
| 'easeInEaseOut'
| 'easeOut'
| 'linear'
| 'keyboard';
export type KeyboardMetrics = $ReadOnly<{|
screenX: number,
screenY: number,
width: number,
height: number,
|}>;
export type KeyboardEvent = AndroidKeyboardEvent | IOSKeyboardEvent;
type BaseKeyboardEvent = {|
duration: number,
easing: KeyboardEventEasing,
endCoordinates: KeyboardMetrics,
|};
export type AndroidKeyboardEvent = $ReadOnly<{|
...BaseKeyboardEvent,
duration: 0,
easing: 'keyboard',
|}>;
export type IOSKeyboardEvent = $ReadOnly<{|
...BaseKeyboardEvent,
startCoordinates: KeyboardMetrics,
isEventFromThisApp: boolean,
|}>;
type KeyboardEventDefinitions = {
keyboardWillShow: [KeyboardEvent],
keyboardDidShow: [KeyboardEvent],
keyboardWillHide: [KeyboardEvent],
keyboardDidHide: [KeyboardEvent],
keyboardWillChangeFrame: [KeyboardEvent],
keyboardDidChangeFrame: [KeyboardEvent],
};
/**
* `Keyboard` module to control keyboard events.
*
* ### Usage
*
* The Keyboard module allows you to listen for native events and react to them, as
* well as make changes to the keyboard, like dismissing it.
*
*```
* import React, { Component } from 'react';
* import { Keyboard, TextInput } from 'react-native';
*
* class Example extends Component {
* componentWillMount () {
* this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
* this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
* }
*
* componentWillUnmount () {
* this.keyboardDidShowListener.remove();
* this.keyboardDidHideListener.remove();
* }
*
* _keyboardDidShow () {
* alert('Keyboard Shown');
* }
*
* _keyboardDidHide () {
* alert('Keyboard Hidden');
* }
*
* render() {
* return (
* <TextInput
* onSubmitEditing={Keyboard.dismiss}
* />
* );
* }
* }
*```
*/
class Keyboard {
_currentlyShowing: ?KeyboardEvent;
_emitter: NativeEventEmitter<KeyboardEventDefinitions> =
new NativeEventEmitter(
// T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
// If you want to use the native module on other platforms, please remove this condition and test its behavior
Platform.OS !== 'ios' ? null : NativeKeyboardObserver,
);
constructor() {
this.addListener('keyboardDidShow', ev => {
this._currentlyShowing = ev;
});
this.addListener('keyboardDidHide', _ev => {
this._currentlyShowing = null;
});
}
/**
* The `addListener` function connects a JavaScript function to an identified native
* keyboard notification event.
*
* This function then returns the reference to the listener.
*
* @param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. This
*can be any of the following:
*
* - `keyboardWillShow`
* - `keyboardDidShow`
* - `keyboardWillHide`
* - `keyboardDidHide`
* - `keyboardWillChangeFrame`
* - `keyboardDidChangeFrame`
*
* Android versions prior to API 30 rely on observing layout changes when
* `android:windowSoftInputMode` is set to `adjustResize` or `adjustPan`.
*
* `keyboardWillShow` as well as `keyboardWillHide` are not available on Android since there is
* no native corresponding event.
*
* @param {function} callback function to be called when the event fires.
*/
addListener<K: $Keys<KeyboardEventDefinitions>>(
eventType: K,
listener: (...$ElementType<KeyboardEventDefinitions, K>) => mixed,
context?: mixed,
): EventSubscription {
return this._emitter.addListener(eventType, listener);
}
/**
* Removes all listeners for a specific event type.
*
* @param {string} eventType The native event string listeners are watching which will be removed.
*/
removeAllListeners<K: $Keys<KeyboardEventDefinitions>>(eventType: ?K): void {
this._emitter.removeAllListeners(eventType);
}
/**
* Dismisses the active keyboard and removes focus.
*/
dismiss(): void {
dismissKeyboard();
}
/**
* Whether the keyboard is last known to be visible.
*/
isVisible(): boolean {
return !!this._currentlyShowing;
}
/**
* Return the metrics of the soft-keyboard if visible.
*/
metrics(): ?KeyboardMetrics {
return this._currentlyShowing?.endCoordinates;
}
/**
* Useful for syncing TextInput (or other keyboard accessory view) size of
* position changes with keyboard movements.
*/
scheduleLayoutAnimation(event: KeyboardEvent): void {
const {duration, easing} = event;
if (duration != null && duration !== 0) {
LayoutAnimation.configureNext({
duration: duration,
update: {
duration: duration,
type: (easing != null && LayoutAnimation.Types[easing]) || 'keyboard',
},
});
}
}
}
module.exports = (new Keyboard(): Keyboard);