Expo router does not redirect to index.tsx by default

[filippobrigati]

Hi everyone, I'm having a problem with expo router that I can't resolve, this is my file structure

• app/
  • (tabs)
    • _layout.tsx
    • expert.tsx
    • index.tsx
    • metrics.tsx
    • settings.tsx
  • activity/
    feelings.tsx
    notes.tsx
• _layout.tsx
• _layout.tsx
• modal.tsx
• sign-in.tsx
• sign-up.tsx

My goal would be to redirect the user to the page (tabs)/index by default or after logging in, and this works correcty in development with expo-go app, but when i build the app for play store i can't be redirected to index page by default, in fact, after logging in, the splash screen appears and the redirect doesn't happen...

I tried to do a different redirect after login (activity/feelings page) and it works correctly, the problem is that i cannot reach the index page.

I'm using SDK 50 and expo router 3.4.8, this in my sign-in page (only redirect method):

const signInWithPassword = async () => {
    setIsLoading(true);

    const { data, error } = await supabase.auth.signInWithPassword({
      email: username,
      password: password,
    });

    if (error) {
      Alert.alert(error.message);
      setIsLoading(false);
    } else {
      await signIn(data.session.access_token, data.session.refresh_token);
      setIsLoading(false);
      console.log("After login, navigating to home page");
      router.replace("/");
    }
  };

and this is my app/_layout.tsx

import type { Theme } from "@react-navigation/native";
import { DarkTheme, ThemeProvider } from "@react-navigation/native";
import { Stack } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { AuthProvider } from "../context/AuthContext";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import * as SplashScreen from "expo-splash-screen";
import { useColorScheme } from "react-native";

export const unstable_settings = {
  initialRouteName: "(tabs)",
};

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function Root() {
  const colorScheme = useColorScheme();

  const DefaultTheme: Theme = {
    dark: false,
    colors: {
      primary: "rgb(0, 122, 255)",
      background: "rgb(255, 255, 255)",
      card: "rgb(255, 255, 255)",
      text: "rgb(28, 28, 30)",
      border: "rgb(216, 216, 216)",
      notification: "rgb(255, 59, 48)",
    },
  };

  SplashScreen.hideAsync();

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <AuthProvider>
        <GestureHandlerRootView style={{ flex: 1 }}>
          <SafeAreaProvider>
            <Stack>
              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
              <Stack.Screen name="sign-in" options={{ headerShown: false }} />
              <Stack.Screen name="sign-up" options={{ headerShown: false }} />
              <Stack.Screen
                name="activity/note"
                options={{ headerShown: false }}
              />
              <Stack.Screen
                name="activity/feelings"
                options={{ headerShown: false }}
              />
              <Stack.Screen name="modal" options={{ presentation: "modal" }} />
            </Stack>
          </SafeAreaProvider>
        </GestureHandlerRootView>
      </AuthProvider>
    </ThemeProvider>
  );
}

and finally this is my app/(tabs)/layout.tsx

import { useAuth } from "../../context/AuthContext";
import { useColorScheme, Text } from "react-native";

import { SimpleLineIcons } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";

export default function TabLayout() {
  const { isLoading, userToken } = useAuth();
  const colorScheme = useColorScheme();
  // You can keep the splash screen open, or render a loading screen like we do here.
  if (isLoading) {
    return <Text>Loading...</Text>;
  }

  // need to be able to access the (auth) group and sign in again.
  if (!userToken) {
    // On web, static rendering will stop here as the user is not authenticated
    // in the headless Node process that the pages are rendered in.
    return <Redirect href="/sign-in" />;
  }

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "#2f95dc",
        headerShown: false,
        tabBarShowLabel: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon(props) {
            return <AntDesign name="home" size={24} color={colorScheme === "light" ? (props.focused ? "black" : "gray") : (props.focused ? "white" : "#ced4da")} />
          }
        }}
      />
      <Tabs.Screen
        name="metrics"
        options={{
          title: "Metrics",
          tabBarIcon(props) {
            return <SimpleLineIcons name="graph" size={24} color={colorScheme === "light" ? (props.focused ? "black" : "gray") : (props.focused ? "white" : "#ced4da")} />
          }
        }}
      />
      <Tabs.Screen
        name="expert"
        options={{
          title: "Expert",
          tabBarIcon(props) {
            return <AntDesign name="staro" size={24} color={colorScheme === "light" ? (props.focused ? "black" : "gray") : (props.focused ? "white" : "#ced4da")} />
          }
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: "Impostazioni",
          tabBarIcon(props) {
            return <AntDesign name="setting" size={24} color={colorScheme === "light" ? (props.focused ? "black" : "gray") : (props.focused ? "white" : "#ced4da")} />
          },
        }}
      />
    </Tabs>
  );
}

Thanks everyone for the help!

[marklawlor]

This repo is in maintenance mode and is not actively monitored. Expo Router development has moved to https://github.com/expo/expo

If you have a question or are looking for advice on troubleshooting an issue in your application code, you can get help from our community on the forums or on Discord.

If you believe this is bug, please create an issue on the main repo https://github.com/expo/expo