MeasureLayout is deprecated in the new architecture. Is there an alternative?

[Qy742698]

Description

The method of measureLayout used in the new architecture is inconsistent with that used in the old architecture.

Steps to reproduce

无

React Native Version

0.72.5

Affected Platforms

Other (please specify)

Areas

Fabric - The New Renderer

Output of npx react-native info

view.measureLayout(
                        nodeHandle,
                        measureCallback,
                        () => {
                            // console.log('Failed to measure Drax view in relation to parent nodeHandle');
                        },
                    );

Stacktrace or Logs

ref.measureLayout must be an instance

Reproducer

no

Screenshots and Videos

No response

[react-native-bot]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

:warning:

Unsupported Version of React Native

:information_source:

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

:warning:

Unsupported Version of React Native

:information_source:

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[Qy742698]

    const measureWithHandler = useCallback(
        (measurementHandler?: DraxViewMeasurementHandler) => {
            const view = viewRef.current;
            if (view) {
                const nodeHandle = parentNodeHandleRef.current;
                if (nodeHandle) {
                    const measureCallback = measurementHandler
                        ? buildMeasureCallback(measurementHandler)
                        : updateMeasurements;
                    // console.log('definitely measuring in reference to something');
                    // UIManager.measureLayout(
                    //  findNodeHandle(view),
                    //  nodeHandle,
                    //  () => { },
                    //  () => {
                    //      measureCallback
                    //  }
                    // )

                    view.measureLayout(
                        nodeHandle,
                        measureCallback,
                        () => {
                            // console.log('Failed to measure Drax view in relation to parent nodeHandle');
                        },
                    );
                } else {
                    // console.log('No parent nodeHandle to measure Drax view in relation to');
                }
            } else {
                // console.log('No view to measure');
            }
        },
        [
            parentNodeHandleRef,
            buildMeasureCallback,
            updateMeasurements,
        ],
    );

 ERROR  Warning: Warning: ref.measureLayout must be called with a ref to a native component.

[cipolleschi]

Hi @Qy742698! Thanks for the question.

You have 2 alternatives, depending on your use case:

1. https://reactnative.dev/docs/direct-manipulation#measurecallback
2. https://reactnative.dev/docs/direct-manipulation#measureinwindowcallback