This is an example React Native project, bootstrapped using @react-native-community/cli. This is used to track down unexpected behaviour in React rendering / caching for iOS.

Update: This task can only be solved using iOS, because the bug only is reproducible there.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your iOS app:

yarn ios

If everything is set up correctly, you should see your new app running in your iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Xcode.

Step 3: Reproduce the bug

1. Open the app in the simulator
2. See the screenshot below:
3. See the following output in the Metro bundler terminal:
4. The object src/UserProfileFirestorePersistence.ts contains "unsubscribeUserProfile in the console output, but not in the rendered component. This leads to unexpected behaviour, e.g. the useUserProfile() method loading forever - but not deterministically.
5. Find the issue and report it to schmid@speisekammer.app