[Fabric] Wire up event emitters (#12847)
I'm exposing a new native method to wire up the event emitter. This will use a straight fiber pointer instead of react tags to do the dispatching.
Sebastian Markbåge committed
May 17, 2018 at 12:38 UTC
c5a8dae025812adebdebfa1e96e80c923dd527ae
5 files changed
+66
-1
packages/events/TopLevelEventTypes.js
+1
-1
@@ -7,7 +7,7 @@
7
* @flow
8
*/
9
10
-type RNTopLevelEventType =
10
+export type RNTopLevelEventType =
11
| 'topMouseDown'
12
| 'topMouseMove'
13
| 'topMouseUp'
packages/react-native-renderer/src/ReactFabricEventEmitter.js
new
+44
@@ -0,0 +1,44 @@
1
+/**
2
+ * Copyright (c) 2015-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
11
+
12
+import {getListener, runExtractedEventsInBatch} from 'events/EventPluginHub';
13
+import {registrationNameModules} from 'events/EventPluginRegistry';
14
+import {batchedUpdates} from 'events/ReactGenericBatching';
15
+
16
+import type {AnyNativeEvent} from 'events/PluginModuleType';
17
+import type {TopLevelType} from 'events/TopLevelEventTypes';
18
+
19
+export {getListener, registrationNameModules as registrationNames};
20
+
21
+/**
22
+ * Publicly exposed method on module for native objc to invoke when a top
23
+ * level event is extracted.
24
+ * @param {rootNodeID} rootNodeID React root node ID that event occurred on.
25
+ * @param {TopLevelType} topLevelType Top level type of event.
26
+ * @param {object} nativeEventParam Object passed from native.
27
+ */
28
+export function dispatchEvent(
29
+ target: Object,
30
+ topLevelType: TopLevelType,
31
+ nativeEvent: AnyNativeEvent,
32
+) {
33
+ const targetFiber = (target: Fiber);
34
+ batchedUpdates(function() {
35
+ runExtractedEventsInBatch(
36
+ topLevelType,
37
+ targetFiber,
38
+ nativeEvent,
39
+ nativeEvent.target,
40
+ );
41
+ });
42
+ // React Native doesn't use ReactControlledComponent but if it did, here's
43
+ // where it would do it.
44
+}
packages/react-native-renderer/src/ReactFabricHostConfig.js
+11
@@ -23,6 +23,8 @@ import * as ReactNativeViewConfigRegistry from 'ReactNativeViewConfigRegistry';
23
import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
24
import invariant from 'fbjs/lib/invariant';
25
26
+import {dispatchEvent} from './ReactFabricEventEmitter';
27
+
28
// Modules provided by RN:
29
import TextInputState from 'TextInputState';
30
import {
@@ -35,6 +37,7 @@ import {
37
appendChild,
38
appendChildToSet,
39
completeRoot,
40
+ registerEventHandler,
41
} from 'FabricUIManager';
42
import UIManager from 'UIManager';
43
@@ -48,6 +51,14 @@ type HostContext = $ReadOnly<{|
51
isInAParentText: boolean,
52
|}>;
53
54
+// TODO: Remove this conditional once all changes have propagated.
55
+if (registerEventHandler) {
56
+ /**
57
+ * Register the event emitter with the native bridge
58
+ */
59
+ registerEventHandler(dispatchEvent);
60
+}
61
+
62
/**
63
* This is used for refs on host components.
64
*/
packages/react-native-renderer/src/__mocks__/FabricUIManager.js
+2
@@ -125,6 +125,8 @@ const RCTFabricUIManager = {
125
completeRoot: jest.fn(function completeRoot(rootTag, newChildSet) {
126
roots.set(rootTag, newChildSet);
127
}),
128
+
129
+ registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
130
};
131
132
module.exports = RCTFabricUIManager;
scripts/flow/react-native-host-hooks.js
+8
@@ -13,6 +13,7 @@ import type {
13
ReactNativeBaseComponentViewConfig,
14
ViewConfigGetter,
15
} from 'react-native-renderer/src/ReactNativeTypes';
16
+import type {RNTopLevelEventType} from 'events/TopLevelEventTypes';
17
18
declare module 'deepDiffer' {
19
declare module.exports: (one: any, two: any) => boolean;
@@ -121,6 +122,13 @@ declare module 'FabricUIManager' {
122
declare function createChildSet(rootTag: number): Object;
123
declare function appendChildToSet(childSet: Object, childNode: Object): void;
124
declare function completeRoot(rootTag: number, childSet: Object): void;
125
+ declare function registerEventHandler(
126
+ callback: (
127
+ instanceHandle: Object,
128
+ type: RNTopLevelEventType,
129
+ payload: Object,
130
+ ) => void,
131
+ ): void;
132
}
133
134
declare module 'View' {