Flicker only on new arch

[faljabi]

Description

I am facing an flicker as shown in the attached video when an input inside a View with flex = 1 and alignItems and justContent is 'center'. I noticed also it is happening with other screens without text inputs. Switching back to old arch is resolving the issue.

As a hack on new arch, If I remove flex = 1 and use paddingTop for example to center my content it is working fine.

Any hints please?

Steps to reproduce

1. Place some label and input in the center using flex = 1 and alignItems, justContent = 'center'.
2. Focus the input
3. Notice the flicker only on new arch

Snack or a link to a repository

https://snack.expo.dev/gSa8VH--zqkIt0i8aZsZw

Screens version

4.5.0

React Native version

0.76.6

Platforms

iOS, Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 16 Pro Max, Android Pixel 2

Acknowledgements

Yes

[faljabi]

https://github.com/user-attachments/assets/69090ecc-c856-4427-a628-f78ede7607a0

[kkafar]

@faljabi hey,

why do you think this issue is related to react-native-screens? The snack you provided does neither use react-navigation nor react-native-screens? If this issue is reproducible w/o those libraries you should report it directly in react-native's repository. Please let me know whether screens are necessary to reproduce this problem and provide a complete reproduction. Thanks!

[faljabi]

@kkafar oh my bad,

I will update the snack and let you know. 🙏🏻

[kkafar]

Thanks

[ManAnRuck]

It seems similar to https://github.com/react-navigation/react-navigation/issues/12278, but I was told to open an issue here 🫣

[kkafar]

@ManAnRuck are you able to provide a reproduction here?

[ManAnRuck]

sure @kkafar 🙂, I think it could be the same issue (but not sure) https://github.com/ManAnRuck/expo-stack-sidebar-toptabs

https://github.com/user-attachments/assets/f3f7e3cc-d412-4499-bc99-fabbb08e8407

[ManAnRuck]

with expo go (always new architecture) it happens always.

after running: git clean -xdf && yarn && yarn expo prebuild && yarn iOS it is the same behaviour.

Then after changing in app.json to not new architecture "newArchEnabled": false, and running git clean -xdf && yarn && yarn expo prebuild && yarn iOS the issue is gone

[faljabi]

react-navigation/react-navigation#12278

Yes it is the same issue whenever a view has a flex styles, it flickers on new arch only whenever there is a state update.

[markwitt1]

I am having an issue which might be related: https://discord.com/channels/695411232856997968/1335675259453706341/1335675259453706341

[fendermany]

Same issue

[fendermany]

maybe this somehow affects reanimated, if the previous screens use styles and or value, then the bug is reproduced

[creitz]

Same issue - mentioned here

[bhavinatharva]

I tried this ENV['RCT_NEW_ARCH_ENABLED'] = '0' and its stop flickering and working

[klawijuice]

same issue

[kristian-nst]

Same :)

Also, I have another issue, but unsure if its related, but if it is, it might add some clues: (If not, pls ignore)

https://github.com/user-attachments/assets/54a971c3-03b4-40c7-8b1f-d50edf632d58

[faljabi]

I updated several dependencies in my project including rn-screens and issue is gone for me. Not sure what was causing the issue.