iOS Only - Flicker when i use Stack layout

[Scr3nt]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

I use expo router v2 after upgrading from expo 48 to expo 49

When I want to use multiple stack layouts, I get a flicker when I change layout. If I don't use layouts, I don't have any problems, but then I don't have a transition. (You can see the 2 cases in videos)

Minimal reproducible example

Here is my structure :

my main layout :

import { AuthProvider } from "@/src/context/auth";
import { ThemeProvider } from "@/src/context/theme";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { FontSource, useFonts } from "expo-font";
import { Slot, SplashScreen } from "expo-router";
import { useEffect } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { QueryClient, QueryClientProvider } from "react-query";

type Font = {
  [key: string]: FontSource;
};

const queryClient = new QueryClient();

SplashScreen.preventAutoHideAsync();

export default function Root() {
  const [fontsLoaded] = useFonts({
    "Inter-Black": require("../assets/fonts/Inter-Black.ttf") as Font,
    "Inter-Bold": require("../assets/fonts/Inter-Bold.ttf") as Font,
    "Inter-ExtraBold": require("../assets/fonts/Inter-ExtraBold.ttf") as Font,
    "Inter-ExtraLight": require("../assets/fonts/Inter-ExtraLight.ttf") as Font,
    "Inter-Light": require("../assets/fonts/Inter-Light.ttf") as Font,
    "Inter-Medium": require("../assets/fonts/Inter-Medium.ttf") as Font,
    "Inter-Regular": require("../assets/fonts/Inter-Regular.ttf") as Font,
    "Inter-SemiBold": require("../assets/fonts/Inter-SemiBold.ttf") as Font,
    "Inter-Thin": require("../assets/fonts/Inter-Thin.ttf") as Font,
  });

  useEffect(() => {
    if (fontsLoaded) {
      //setTimeout to prevent to see the first screen
      setTimeout(() => {
        SplashScreen.hideAsync();
      }, 1);
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <BottomSheetModalProvider>
      <SafeAreaProvider>
        <ThemeProvider>
          <AuthProvider>
            <QueryClientProvider client={queryClient}>
              <Slot />
            </QueryClientProvider>
          </AuthProvider>
        </ThemeProvider>
      </SafeAreaProvider>
    </BottomSheetModalProvider>
  );
}

my 2 others layouts :

import { Stack } from "expo-router";
import React from "react";

export default function Layout() {
  return <Stack screenOptions={{ headerShown: false }} />;
}

the videos :

https://github.com/expo/router/assets/56580186/3776aa12-0223-4eab-9318-d3d9eeea36df

https://github.com/expo/router/assets/56580186/156e8d79-32a2-435e-9f6d-9ced9b3cf611

[EvanBacon]

Duplicate https://github.com/expo/router/issues/675

[jamesheavey]

Was this resolved @Scr3nt? I am having the exact same issue. My top layout is a slot, and nested in that at a lower level I have a stack layout where I want to introduce a modal like this. When I add it, I get a white flicker when I navigate to said screens.

this is my app architecture, slot _layout in app, and stack/modal layout in app/(home)/(create-event)

[jamesheavey]

@Scr3nt I fixed it, you cant use slot with stack later on. replace your slot with this:

<Stack screenOptions={{ headerShown: false, animation: "none" }} />

works the same then