Skip to content

Use descriptive component names and fix use of ref #2935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 19, 2022
Merged

Use descriptive component names and fix use of ref #2935

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
175c738
Use descriptive component names and fix use of ref
sammy-SC Jan 18, 2022
5ca825f
Remove ambiguity from migrating .measure* example
sammy-SC Jan 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 29 additions & 39 deletions docs/new-architecture-library-intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,14 +111,14 @@ While we know that all deprecations are a hassle, this guide is intended to help

Much of the migration work requires a HostComponent ref to access certain APIs that are only attached to host components (like View, Text, or ScrollView). HostComponents are the return value of calls to `requireNativeComponent`. `findNodeHandle` tunnels through multiple levels of component hierarchy to find the nearest native component.

As a concrete example, this code uses `findNodeHandle` to tunnel from `MyComponent` through to the `View` rendered by `MyJSComponent`.
As a concrete example, this code uses `findNodeHandle` to tunnel from `ParentComponent` through to the `View` rendered by `ChildComponent`.

```jsx
class MyComponent extends React.Component<Props> {
_ref: ?React.ElementRef<typeof MyJSComponent>;
class ParentComponent extends React.Component<Props> {
_ref: ?React.ElementRef<typeof ChildComponent>;

render() {
return <MyJSComponent ref={this._captureRef} onSubmit={this._onSubmit} />
return <ChildComponent ref={this._captureRef} onSubmit={this._onSubmit} />
}

_captureRef: (ref) => {
Expand All @@ -134,27 +134,29 @@ class MyComponent extends React.Component<Props> {
}
}

function MyJSComponent(props) {
return (
<View>
<SubmitButton onSubmit={props.onSubmit} />
</View>
);
class ChildComponent extends React.Component<Props> {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the component need to be a class? Generally we prefer functional components in examples if possible.

Ideally it would be nice to provide both examples in tabs like in most of the APIs docs:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example with function component is below on line 171.
I will think about it and create a separate PR cc @cortinico

render() {
return (
<View>
<SubmitButton onSubmit={props.onSubmit} />
</View>
);
}
}
```

We can’t convert this call to `this._ref.measure` because `this._ref` is an instance to `MyJSComponent`, which is not a HostComponent and thus does not have a `measure` function.
We can’t convert this call to `this._ref.measure` because `this._ref` is an instance to `ChildComponent`, which is not a HostComponent and thus does not have a `measure` function.

`MyJSComponent` renders a View, which is a HostComponent, so we need to get a reference to `View` instead. There are typically two approaches to get what we need. If the component we need to get the ref from is a function component using `forwardRef` is probably the right choice. If it is a class component with other public methods, adding a public method for getting the ref is an option. Here are examples of those two forms:
`ChildComponent` renders a `View`, which is a HostComponent, so we need to get a reference to `View` instead. There are typically two approaches to get what we need. If the component we need to get the ref from is a function component using `forwardRef` is probably the right choice. If it is a class component with other public methods, adding a public method for getting the ref is an option. Here are examples of those two forms:

### Using `forwardRef`

```jsx
class MyComponent extends React.Component<Props> {
_ref: ?React.ElementRef<typeof MyJSComponent>;
class ParentComponent extends React.Component<Props> {
_ref: ?React.ElementRef<typeof ChildComponent>;

render() {
return <MyJSComponent ref={this._captureRef} onSubmit={this._onSubmit} />
return <ChildComponent ref={this._captureRef} onSubmit={this._onSubmit} />
}

_captureRef: (ref) => {
Expand All @@ -168,7 +170,7 @@ class MyComponent extends React.Component<Props> {
}
}

const MyJSComponent = React.forwardRef((props, forwardedRef) => {
const ChildComponent = React.forwardRef((props, forwardedRef) => {
return (
<View ref={forwardedRef}>
<SubmitButton onSubmit={props.onSubmit} />
Expand All @@ -180,11 +182,11 @@ const MyJSComponent = React.forwardRef((props, forwardedRef) => {
### Using a getter, (note the addition of `getViewRef`)

```tsx
class MyComponent extends React.Component<Props> {
_ref: ?React.ElementRef<typeof MyJSComponent>;
class ParentComponent extends React.Component<Props> {
_ref: ?React.ElementRef<typeof ChildComponent>;

render() {
return <MyJSComponent ref={this._captureRef} onSubmit={this._onSubmit} />
return <ChildComponent ref={this._captureRef} onSubmit={this._onSubmit} />
}

_captureRef: (ref) => {
Expand All @@ -198,7 +200,7 @@ class MyComponent extends React.Component<Props> {
}
}

class MyJSComponent extends React.Component<Props> {
class ChildComponent extends React.Component<Props> {
_ref: ?React.ElementRef<typeof View>;

render() {
Expand All @@ -224,33 +226,21 @@ class MyJSComponent extends React.Component<Props> {
Let’s take a look at an example calling `UIManager.measure`. This code might look something like this

```js
if (this._scrollView == null || viewRef == null) {
return;
}

const viewRef: React.ElementRef<typeof View> = /* ... */;
const viewHandle = ReactNative.findNodeHandle(viewRef);
const scrollViewHandle = ReactNative.findNodeHandle(
this._scrollView
);
UIManager.measure(scrollViewHandle, (x, y, width, height) => {
UIManager.measureLayout(
viewHandle,
scrollViewHandle,
emptyFunction,
successCallback
);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think these removed lines are needed. They don't provide extra information.


UIManager.measure(viewHandle, (x, y, width, height) => {
// Use layout metrics.
});
```

In order to call `UIManager.measure*` we need to call `findNodeHandle` first and pass in those handles. With the new API, we instead call `measure` directly on native refs without `findNodeHandle`. The example above with the new API looks like this:

```js
if (this._scrollView == null || viewRef == null) {
return;
}
const viewRef: React.ElementRef<typeof View> = /* ... */;

this._scrollView.measure((x, y, width, height) => {
viewRef.measureLayout(this._scrollView, successCallback);
viewRef.measure((x, y, width, height) => {
// Use layout metrics.
});
```

Expand Down