Comments (4)
Thanks for the extremely detailed report @kmagiera
So there are a number of things at play here. We're aware that useLayoutEffect
doesn't work correctly in the New Architecture till 0.74 (included).
The reason behind this is that in order for useLayoutEffect
to effectively be blocking the rendering on native, we needed a series of changes inside the runtime scheduler (i.e. we needed an API to synchronously block the rendering on native).
Those changes have now landed on main
and we expect useLayoutEffect
to work correctly in 0.75. Ideally, you should be able to test your changes on the latest react-native@nightly
and it should work correctly.
However, I've tested it and I've realized the current implementation is broken, and we'll have to fix it (thanks to your report we were able to spot this early on!). I'm coordinating with @sammy-SC on how we can fix this thing forward, and ideally have a nightly version where useLayoutEffect
works correctly.
I haven't fully investigated why it seems to work correctly on old arch as useLayoutEffect
should have been broken on both archs.
from react-native.
I just tested this on Android and there's also similar difference on Android with and w/o Fabric. Attaching video from Android with fabric where you can also see red background flashes:
android-fabric.webm
from react-native.
Add or Reformat Version Info | |
---|---|
ℹ️ | We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2 |
from react-native.
Hey all,
I'd like to provide a small update here.
As mentioned in my previous update, the useLayoutEffect
is known to be broken in 0.74 RCs. The correct behavior is fixed on main
for iOS and we're discussing about including it in 0.74.1 to unblock libraries and partners.
So if you test your reproducer against react-native@nightly
, you will see that it's fixed.
However, I've tested it and I've realized the current implementation is broken, and we'll have to fix it (thanks to your report we were able to spot this early on!).
For Android the situation is more complicated, as we realized that view preallocation is conflicting with the recent changes that were supposed to fix useLayoutEffect
in the New Architecture. We do have a couple of alternatives here (see #44144 for more context) and we're discussing which one to go forward and include in 0.74.1 to fix this behavior for Android as well.
from react-native.
Related Issues (20)
- Fatal error "available height is undefined" when editing textinput the app closes HOT 3
- Inverted Flatlist not working when scrolled HOT 5
- `TextInput` cursor lags behind text when component is controlled if Auto-Correction and Predictive Text are enabled HOT 4
- RNSVG same register view HOT 4
- Firestore encountered gRPC-C++ error while upgrading Firebase module to 19.2(iOS) HOT 3
- 'selection' prop is not working in TextInput on Android after React Native upgrade to v0.73 HOT 2
- Project with React Native SVG fails to build on 0.74.0-rc.9 with new architecture HOT 7
- XMLHttpRequest Object throws occasional "Network Error" in TestFlight Production Environment HOT 2
- Failure to Generate iOS React Native 0.72.12 Project in Custom Directory HOT 6
- Error React Native app:checkDebugAarMetadata HOT 2
- Focus doesn't move to TextInputs with tab key from external keyboard on android. HOT 1
- Turkish Character Display Problem on Android; Letters "i" turn into "ı" HOT 4
- React Native 0.73 Onboarding Flash Loading & Blank Screen HOT 5
- `keyboardDidChangeFrame` and `keyboardWillChangeFrame` not fires on Android HOT 2
- Yarn android HOT 3
- npx [email protected] init cammnd installs the lattest version of react-native HOT 5
- android onScrollEndDrag throttled by scrollEventThrottle HOT 1
- [iOS] VoiceOver reads the placeholder in TextInput HOT 3
- List<ReactPackage> packages = new PackageList(this).getPackages(); [ANDROID] HOT 3
- Experimental debugger does not work on 0.74 with bridgeless on iOS
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.