From a446a38aaab5bea2e279f1958cfd90090bfd7e09 Mon Sep 17 00:00:00 2001 From: Eli White Date: Wed, 25 Sep 2019 11:42:07 -0700 Subject: [PATCH] Add HostComponent to the public API of React Native Summary: In React Native there are three types of "Native" components. ``` createReactClass with NativeMethodsMixin ``` ``` class MyComponent extends ReactNative.NativeComponent ``` ``` requireNativeComponent('RCTView') ``` The implementation for how to handle all three of these exists in the React Native Renderer. Refs attached to components created via these methods provide a set of functions such as ``` .measure .measureInWindow .measureLayout .setNativeProps ``` These methods have been used for our core components in the repo to provide a consistent API. Many of the APIs in React Native require a `reactTag` to a host component. This is acquired by calling `findNodeHandle` with any component. `findNodeHandle` works with the first two approaches. For a lot of our new Fabric APIs, we will require passing a ref to a HostComponent directly instead of relying on `findNodeHandle` to tunnel through the component tree as that behavior isn't safe with React concurrent mode. The goal of this change is to enable us to differentiate between components created with `requireNativeComponent` and the other types. This will be needed to be able to safely type the new APIs. For existing components that should support being a host component but need to use some JS behavior in a wrapper, they should use `forwardRef`. The majority of React Native's core components were migrated to use `forwardRef` last year. Components that can't use forwardRef will need to have a method like `getNativeRef()` to get access to the underlying host component ref. Reviewed By: rickhanlonii Differential Revision: D17563615 fbshipit-source-id: b9e6042805517d502770fcba37301c2c5b6452b6 --- index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 8e7c6281b3a..458e40cec3c 100644 --- a/index.js +++ b/index.js @@ -99,7 +99,9 @@ import typeof DeprecatedEdgeInsetsPropType from './Libraries/DeprecatedPropTypes import typeof DeprecatedPointPropType from './Libraries/DeprecatedPropTypes/DeprecatedPointPropType'; import typeof DeprecatedViewPropTypes from './Libraries/DeprecatedPropTypes/DeprecatedViewPropTypes'; -import type {HostComponent} from './Libraries/Renderer/shims/ReactNativeTypes'; +import type {HostComponent as _HostComponentInternal} from './Libraries/Renderer/shims/ReactNativeTypes'; + +export type HostComponent = _HostComponentInternal; const invariant = require('invariant'); const warnOnce = require('./Libraries/Utilities/warnOnce');