@mr.dj2u/create-expo-stack 2.21.3-mrdj.0

package/build/templates/packages/nativewindui/drawer/app/_layout.tsx.ejs

@@ -0,0 +1,75 @@
+import '../global.css';
+import 'expo-dev-client';
+import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+<% 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.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>
+      <% } %>
+      {/* </ExampleProvider> */}
+    </>
+  );
+}
+
+const SCREEN_OPTIONS = {
+  animation: 'ios_from_right', // 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;

package/build/templates/packages/nativewindui/drawer/app/modal.tsx.ejs

@@ -0,0 +1,33 @@
+import { Icon } from '@roninoss/icons';
+import { StatusBar } from 'expo-status-bar';
+import { Linking, Platform, View } from 'react-native';
+
+import { Text } from '@/components/nativewindui/Text';
+import { useColorScheme } from '@/lib/useColorScheme';
+
+export default function ModalScreen() {
+  const { colors, colorScheme } = useColorScheme();
+  return (
+    <>
+      <StatusBar
+        style={Platform.OS === 'ios' ? 'light' : colorScheme === 'dark' ? 'light' : 'dark'}
+      />
+      <View className="flex-1 items-center justify-center gap-1 px-12">
+        <Icon name="file-plus-outline" size={42} color={colors.grey} />
+        <Text variant="title3" className="pb-1 text-center font-semibold">
+          NativewindUI
+        </Text>
+        <Text color="tertiary" variant="subhead" className="pb-4 text-center">
+          You can install any of the free components from the{' '}
+          <Text
+            onPress={() => Linking.openURL('https://nativewindui.com')}
+            variant="subhead"
+            className="text-primary">
+            NativewindUI
+          </Text>
+          {' website.'}
+        </Text>
+      </View>
+    </>
+  );
+}

package/build/templates/packages/nativewindui/global.css.ejs

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 242 242 247;
+    --foreground: 0 0 0;
+    --card: 255 255 255;
+    --card-foreground: 8 28 30;
+    --popover: 230 230 235;
+    --popover-foreground: 0 0 0;
+    --primary: 0 123 254;
+    --primary-foreground: 255 255 255;
+    --secondary: 45 175 231;
+    --secondary-foreground: 255 255 255;
+    --muted: 175 176 180;
+    --muted-foreground: 142 142 147;
+    --accent: 255 40 84;
+    --accent-foreground: 255 255 255;
+    --destructive: 255 56 43;
+    --destructive-foreground: 255 255 255;
+    --border: 230 230 235;
+    --input: 210 210 215;
+    --ring: 230 230 235;
+
+    --android-background: 249 249 255;
+    --android-foreground: 0 0 0;
+    --android-card: 255 255 255;
+    --android-card-foreground: 24 28 35;
+    --android-popover: 215 217 228;
+    --android-popover-foreground: 0 0 0;
+    --android-primary: 0 112 233;
+    --android-primary-foreground: 255 255 255;
+    --android-secondary: 176 201 255;
+    --android-secondary-foreground: 20 55 108;
+    --android-muted: 193 198 215;
+    --android-muted-foreground: 65 71 84;
+    --android-accent: 169 73 204;
+    --android-accent-foreground: 255 255 255;
+    --android-destructive: 186 26 26;
+    --android-destructive-foreground: 255 255 255;
+    --android-border: 215 217 228;
+    --android-input: 210 210 215;
+    --android-ring: 215 217 228;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 0 0 0;
+      --foreground: 255 255 255;
+      --card: 21 21 24;
+      --card-foreground: 255 255 255;
+      --popover: 40 40 42;
+      --popover-foreground: 255 255 255;
+      --primary: 3 133 255;
+      --primary-foreground: 255 255 255;
+      --secondary: 100 211 254;
+      --secondary-foreground: 255 255 255;
+      --muted: 70 70 73;
+      --muted-foreground: 142 142 147;
+      --accent: 255 52 95;
+      --accent-foreground: 255 255 255;
+      --destructive: 254 67 54;
+      --destructive-foreground: 255 255 255;
+      --border: 40 40 42;
+      --input: 55 55 57;
+      --ring: 40 40 42;
+
+      --android-background: 0 0 0;
+      --android-foreground: 255 255 255;
+      --android-card: 16 19 27;
+      --android-card-foreground: 224 226 237;
+      --android-popover: 39 42 50;
+      --android-popover-foreground: 224 226 237;
+      --android-primary: 3 133 255;
+      --android-primary-foreground: 255 255 255;
+      --android-secondary: 28 60 114;
+      --android-secondary-foreground: 189 209 255;
+      --android-muted: 216 226 255;
+      --android-muted-foreground: 139 144 160;
+      --android-accent: 83 0 111;
+      --android-accent-foreground: 238 177 255;
+      --android-destructive: 147 0 10;
+      --android-destructive-foreground: 255 255 255;
+      --android-border: 39 42 50;
+      --android-input: 55 55 57;
+      --android-ring: 39 42 50;
+    }
+  }
+}

