_layout.tsx.ejs

import '../global.css';
import 'expo-dev-client';
import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
<% if (props.stateManagementPackage?.name === "redux") { %>
import { Provider } from 'react-redux'
import store from 'store/store'
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
<% } %>
<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
<% } %>
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
import { GestureHandlerRootView } from 'react-native-gesture-handler';
<% } %>

import { ThemeToggle } from '~/components/ThemeToggle';
import { useColorScheme, useInitialAndroidBarSync } from '~/lib/useColorScheme';
import { NAV_THEME } from '~/theme';

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export default function RootLayout() {
  useInitialAndroidBarSync();
  const { colorScheme, isDarkColorScheme } = useColorScheme();

  return (
    <>
      <StatusBar
        key={`root-status-bar-${isDarkColorScheme ? 'light' : 'dark'}`}
        style={isDarkColorScheme ? 'light' : 'dark'}
      />
      {/* WRAP YOUR APP WITH ANY ADDITIONAL PROVIDERS HERE */}
      {/* <ExampleProvider> */}
       
      <% if (props.stateManagementPackage?.name === "redux") { %>
      <Provider store={store}>
      <% } %>
       <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <BottomSheetModalProvider>
        <% } %>
        <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
        <ActionSheetProvider>
        <% } %>
          <NavThemeProvider value={NAV_THEME[colorScheme]}>
            <Stack screenOptions={SCREEN_OPTIONS}>
              <Stack.Screen name="(drawer)" options={DRAWER_OPTIONS} />
              <Stack.Screen name="modal" options={MODAL_OPTIONS} />
            </Stack>
          </NavThemeProvider>
        <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
        </ActionSheetProvider>
        <% } %>
        <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
        </BottomSheetModalProvider>
      </GestureHandlerRootView>
      <% } %>
      <% if (props.stateManagementPackage?.name === "redux") { %>
      </Provider>
      <% } %>
      {/* </ExampleProvider> */}
    </>
  );
}

const SCREEN_OPTIONS = {
  animation: 'ios', // for android
} as const;

const DRAWER_OPTIONS = {
  headerShown: false,
} as const;

const MODAL_OPTIONS = {
  presentation: 'modal',
  animation: 'fade_from_bottom', // for android
  title: 'Settings',
  headerRight: () => <ThemeToggle />,
} as const;