App goes back to the initial screen when using fast refresh

[lluisandreu]

Every time I make a change and fast refresh is fired I go back to the initial screen. Is there a way to keep the current screen when developing? It's super annoying to navigate to the screen I am developing on every code change. I remember that was possible using React Navigation.

Thanks!

[ratley]

I usually see this happen when saving changes to a _layout file or when editing a util file that is used widely throughout the app. But if it's happening on every save regardless of the file, something might be wrong.

[wcastand]

i discovered that if you have const outside the react component (for me it was zod schema) it will make that specific screen/component re-render the whole application.

Fast Refresh is only on react component si if you have variable or function exported outside and initialized outside the react component context, it will trigger a full re-render.

Only way i found to avoid that was to make anything outside react a function that i can call and init in the component itself.

[simonszalai]

I had the same issue, but very interestingly, defining a zod schema in another screen the same way did not cause an issue. Now, I moved the schema to its own file, the issue went away. Then I moved it back, and it kept working, which makes me think it could be some sort of caching issue. I did a full rm -rf node_modules before, then expo start -c.

[vktrl]

Zod uses a global errorMap singleton. It could be that HMR is messing with the references, or the other way around. Could also be affected by asyncRoutes.

[Anirudh596]

I had this problem too but I figured it out by my self as I didn't find anything related to it, It is a hard Routing Issue. Routing problems can arise from various sources, such as incorrect configuration or mismanagement of routes. Even a small oversight, like a misplaced '/' in your routes, can lead to unexpected behavior. To resolve these issues, it's crucial to follow best practices outlined in the documentation. This includes properly configuring your app's routing within layouts and ensuring that all routes are defined correctly. Identifying and fixing routing problems often requires some trial and error. Through practice and experimentation, you can pinpoint the root cause of the issue and implement the necessary fixes.

If you're still facing difficulties or if you need further clarification on any aspect, feel free to reply to this message, and I'll be happy to assist you further.

Happy coding! 😊

[Amiko1]

HI I have this problem right now, every change refresh whole application I even see splash screen, I did not notice when it started and now find the problem is very hard, I use expo tabs maybe I missed something my folder structure is like this

it's complex, is there any way to have tabs without that complexity? I nested so many stacks and I don't like it 👍🏽

[Anirudh596]

hey listen bro although i'm new to expo, let me first make clear things step by step that i find out in my journey with expo and expo-router.

First of all if you make changes in the _layout.jsx/tsx file then you surely see the reload of app when it saved the file no matter whatever you do in any layout file, reload is inevitable.
then the second thing i want to mention that you have to check, how you using navigation of the routes where you making changes like i gave you an example first:
this is my project that i've been currently working on

and this is my mainlayout of the app

and this is how i handle it's routing

when i go to that route and make changes in the code the app reload again and again do you see mistake okay if you not then when i did this

i don't see any app reloading in my app make sure you handle routing with very precautions as i mentioned '/' can make you dev expreince horrified and also one more thing you app reloads when you have any typo error too and even you fixed it lend you to home page when the error removed reload is also inevitable, and one more thing i like to mention if you don't see changes after you remove extra slashes or change your route handling the make sure to restart the app.
so this is it i hope you find it useful if not tell me what else and i try to help.

one more thing i need to mention that if your folder has files layout and index, and if you use that vscode library that create a full function based component by using 'rnfes' command then you make sure you change the file as well from index and _layout to anything like homepage and homepagelayout

Happy Coding 😊.

[alfjesus]

Hi! I experienced the same issue with the app going back to initial screen (fast refresh) every time I saved a change.
I realized that I had done one small mistake. In my screen components I had by mistake named the screen with only small letters.

import React from 'react';
import { View, Text } from 'react-native';

const settings = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings page</Text>
    </View>
  );
};

export default settings;

When I change the screen name (see code below) with capital first letter everything was working again 🥳

import React from 'react';
import { View, Text } from 'react-native';

const Settings = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings page</Text>
    </View>
  );
};

export default Settings;

[mseaman26]

@alfjesus @marklawlor Oh my god thank you! You were right that the component being rendered by the screen must have a function exported that STARTS WITH A CAPITAL LETTER! otherwise, when you make a change, it will reload and take you to the root of the app

[vktrl]

In case someone has this problem with a project using Nativewind, I had this issue with nested stacks resetting on HMR. Was caused by importing the global.css file in the root layout. Not sure if it's fixed for good because and too many variables and changes involved, but it's a start. Spent half a day debugging.

[nwazuo]

This was my issue as well. Weird behavior. Thanks 🎉

[mantaspkl]

I also had const export above component that caused hmr to load initial page each time, removing it helped to fix this.

[Amiko1]

thanks bro

[demoox]

Hi

For my part the problem is that i was doing this :

❌ BAD PRACTICE ❌

import { View, Text } from 'react-native';

export default Settings = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings page</Text>
    </View>
  );
};

✅ GOOD PRACTICE ✅

import { View, Text } from 'react-native';

const Settings = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings page</Text>
    </View>
  );
};

export default Settings;

Now the modified screen remains in place without returning to the initial screen ✅