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.

[badddams]

Same thing happens to me, is this just expected behaviour during development?

[oliseonwu]

As long as you are not editing a _layout file, it should not behave like that. If it's happening to you, the problem is likely because one of your screens function name(i means e.g Login.js the main function in Login.js) starts with a small letter. The name must always start with a capital letter.

[abhi9dev]

Damm... wasted hours trying to figure out this error. I reverted all my git commits just for this thinking any change made by me must have caused the issue.

[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.

[Zakisb]

Thanks ! i was using react query function outside the main component and everytime there was an update it went back to the initial screen. now it's fixed

[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;

[MinhDuHung]

you are a super hero

[oliseonwu]

Thank you bruh..

[jony89]

Thanks.

Also worth to note that if you are exporting the component with export default () => .. then give your component a name and export it as a default :

const MyComp = () => {..

export default MyComp

[sagarkawad]

and finally i surrended myself in the arms of a saviour...

[mojoblanco]

Muchas gracias!!!

[MoFerhat]

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 ✅

[Beki78]

Thank You! I was struggling a lot there is noting relating to this in their documentation. it worked for me you will notice it when you change it to uppercase

[alexmlong]

Interesting! That solved it for me, thanks for sharing! 🙏 I'm curious though, what if you don't want to use default? Like I have export const SomeComponent = () ... and that causes the same issue. Even if I move the export to the bottom like export {SomeComponent} that doesn't fix it.

[luffy-taro]

This is the opposite of what @marklawlor said in this comment

#455 (reply in thread)

[frankfuu]

I'm also having the same issue where making change to a file such as mystyles.ts being only used in 1 component like articledetail.tsx will cause the enter app to reload.

I've tried everything from playing around with the way styles are being export, using different function syntax, capitalisation, folder placement etc, it will just force a full reload and it is sending me insane haha

I tested the same functionality with @react-navigation/native and it works flawlessly so it's probably something to do with expo-router

[szmazhr]

Here is my finding after spending hours.
if your components are in lower case it will send you back to initial screen. Using Pascal for naming Components will fix the issue. Basically first character of the component should be in Upper case.

so instead of using

const home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  )
}
export default home

use this

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  )
}
export default Home

let me know if this works for you too.

[MoFerhat]

it's just a duplication of the answers above

[abdoMous]

This resolves my issue, thanks 🙏

[ArbajAnsari19]

I did this and it works :

1. default export function to arrow function and
2. changed the file name to Capital letter ( Home.tsx)
3. file name capital and same as file.tsx name

[ZMensRain]

I had this problem too, the problem I found was that my arrow function's name didn't start with a capital letter.

[marxlow]

Hey all, I had the same problem and in my case I managed to fix it by making sure sibling files are not importing from one another, hope this is helpful!

Before (WITH BUG)

// (Folder structure)
---
/(app)
  /(some_page)
     component_A.tsx
     component_B.tsx

// (Code in each File)
---
// component_A.tsx
export const SomeFunc = () =>  {...};

// component_B.tsx
import { someFunc } from './component_A'

After (FIXED)

// (Folder structure)
---
/(app)
  /(some_page)
     component_A.tsx
     component_B.tsx
  /utils
    someUtil.ts

// (Code in each file)
---
// component_A.tsx
import { someUtil } from '@/utils/someUtil'

// component_B.tsx
import { someUtil } from '@/utils/someUtil'

• "expo-router": "~3.5.23"
• "expo": "~51.0.28"

[ConnorLanglois]

Also ran into this when re-exporting an ErrorBoundary like:

export { ErrorBoundary } from '../../ErrorBoundary'; // (WRONG! THIS CAUSES THE BUG)

To fix it, I had to first:

import { ErrorBoundary as ErrorBoundaryBase } from '../../ErrorBoundary';

and then

export const ErrorBoundary = ErrorBoundaryBase;

[valtism]

I had this issue and the root issue for me was exporting an object inside a route file (in the app folder) and outside of the component.

I was exporting a graphql query and because it has a different identity each time, it triggers a full refresh. Removing all exported objects fixed it for me.

[JamTheDev]

Hi! I also have noticed that not using an arrow function export default Screen() ... causes this weird bug. If you're still having this issue despite all of the fixes above, try converting your exported screen to an arrow function.

I initially thought this was because of a library i was using (NativeWind v4) but suprisingly, i saw a pattern here in the solutions. I hope this helps!

[Streudal]

I ran into this issue as well and for me the behavior is very inconsistent.

However, I noticed that if the <Stack.Screen /> component was used within the route that it would do it more consistently but it took a minute for it to trigger this by updating styles or other UI changes. Switching it to define things statically in the _layout or using the navigation.setOptions(...) method seemed to resolve it but I don't trust that this fully resolves the problem.

I am using NativeWind v4 so it could potentially be a combination of using Stack.Screen /> and the NativeWind styling in the same file (this is when I could get it to somewhat consistently break).