search

expo / expo

An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
https://docs.expo.dev
MIT License
34.6k stars 5.56k forks source link

[expo52] IOS nested routing navigation page jitters #33102

Open feierlaolao opened 2 days ago

feierlaolao commented 2 days ago

Minimal reproducible example

https://github.com/feierlaolao/test

Which package manager are you using? (Yarn is recommended)

npm

If the issue is web-related, please select the bundler (web.bundler in the app.json)

metro

Summary

Only in ios, the nested route jump page jitters, and clicking the button also causes jitter

If you hide the header, there will be no jumping. It is suspected to be a rendering problem of the header.

Using the latest expo 52 version and the latest expo-router v7 navigation ,There is no problem with version 51 and v6 navigation

https://github.com/user-attachments/assets/f2d92f10-7b2a-4691-a325-275d85568f27

https://github.com/user-attachments/assets/35eca34c-e7b2-4436-a7f0-0e2a75ccc1eb

package version
@react-navigation/native 7.0.3
@react-navigation/bottom-tabs 7.0.6
@react-navigation/drawer
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context 4.12.0
react-native-screens 4.1.0
react-native-gesture-handler 2.20.2
react-native-reanimated 3.16.1
react-native-tab-view
react-native-pager-view
react-native 0.76.2
expo 52.0.8
node v20.17.0
npm or yarn npm

Environment

expo-env-info 1.2.1 environment info:
    System:
      OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
      Shell: 5.2.21 - /bin/bash
    Binaries:
      Node: 20.17.0 - /usr/bin/node
      npm: 10.8.2 - /usr/bin/npm
    npmPackages:
      expo: ~52.0.8 => 52.0.8 
      expo-router: ~4.0.7 => 4.0.7 
      react: 18.3.1 => 18.3.1 
      react-dom: 18.3.1 => 18.3.1 
      react-native: 0.76.2 => 0.76.2 
      react-native-web: ~0.19.13 => 0.19.13 
    npmGlobalPackages:
      eas-cli: 13.2.1
    Expo Workflow: managed
alexphl commented 1 day ago

looks related to https://github.com/software-mansion/react-native-reanimated/issues/6659

It only happens on new arch, right?

Im my app the workaround was to use useWindowDimensions and useHeaderHeight to manually set container height and width (don't use flex). I'm mostly set on waiting for the issue above to be addressed though.

feierlaolao commented 1 day ago

Yes, there is a problem with the latest version I am using. After I posted it on discord, the official reply said that it is actively dealing with it and it will probably take a while.