package/build/templates/packages/nativewindui/lib/cn.ts.ejs

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/build/templates/packages/nativewindui/lib/useColorScheme.tsx.ejs

@@ -0,0 +1,21 @@
+import { useColorScheme as useNativewindColorScheme } from 'nativewind';
+
+import { COLORS } from '@/theme/colors';
+
+function useColorScheme() {
+  const { colorScheme, setColorScheme } = useNativewindColorScheme();
+
+  function toggleColorScheme() {
+    return setColorScheme(colorScheme === 'light' ? 'dark' : 'light');
+  }
+
+  return {
+    colorScheme: colorScheme ?? 'light',
+    isDarkColorScheme: colorScheme === 'dark',
+    setColorScheme,
+    toggleColorScheme,
+    colors: COLORS[colorScheme ?? 'light'],
+  };
+}
+
+export { useColorScheme };

package/build/templates/packages/nativewindui/nativewind-env.d.ts.ejs

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/build/templates/packages/nativewindui/stack/app/+html.tsx.ejs

@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/* 
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/* 
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

package/build/templates/packages/nativewindui/stack/app/+not-found.tsx.ejs

@@ -0,0 +1,18 @@
+import { Link, Stack } from 'expo-router';
+import { View } from 'react-native';
+import { Text } from '@/components/nativewindui/Text';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View className='flex-1 items-center justify-center p-5 bg-background'>
+        <Text variant='largeTitle'>{"This screen doesn't exist."}</Text>
+
+        <Link href='/' className='m-4 py-4'>
+          <Text>Go to home screen!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}

package/build/templates/packages/nativewindui/stack/app/_layout.tsx.ejs

@@ -0,0 +1,78 @@
+import '@/global.css';
+
+<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+<% } %>
+import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
+import * as Device from 'expo-device';
+import { Link, Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { Platform, Pressable } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { Icon } from '@/components/nativewindui/Icon';
+import { ThemeToggle } from '@/components/nativewindui/ThemeToggle';
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { NAV_THEME } from '@/theme';
+
+export {
+  // Catch any errors thrown by the Layout component.
+  ErrorBoundary,
+} from 'expo-router';
+
+const isIos26 = Platform.select({ default: false, ios: Device.osVersion?.startsWith('26.' )});
+
+export default function RootLayout() {
+  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> */}
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+        <ActionSheetProvider>
+        <% } %>
+        <NavThemeProvider value={NAV_THEME[colorScheme]}>
+          <Stack>
+            <Stack.Screen name="index" options={INDEX_OPTIONS} />
+            <Stack.Screen name="modal" options={MODAL_OPTIONS} />
+          </Stack>
+        </NavThemeProvider>
+        <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
+        </ActionSheetProvider>
+        <% } %>
+      </GestureHandlerRootView>
+      {/* </ExampleProvider> */}
+    </>
+  );
+}
+
+const INDEX_OPTIONS = {
+  headerLargeTitle: true,
+  headerTransparent: isIos26,
+  title: 'NativewindUI',
+  headerRight: () => <SettingsIcon />,
+} as const;
+
+function SettingsIcon() {
+  return (
+    <Link href="/modal" asChild>
+      <Pressable className={cn('opacity-80 active:opacity-50', isIos26 && 'px-1.5')}>
+        <Icon name='gearshape' className='text-foreground' />
+      </Pressable>
+    </Link>
+  );
+}
+
+const MODAL_OPTIONS = {
+  presentation: 'modal',
+  animation: 'fade_from_bottom', // for android
+  title: 'Settings',
+  headerRight: () => <ThemeToggle />,
+} as const;