Skip to content

Commit

Permalink
Add HostComponent to the public API of React Native
Browse files Browse the repository at this point in the history
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
  • Loading branch information
elicwhite authored and facebook-github-bot committed Sep 25, 2019
1 parent 0676ebf commit a446a38
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down

0 comments on commit a446a38

Please sign in to comment.