search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.31k stars 24.35k forks source link

Frequent navigation to the page causes style abnormalities. #47668

Closed Chenjiujiu closed 1 hour ago

Chenjiujiu commented 2 hours ago

Description

Current behavior

When I upgraded to version 0.76, repeatedly navigating to the login page caused abnormal changes in the page’s UI.

RootStackNavigator

#### `RootStackNavigator`: ```typeScript const RootStack = createNativeStackNavigator(); const RootStackNavigator: React.FC = () => { return ( ); }; ```

BottomTabNavigator

#### `BottomTabNavigator`: ```TypeScript const BottomTabNavigator: React.FC = () => { const navigation = useNavigation(); const handleMePress = (e: any) => { e.preventDefault(); navigation.navigate('Login', {}); } return ( ); }; ```

LoginTab

#### `LoginTab`: ```TypeScript const LoginTab: React.FC = () => { return ( console.log(123123)} > {'login'} ); }; ```

Environment

  "dependencies": {
    "@react-navigation/bottom-tabs": "^7.0.4",
    "@react-navigation/elements": "^2.0.3",
    "@react-navigation/material-top-tabs": "^7.0.4",
    "@react-navigation/native": "^7.0.3",
    "@react-navigation/native-stack": "^7.0.3",
    "react": "18.3.1",
    "react-native": "0.76.2",
    "react-native-pager-view": "^6.5.0",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^4.1.0"
  }

Steps to reproduce

Repeatedly clicking on “Me” to enter the login page and then returning, after about a dozen times, causes the button on the login page to behave abnormally.

When I downgraded React Native to version 0.75.4 while keeping other library versions unchanged, the issue disappeared. It works correctly under the following environment.

    "@react-navigation/bottom-tabs": "^7.0.4",
    "@react-navigation/material-top-tabs": "^7.0.4",
    "@react-navigation/native": "^7.0.3",
    "@react-navigation/native-stack": "^7.0.3",
    "react": "18.3.1",
    "react-native": "0.75.4",
    "react-native-pager-view": "^6.5.0",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^4.1.0"

React Native Version

0.76.1

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 15.1
  CPU: (8) arm64 Apple M2
  Memory: 558.61 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.0
    path: ~/.nvm/versions/node/v20.11.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.11.0/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.0/bin/npm
  Watchman:
    version: 2024.08.19.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9619390
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 3.2.4
    path: /Users/chenjj/.rvm/rubies/ruby-3.2.4/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.2
    wanted: 0.76.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

There are no error log

Reproducer

https://github.com/Chenjiujiu/demo002

Screenshots and Videos

https://github.com/user-attachments/assets/c4b5747e-5890-40f4-b117-004be4a3930d

react-native-bot commented 2 hours ago

[!TIP] Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.76.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

react-native-bot commented 2 hours ago

[!TIP] Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

Chenjiujiu commented 2 hours ago

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

The reproducible demo is already using the latest version, 0.76.2.

Chenjiujiu commented 1 hour ago

snack： https://snack.expo.dev/@saddhu/demo002

Chenjiujiu commented 1 hour ago

The current version is 0.72.6.

migueldaipre commented 1 hour ago

Hey, This issue is actually unrelated to React Native core. Please open this issue against this other repository:

https://github.com/callstack/react-native-pager-view/issues

I'll be closing this but feel free to reopen if the other repo points back to us as a issue in the core of React Native.

Duplicates of #47410