Skip to content
Draft
Changes from all commits
Commits
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
59 changes: 59 additions & 0 deletions packages/react-native/__typetests__/component-refs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/**

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

nit: Can we rename this file component-refs.tsx?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Done, renamed to component-refs.tsx.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

nit: Can we rename this file component-refs.tsx?

Thanks again for taking the time to review and merge this, it was a great first contribution to React Native for me. I'd really like to keep contributing here, so if there are areas that could use help or issues you'd point a newer contributor toward, I'd be glad to pick them up. Would love to stay in touch . https://www.linkedin.com/in/sukhmanbalagan/

* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/

import * as React from 'react';
import {View} from 'react-native';

// A ref to a host component resolves to its imperative handle, which exposes
// the native measurement and mutation methods. `React.ComponentRef<typeof View>`
// is the pattern that resolves to that handle under both the legacy and the
// strict public types; the `View` component type itself is not the handle.
type ViewHandle = React.ComponentRef<typeof View>;

export function ViewImperativeHandle() {
const viewRef = React.useRef<ViewHandle>(null);
const targetRef = React.useRef<ViewHandle>(null);

const measure = () => {
const view = viewRef.current;
const target = targetRef.current;
if (view == null || target == null) {
return;
}

view.measure(
(
x: number,
y: number,
width: number,
height: number,
pageX: number,
pageY: number,
) => {},
);

view.measureInWindow(
(x: number, y: number, width: number, height: number) => {},
);

view.measureLayout(
target,
(left: number, top: number, width: number, height: number) => {},
() => {},
);

view.setNativeProps({});
};

return (
<View ref={viewRef}>
<View ref={targetRef} />
</View>
);
}
Loading