Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrading React native from 0.74 to 0.76 in existing project creates Jittering effect #47926

Open
shreygargofficial opened this issue Nov 25, 2024 · 22 comments
Labels
Needs: Attention Issues where the author has responded to feedback.

Comments

@shreygargofficial
Copy link

Description

I was using expo sdk 51.0.28 and RN 0.74.5 after upgrading it to latest expo and RN, I am facing lot of jittering effect in app

Earlier package.json

{ "name": "vyayam", "version": "1.0.0", "main": "expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^14.0.4", "@hookform/resolvers": "^3.9.0", "@react-native-async-storage/async-storage": "^1.23.1", "@react-native-community/datetimepicker": "^8.2.0", "@react-native-community/slider": "4.5.2", "@react-native-picker/picker": "^2.8.1", "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "@reduxjs/toolkit": "^2.2.8", "axios": "^1.7.7", "expo": "~51.0.28", "expo-font": "~12.0.10", "expo-linear-gradient": "^13.0.2", "expo-linking": "~6.3.1", "expo-secure-store": "^13.0.2", "expo-splash-screen": "~0.27.6", "expo-status-bar": "~1.12.1", "lottie-react-native": "6.7.0", "react": "18.2.0", "react-hook-form": "^7.53.0", "react-native": "0.74.5", "react-native-chart-kit": "^6.12.0", "react-native-gesture-handler": "~2.16.1", "react-native-htmlview": "^0.17.0", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1", "react-native-svg": "^15.8.0", "react-native-webview": "13.8.6", "react-redux": "^9.1.2", "redux-persist": "^6.0.0", "redux-thunk": "^3.1.0", "yup": "^1.4.0" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true }

After Upgrade to latest one

{ "name": "vyayam", "version": "1.0.0", "main": "expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^14.0.2", "@hookform/resolvers": "^3.9.0", "@react-native-async-storage/async-storage": "1.23.1", "@react-native-community/datetimepicker": "8.2.0", "@react-native-community/slider": "4.5.5", "@react-native-picker/picker": "2.9.0", "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "@reduxjs/toolkit": "^2.2.8", "axios": "^1.7.7", "expo": "~52.0.11", "expo-font": "~13.0.1", "expo-linear-gradient": "~14.0.1", "expo-linking": "~7.0.3", "expo-secure-store": "~14.0.0", "expo-splash-screen": "~0.29.13", "expo-status-bar": "~2.0.0", "lottie-react-native": "7.1.0", "react": "18.3.1", "react-hook-form": "^7.53.0", "react-native": "0.76.3", "react-native-chart-kit": "^6.12.0", "react-native-gesture-handler": "~2.20.2", "react-native-htmlview": "^0.17.0", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.1.0", "react-native-svg": "15.8.0", "react-native-webview": "13.12.2", "react-redux": "^9.1.2", "redux-persist": "^6.0.0", "redux-thunk": "^3.1.0", "yup": "^1.4.0" }, "devDependencies": { "@babel/core": "^7.25.2" }, "private": true }

ScreenRecording_11-25-2024.15-20-27_1.MP4
ScreenRecording_11-25-2024.15-30-28_1.MP4

Steps to reproduce

https://github.com/shreygargofficial/vyayam/tree/upgrade

clone it do npm i then npm start

React Native Version

0.76.3

Output of npx react-native info

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }

Screenshots and Videos

Screenshot_1732532098

@shreygargofficial shreygargofficial added Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging Needs: Triage 🔍 labels Nov 25, 2024
@robhogan robhogan removed the Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging label Nov 25, 2024
@Fab-Diaz
Copy link

Fab-Diaz commented Nov 26, 2024

Agreed, I'm facing the same issue when going from one screen to another. Seems to be android only

@migueldaipre
Copy link
Collaborator

Hey @shreygargofficial, thanks for opening this issue.

This doesn't seem to be a issue with the react-native core. We need a stand-alone reproducer (react-native core only)

@migueldaipre
Copy link
Collaborator

@Fab-Diaz can you share your dependencies?

@LeXuanKhanh
Copy link

I have the same issue when creating a new project with the latest Expo 52. Whenever I click / hold the button or navigate to a new screen, it will cause flickering. Would it still count as an issue in react-native core ?

Screen.Recording.2024-11-27.at.22.45.34.mov

@shreygargofficial
Copy link
Author

I have the same issue when creating a new project with the latest Expo 52. Whenever I click / hold the button or navigate to a new screen, it will cause flickering. Would it still count as an issue in react-native core ?

Screen.Recording.2024-11-27.at.22.45.34.mov

Exactly Mine issue is all about why it is behaving like this

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Nov 27, 2024
@Kudo
Copy link
Contributor

Kudo commented Dec 3, 2024

the https://github.com/shreygargofficial/vyayam/tree/upgrade returns 404. could you help to check the repro is valid?

@shreygargofficial
Copy link
Author

the https://github.com/shreygargofficial/vyayam/tree/upgrade returns 404. could you help to check the repro is valid?

sorry, I made it private...If you want to check I can make it public

