Synchronous Layout Effect Example

[Jpoliachik]

I'd like to test out the example in the docs using the sample code linked but useLayoutEffect doesn't seem to be properly blocking like expected.

Steps to reproduce:

• npx react-native@latest init SyncTest
• copied code from this gist to replace App.tsx contents
• cd ios && bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install to enable new architecture for ios. followed this guide
• yarn ios

You'll see the view update and useLayoutEffect updates applied afterwards. The wait(200) makes this apparent:

• I also tried Android with the same result (after enabling new arch in gradle.properties)
• I also tried enabling bridgeless mode for iOS and Android following instructions here
• I've tried using RN latest 0.73.6 and also 0.74-RC4 with the same result.
• When metro starts I see logs which indicate fabric and bridgeless should be properly enabled: (NOBRIDGE) LOG Bridgeless mode is enabled \n(NOBRIDGE) LOG Running "RN0740RC4" with {"rootTag":1,"initialProps":{"concurrentRoot":true},"fabric":true}

Am I missing any other flags or config required to get synchronous useLayoutEffect blocking to work?

[migueldaipre]

I believe this hasn't been merged yet

Related link's:

react-native-community/discussions-and-proposals#744

facebook/react-native#43235

[cortinico]

It should definitely work if you try on the latest nightly with:

npx react-native@latest init RNNightly --version nightly

[Jpoliachik]

It works on the nightly build! Awesome! Thanks for the help @cortinico

[DigitalZebra]

I can confirm this works in RN 75 (and the nightly) when replacing getBoundingClientRect with measureInWindow and the new architecture is enabled :)