create-better-t-stack/apps/cli/templates/frontend/native/unistyles/app/_layout.tsx.hbs

{{#if (includes examples "ai")}}
import "@/polyfills";
{{/if}}
{{#if (eq api "trpc")}}
import { queryClient } from "@/utils/trpc";
{{/if}}
{{#if (eq api "orpc")}}
import { queryClient } from "@/utils/orpc";
{{/if}}
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
{{#if (eq auth "clerk")}}
import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { tokenCache } from "@clerk/clerk-expo/token-cache";
{{/if}}
{{else}}
  {{#unless (eq api "none")}}
import { QueryClientProvider } from "@tanstack/react-query";
  {{/unless}}
{{/if}}
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { useUnistyles } from "react-native-unistyles";
import { StatusBar } from "expo-status-bar";

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

{{#if (eq backend "convex")}}
const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL || "", {
  unsavedChangesWarning: false,
});
{{/if}}

export default function RootLayout() {
  const { theme } = useUnistyles();

  return (
    {{#if (eq backend "convex")}}
    {{#if (eq auth "clerk")}}
    <ClerkProvider
      tokenCache={tokenCache}
      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
    >
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        <GestureHandlerRootView style=\{{ flex: 1 }}>
          <Stack
            screenOptions=\{{
              headerStyle: {
                backgroundColor: theme.colors.background,
              },
              headerTitleStyle: {
                color: theme.colors.foreground,
              },
              headerTintColor: theme.colors.foreground,
            }}
          >
            <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
            <Stack.Screen name="(auth)" options=\{{ headerShown: false }} />
            <Stack.Screen
              name="modal"
              options=\{{ title: "Modal", presentation: "modal" }}
            />
          </Stack>
        </GestureHandlerRootView>
      </ConvexProviderWithClerk>
    </ClerkProvider>
    {{else}}
    <ConvexProvider client={convex}>
      <GestureHandlerRootView style=\{{ flex: 1 }}>
        <Stack
          screenOptions=\{{
            headerStyle: {
              backgroundColor: theme.colors.background,
            },
            headerTitleStyle: {
              color: theme.colors.foreground,
            },
            headerTintColor: theme.colors.foreground,
          }}
        >
          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
          <Stack.Screen
            name="modal"
            options=\{{ title: "Modal", presentation: "modal" }}
          />
        </Stack>
      </GestureHandlerRootView>
    </ConvexProvider>
    {{/if}}
    {{else}}
      {{#unless (eq api "none")}}
    <QueryClientProvider client={queryClient}>
      <GestureHandlerRootView style=\{{ flex: 1 }}>
        <Stack
          screenOptions=\{{
            headerStyle: {
              backgroundColor: theme.colors.background,
            },
            headerTitleStyle: {
              color: theme.colors.foreground,
            },
            headerTintColor: theme.colors.foreground,
          }}
        >
          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
          <Stack.Screen
            name="modal"
            options=\{{ title: "Modal", presentation: "modal" }}
          />
        </Stack>
      </GestureHandlerRootView>
    </QueryClientProvider>
      {{else}}
      <GestureHandlerRootView style=\{{ flex: 1 }}>
        <Stack
          screenOptions=\{{
            headerStyle: {
              backgroundColor: theme.colors.background,
            },
            headerTitleStyle: {
              color: theme.colors.foreground,
            },
            headerTintColor: theme.colors.foreground,
          }}
        >
          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
          <Stack.Screen
            name="modal"
            options=\{{ title: "Modal", presentation: "modal" }}
          />
        </Stack>
      </GestureHandlerRootView>
      {{/unless}}
    {{/if}}
  );
}