@Kudo
Copy link
Contributor

Kudo commented Dec 4, 2024

sorry, I made it private...If you want to check I can make it public

@shreygargofficial yes please, we would like to investigate the issue. would be good if you could make the repro public.

@Fab-Diaz
Copy link

Fab-Diaz commented Dec 4, 2024

Another more extreme example between a modal and a page

edit: using Expo 52

Screen.Recording.2024-12-04.at.11.26.48.mov

@LeXuanKhanh
Copy link

Another more extreme example between a modal and a page

Screen.Recording.2024-12-04.at.11.26.48.mov

are you using expo as well ?

@shreygargofficial
Copy link
Author

Another more extreme example between a modal and a page

Screen.Recording.2024-12-04.at.11.26.48.mov

are you using expo as well ?

Yes

@shreygargofficial
Copy link
Author

sorry, I made it private...If you want to check I can make it public

@shreygargofficial yes please, we would like to investigate the issue. would be good if you could make the repro public.

Done..Now it is public

@Kudo
Copy link
Contributor

Kudo commented Dec 4, 2024

Done..Now it is public

thanks @shreygargofficial. one thing i've noticed before digging is that you use old architecture on sdk 51 and newArchEnabled=true on sdk 52. that could have much difference between the old/new architecture. i guess i would try to turn on new arch on sdk 51 or disable new arch on sdk 52 to see if the performance is still valid.

@shreygargofficial
Copy link
Author

Done..Now it is public

thanks @shreygargofficial. one thing i've noticed before digging is that you use old architecture on sdk 51 and newArchEnabled=true on sdk 52. that could have much difference between the old/new architecture. i guess i would try to turn on new arch on sdk 51 or disable new arch on sdk 52 to see if the performance is still valid.

I tried that but it was not working

@Kudo
Copy link
Contributor

Kudo commented Dec 4, 2024

@shreygargofficial i can repro your issue.

  • it works fine on sdk 51, both new arch and old arch.
  • from sdk 52, the issue happens no matter on new arch or old arch.
  • mostly relate to keyboard. from your two videos, i cannot clearly see whether you touched at any textinput? could you help to clarify this? the jitter issue happens when i touch textinput (and keyboard appears)
  • the most trivial repro step for me is from login screen -> signup -> touch textinput -> back to login screen. as the video shown: Screen_recording_20241205_024251.webm

will try to narrow down the issue more and update if i find anything

@shreygargofficial
Copy link
Author

shreygargofficial commented Dec 4, 2024 via email

@Kudo
Copy link
Contributor

Kudo commented Dec 9, 2024

@shreygargofficial having #48171 and #48181 to fix KeyboardAvoidingView but not sure that would fix the your problem. i cannot exactly repro the other floating button cases, not sure if i missed anything.

the steps to try both #48171 and #48181 on your project

$ curl -fsSL https://gist.githubusercontent.com/Kudo/ffc4d7bcac965e3f647ca19543d2f139/raw/cc07fbfbb8bbffaf5fec175366154d0f5afa9e2c/patch.sh | bash
$ npx expo prebuild -p android --clean
$ npx expo run:android

@hirbod
Copy link

hirbod commented Dec 9, 2024

The navigation issue is caused by react native screens v4. software-mansion/react-native-screens#2550

There are multiple linked issues to this that are likely caused by the same root.

@shreygargofficial
Copy link
Author

@shreygargofficial i can repro your issue.

  • it works fine on sdk 51, both new arch and old arch.
  • from sdk 52, the issue happens no matter on new arch or old arch.
  • mostly relate to keyboard. from your two videos, i cannot clearly see whether you touched at any textinput? could you help to clarify this? the jitter issue happens when i touch textinput (and keyboard appears)
  • the most trivial repro step for me is from login screen -> signup -> touch textinput -> back to login screen. as the video shown: Screen_recording_20241205_024251.webm

will try to narrow down the issue more and update if i find anything

No, I haven't touched the keyboard in the video secondly, in the first video the layout is like there is wrapper View with flex:1 then there are 4 child in that of flex 3, 3, 7, and 3 respectively. The First and third child of flex 3 and 7 is having a scrollView in that flexed View..

In the second video there is just a floating button with position absolute that cause issue while upgrading from older version to newer

@Kudo
Copy link
Contributor

Kudo commented Dec 10, 2024

No, I haven't touched the keyboard in the video secondly, in the first video the layout is like there is wrapper View with flex:1 then there are 4 child in that of flex 3, 3, 7, and 3 respectively. The First and third child of flex 3 and 7 is having a scrollView in that flexed View..

In the second video there is just a floating button with position absolute that cause issue while upgrading from older version to newer

alright. would be good if you could record full videos from launching the app to the problems, so that we can know the all steps to repro. if the account's generated content is also relevant, would be good if you could share an account/password that could demonstrate the problems.

@shreygargofficial
Copy link
Author

shreygargofficial commented Dec 10, 2024 via email

@shreygargofficial
Copy link
Author

Any update ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Attention Issues where the author has responded to feedback.
Projects
None yet
Development

No branches or pull requests

7 participants