React Navigation Mount and Unmount Breaking Bug

acaininet commented 1 year ago

Problem Description

https://user-images.githubusercontent.com/104597574/227246914-5561868d-3e20-4b2e-aa5e-334731017cd0.mp4

Using @react-navigation/native , screens are being unmounted and mounted, in the process losing states. Screens mount and unmount on any screen change, losing all states in RNW, not congruent with android/ios functionality. Several notes from video: Text fields in Feed screen have been attached to states. Those states are not retained after switching to a different screen and back. Any screen operation results in Feed being unmounted and mounted again (killing states, etc.). This is reflected in the console output.

I first saw this problem in @react-navigation/stack in the project that I am working on. Reproduced in @react-navigation/native with @react-navigation/drawer from a test application

Steps To Reproduce

Create a RN / RNW project (for me RNW .71)
Follow guide at https://reactnative.dev/docs/navigation to set up navigation for project. Have at least 2 screens, at least 1 with states.
Start the application
Change the state on a screen.
Navigate away from the original screen
Navigate back to the original screen
States have been lost

Expected Results

Screens should not be unmounted when navigating away or rendering different screens. Screens should also not be remounted under same circumstances. Screen rendering should be equivelent to processes used by android/ios platforms (other RN supported platforms) at least in functionality.

CLI version

10.2.0

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 12.49 GB / 31.64 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.6.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29, 30, 31, 32
      Build Tools: 28.0.3, 29.0.3, 30.0.2, 32.0.0, 32.1.0
      System Images: android-29 | ARM 64 v8a, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom, android-32 | Google APIs ARM 64 v8a, android-32 | Google APIs Intel x86 Atom_64, android-32 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.16299.0, 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0, 10.0.20348.0, 10.0.22000.0
  IDEs:
    Android Studio: Version     2021.1.0.0 AI-211.7628.21.2111.8193401
    Visual Studio: 16.11.33214.272 (Visual Studio Professional 2019), 17.4.33213.308 (Visual Studio Professional 2022)
  Languages:
    Java: 11.0.12
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: ^0.71.0 => 0.71.4
    react-native-windows: 0.71.4 => 0.71.4
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

None

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

https://github.com/acaininet/BreakingBugRNWNavigation0323

acaininet commented 1 year ago

There are a variety of issue posts on different repositories in search of a permanent solution to this issue. This is an especially impactful issue as this form of navigation is the officially supported form of navigation for React Native as supported by the project's documentation.

This is a similar issue posted to the react-navigation repository: https://github.com/react-navigation/react-navigation/issues/10835

There are several other issues posted to other repositories: https://github.com/software-mansion/react-native-screens/issues/1684 https://github.com/microsoft/react-native-windows/issues/11094 https://github.com/software-mansion/react-native-screens/issues/1684 https://github.com/react-navigation/react-navigation/issues/11146

Most valid information seems to come from: https://github.com/microsoft/react-native-windows/issues/10484#issuecomment-1232785185 Although, this does not provide a permanent solution for the issue. Please expedite a solution to this as it is a fundamental control in React Native and significantly impacts cross platform development

chrisglein commented 1 year ago

My understanding is that the react-navigation (and screens) implementation for Windows is partial. There's a need for a native solution and one hasn't been built yet. There's been efforts to patch the symptoms in place, but there are gaps and differences in behavior that still need to be corrected. @chiaramooney and @AgneLukoseviciute have some of the background for where things are.

However, those implementations are not covered by this repo. The issues should be tracked on the corresponding repos where the code in question lives. From your links it looks like they are (https://github.com/react-navigation/react-navigation/issues/10835). Closing this issue.

tritter commented 8 months ago

@chrisglein Both repos are fingerpointing. https://github.com/react-navigation/react-navigation/issues/10835 @satya164 right here as it works on all platforms.

This is quit crucial for using RN-Windows, we delayed our update strategy and are holding strong on RN-Windows 65 as there it still works.

microsoft / react-native-windows