flicker screen problem

[wvq]

Description

I don't know why the screen keeps flickering. I tested several models of iPhone.

simplely useSharedValue and transform view's translateY, no matter using timing method or programmatically change the value, I't flickering.

reproduce-flickering-issue-repo

example.MP4

Steps to reproduce

1. npx create-expo-app@latest
2. add some screen
3. use react-native-reanimated at first page
4. second page flickering

Snack or a link to a repository

https://github.com/wvq/example-use-animated-keyboard.git

Reanimated version

3.17.1

React Native version

0.77.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

Release app & production bundle

Device

Real device

Device model

iPhone X, iPhone 15

Acknowledgements

Yes

[MatiPl01]

It looks like a long-known react-native-screen issue with the native stack header. Can you set headerShown to false on your navigator and see if the issue still persists?

like this:

 <StackNavigator.Navigator
  screenOptions={{
    headerShown: false
  }}>

Let me know when you test it.

[wvq]

@MatiPl01 It's true, the screen stop flickering when headerShow is false.

[MatiPl01]

Ok, good, so that is a react-native-screens related issue. We also encountered the same problems in our example app in Reanimated. I will keep this issue open so that we can come back to it in the future.