Description
Minimal reproducible example
https://github.com/expo/expo/blob/main/templates/expo-template-tabs
Which package manager are you using? (Yarn is recommended)
yarn
If the issue is web-related, please select the bundler (web.bundler in the app.json)
None
Summary
I understand that async routes are experimental, but since I couldn't find any report about this issue, I'm suspecting others might run into the warning and wonder where it comes from, so hopefully this will make it more discoverable and also help to improve the feature for native development.
Using https://docs.expo.dev/router/reference/async-routes/ with [email protected], [email protected] with [email protected] and the following config:
[
"expo-router",
{
asyncRoutes: {
web: true,
ios: true,
default: "development",
},
},
],
But with a minimal stack _layout.tsx instead:
import { Stack } from 'expo-router/stack';
export default function RootLayout () {
return <Stack/>
};
Yields the following warning in the react native devtools pointing to listener | @ | NativeStackView.native.js:270:
Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
in SceneView (created by NativeStackView)
in RNSScreenStack (created by ScreenStack)
in Unknown (created by ScreenStack)
in ScreenStack (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator
in Unknown (created by RootLayout)
in RootLayout (created by Route((root)))
in Suspense (created by Route((root)))
in Route (created by Route((root)))
in Route((root)) (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SlotNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by SlotNavigator)
in SlotNavigator (created by Slot)
in Slot (created by AppLayoutNav)
in ThemeProvider (created by AppLayoutNav)
in PortalProviderComponent (created by TamaguiProvider)
in Unknown (created by ThemeProvider)
in ThemeProvider (created by TamaguiProvider)
in Provider (created by TamaguiProvider)
in UnmountedClassName (created by TamaguiProvider)
in TamaguiProvider (created by TamaguiProvider)
in TamaguiProvider (created by AppLayoutNav)
in AppLayoutNav (created by App)
in App (created by Route())
in Suspense (created by Route())
in Route (created by Route())
in Route() (created by ContextNavigator)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by wrapper)
in wrapper (created by ContextNavigator)
in ThemeProvider
in EnsureSingleNavigator
in BaseNavigationContainer
in NavigationContainerInner (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (created by withDevTools(ErrorOverlay))
in withDevTools(ErrorOverlay)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
| anonymous | @ | console.js:614
-- | -- | -- | --
| reactConsoleErrorHandler | @ | ExceptionsManager.js:182
| overrideMethod | @ | backend.js:17784
| anonymous | @ | setUpDeveloperTools.js:62
| registerError | @ | LogBox.js:240
| anonymous | @ | LogBox.js:79
| printWarning | @ | ReactFabric-dev.js:97
| error | @ | ReactFabric-dev.js:71
| warnAboutUpdateOnNotYetMountedFiberInDEV | @ | ReactFabric-dev.js:24925
| detectUpdateOnUnmountedFiber | @ | ReactFabric-dev.js:5732
| getRootForUpdatedFiber | @ | ReactFabric-dev.js:5716
| enqueueConcurrentHookUpdate | @ | ReactFabric-dev.js:5588
| dispatchSetState | @ | ReactFabric-dev.js:11684
| listener | @ | NativeStackView.native.js:270
| anonymous | @ | AnimatedEvent.js:254
| anonymous | @ | AnimatedEvent.js:254
| anonymous | @ | AnimatedEvent.js:209
| executeDispatch | @ | ReactFabric-dev.js:167
| executeDispatchesInOrder | @ | ReactFabric-dev.js:198
| executeDispatchesAndRelease | @ | ReactFabric-dev.js:2819
| executeDispatchesAndReleaseTopLevel | @ | ReactFabric-dev.js:2828
| forEachAccumulated | @ | ReactFabric-dev.js:984
| runEventsInBatch | @ | ReactFabric-dev.js:2844
| runExtractedPluginEventsInBatch | @ | ReactFabric-dev.js:2909
| anonymous | @ | ReactFabric-dev.js:2956
| batchedUpdates | @ | ReactFabric-dev.js:22998
| batchedUpdates$1 | @ | ReactFabric-dev.js:2792
| dispatchEvent | @ | ReactFabric-dev.js:2925
| Show less
This points to this setHeaderHeight(headerHeight) code in a listener.
Toggling async to false for ios makes the warning dissapear.
Environment
> bunx expo-env-info
expo-env-info 1.2.2 environment info:
System:
OS: macOS 15.0.1
Shell: 5.9 - /nix/store/qzk1vripmj8mrk1mizrr3gmls1xh3399-zsh-5.9/bin/zsh
Binaries:
Node: 22.12.0 - /nix/store/ygk01vha6k5zxgn9rsxi3k6cm2kbnwsc-nodejs-22.12.0/bin/node
Yarn: 1.22.22 - /nix/store/mmfij7f7gmdwj7s2w37papznjbz68y87-yarn-1.22.22/bin/yarn
npm: 10.9.0 - /nix/store/ygk01vha6k5zxgn9rsxi3k6cm2kbnwsc-nodejs-22.12.0/bin/npm
Watchman: 2025.02.17.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.16.2 - /nix/store/1bba5vkmcls2flkplhgw8ynymd7b4yv2-cocoapods-1.16.2/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 24.1, iOS 18.1, macOS 15.1, tvOS 18.1, visionOS 2.1, watchOS 11.1
IDEs:
Xcode: 16.1/16B40 - /usr/bin/xcodebuild
Expo Workflow: managed