Now, I want to protect (auth), (waitlist), (tabs) and other routes.
(waitlist) should be my first route when the user opens the application and only when he passes (waitlist) he can go to (auth) and also as soon as he passes (auth) he can go to (tabs)
How to do this in Expo Router
export const unstable_settings = {
// Ensure any route can link back to `/`
initialRouteName: "(waitlist)",
};
SplashScreen.preventAutoHideAsync();
export default function App() {
// const [appReady, setAppReady] = useState(false);
// const [splashAnimationFinished, setSplashAnimationFinished] = useState(false);
const [fontsLoaded, error] = useFonts({
"Manrope-Bold": require("../../assets/fonts/Manrope-Bold.ttf"),
"Manrope-ExtraBold": require("../../assets/fonts/Manrope-ExtraBold.ttf"),
"Manrope-ExtraLight": require("../../assets/fonts/Manrope-ExtraLight.ttf"),
"Manrope-Light": require("../../assets/fonts/Manrope-Light.ttf"),
"Manrope-SemiBold": require("../../assets/fonts/Manrope-SemiBold.ttf"),
"Manrope-Medium": require("../../assets/fonts/Manrope-Medium.ttf"),
"Manrope-Regular": require("../../assets/fonts/Manrope-Regular.ttf"),
});
OneSignal.Debug.setLogLevel(LogLevel.Verbose);
OneSignal.initialize("92293166-703c-43af-a644-0a0ba283ad60");
// Also need enable notifications to complete OneSignal setup
OneSignal.Notifications.requestPermission(true);
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded || error) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded, error]);
if (!fontsLoaded && !error) {
return null;
}
return (
<GestureHandlerRootView>
<BottomSheetModalProvider>
<Animated.View
style={{ flex: 1 }}
entering={FadeIn}
onLayout={onLayoutRootView}
>
<Stack screenOptions={{ animation: "fade" }}>
<Stack.Screen
name="(waitlist)"
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="(auth)"
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="(tabs)"
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="product"
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="products"
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="size-guide"
options={{
headerShown: true,
headerShadowVisible: false,
title: "Size Guide",
headerTitleStyle: {
fontSize: 18,
fontFamily: "Manrope-Medium",
color: "#061023",
},
headerTitleAlign: "center",
headerLeft: () => <ChevronLeftButton />,
headerRight: () => <CartButton />,
}}
/>
<Stack.Screen
name="filter"
options={{
headerShown: true,
headerShadowVisible: false,
title: "Filter",
headerTitleStyle: {
fontSize: 18,
fontFamily: "Manrope-Medium",
color: "#061023",
},
headerTitleAlign: "center",
headerLeft: () => <CloseButton />,
}}
/>
<Stack.Screen
name="cart"
options={{
headerShown: true,
headerShadowVisible: false,
title: "",
headerTitleStyle: {
fontSize: 18,
fontFamily: "Manrope-Medium",
color: "#061023",
},
headerTitleAlign: "center",
headerLeft: () => <CloseButton />,
}}
/>
<Stack.Screen
name="checkout"
options={{
headerShown: true,
headerShadowVisible: false,
title: "Checkout",
headerTitleStyle: {
fontSize: 18,
fontFamily: "Manrope-Medium",
color: "#061023",
},
headerTitleAlign: "center",
headerLeft: () => <ChevronLeftButton />,
}}
/>
<Stack.Screen
name="add-address"
options={{
headerShown: true,
headerShadowVisible: false,
title: "Delivery address",
headerTitleStyle: {
fontSize: 18,
fontFamily: "Manrope-Medium",
color: "#061023",
},
headerTitleAlign: "center",
headerLeft: () => <ChevronLeftButton />,
}}
/>
<Stack.Screen
name="saved-addresses"
options={{
headerShown: true,
headerShadowVisible: false,
title: "Delivery address",
headerTitleStyle: {
fontSize: 18,
fontFamily: "Manrope-Medium",
color: "#061023",
},
headerTitleAlign: "center",
headerLeft: () => <ChevronLeftButton />,
}}
/>
</Stack>
<StatusBar style="dark" />
</Animated.View>
</BottomSheetModalProvider>
</GestureHandlerRootView>
);
}
I tried protecting the routes just like protecting in bare react native , conditional protection, but in expo router it is not doing the job, how can I in expo router protect the routes, I have tried reading the expo docs but I couldn’t understand how to do it
This is how my files are structured
Abanoub Adel is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.