Skip to content
Browse files
Add HostComponent to the public API of React Native
In React Native there are three types of "Native" components.

createReactClass with NativeMethodsMixin
class MyComponent extends ReactNative.NativeComponent

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

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
  • Loading branch information
TheSavior authored and facebook-github-bot committed Sep 25, 2019
1 parent 0676ebf commit a446a38aaab5bea2e279f1958cfd90090bfd7e09
Showing 1 changed file with 3 additions and 1 deletion.
@@ -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<T> = _HostComponentInternal<T>;

const invariant = require('invariant');
const warnOnce = require('./Libraries/Utilities/warnOnce');

0 comments on commit a446a38

Please sign in to comment.