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

package/build/templates/packages/nativewind/components/Button.tsx.ejs

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
+interface ButtonProps extends TouchableOpacityProps {
+  title: string;
+}
+
+export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps }, ref) => {
+  return (
+    <TouchableOpacity ref={ref} {...touchableProps} className={`${styles.button} ${touchableProps.className}`}>
+      <Text className={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+});
+
+Button.displayName = 'Button';
+
+const styles = {
+  button: 'items-center bg-indigo-500 rounded-[28px] shadow-md p-4',
+  buttonText: 'text-white text-lg font-semibold text-center',
+};

package/build/templates/packages/nativewind/components/Container.tsx.ejs

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+
+interface ContainerProps {
+  children: React.ReactNode;
+}
+
+export const Container: React.FC<ContainerProps> = ({ children }) => {
+  return <View className={styles.container}>{children}</View>;
+};
+
+const styles = {
+  container: "flex flex-1 p-safe bg-white",
+};

package/build/templates/packages/nativewind/components/EditScreenInfo.tsx.ejs

@@ -0,0 +1,40 @@
+import { Text, View } from 'react-native';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+import { useTranslation } from 'react-i18next';
+<% } %>
+
+interface EditScreenInfoProps {
+  path: string;
+}
+
+export const EditScreenInfo: React.FC<EditScreenInfoProps> = ({ path }) => {
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  const { t } = useTranslation();
+  const title = t('getStarted');
+  const description = t('changeCode')
+<% } else { %>
+  const title = "Open up the code for this screen:"
+  const description = "Change any of the text, save the file, and your app will automatically update."
+<% } %>
+  return (
+    <View>
+      <View className={styles.getStartedContainer}>
+        <Text className={styles.getStartedText}>{title}</Text>
+        <View className={`${styles.codeHighlightContainer} ${styles.homeScreenFilename}`}>
+          <Text>{path}</Text>
+        </View>
+        <Text className={styles.getStartedText}>
+          {description}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = {
+  codeHighlightContainer: `rounded-md px-1`,
+  getStartedContainer: `items-center mx-12`,
+  getStartedText: `text-lg leading-6 text-center`,
+  homeScreenFilename: `my-2`,
+};

package/build/templates/packages/nativewind/components/ScreenContent.tsx.ejs

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { EditScreenInfo } from './EditScreenInfo';
+
+interface ScreenContentProps {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+}
+
+export const ScreenContent: React.FC<ScreenContentProps> = ({ title, path, children }) => {
+  return (
+    <View className={styles.container}>
+      <Text className={styles.title}>{title}</Text>
+      <View className={styles.separator} />
+      <EditScreenInfo path={path} />
+      {children}
+    </View>
+  );
+};
+
+const styles = {
+  container: `items-center flex-1 justify-center bg-white`,
+  separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
+  title: `text-xl font-bold`,
+};

package/build/templates/packages/nativewind/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/build/templates/packages/nativewind/metro.config.js

@@ -0,0 +1,7 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+// eslint-disable-next-line no-undef
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });

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

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

package/build/templates/packages/nativewind/tailwind.config.js.ejs

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    <% if (props.navigationPackage?.name === "react-navigation") { %>
+      content: ["./App.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}", "./screens/**/*.{js,ts,tsx}", "./navigation/**/*.{js,ts,tsx}"],
+    <% } else if (props.navigationPackage?.name === "expo-router") { %>
+      content: ["./app/**/*.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}"],
+    <% } else { %>
+      content: ["./App.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}"],
+    <% } %>
+    presets: [require("nativewind/preset")],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }

package/build/templates/packages/nativewindui/components/Container.tsx.ejs

@@ -0,0 +1,14 @@
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: 'white',
+  },
+});
+

package/build/templates/packages/nativewindui/components/EditScreenInfo.tsx.ejs

@@ -0,0 +1,45 @@
+import { StyleSheet, View } from 'react-native';
+
+import { Text } from '@/components/nativewindui/Text';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+import { useTranslation } from 'react-i18next';
+<% } %>
+
+export default function EditScreenInfo({ path }: { path: string }) {
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  const { t } = useTranslation();
+  const title = t('getStarted');
+  const description = t('changeCode')
+<% } else { %>
+  const title = "Open up the code for this screen:"
+  const description = "Change any of the text, save the file, and your app will automatically update."
+<% } %>
+  return (
+    <View style={styles.getStartedContainer}>
+      <Text variant="heading" className="text-center">
+        {title}
+      </Text>
+      <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
+        <Text>{path}</Text>
+      </View>
+      <Text variant="body" className="text-center">
+        {description}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  codeHighlightContainer: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+  },
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+  },
+  homeScreenFilename: {
+    marginVertical: 7,
+  },
+});

package/build/templates/packages/nativewindui/components/HeaderButton.tsx.ejs

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Pressable, StyleSheet } from 'react-native';
+
+export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void; }>(({ onPress }, ref) => {
+  return (
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <FontAwesome
+          name="info-circle"
+          size={25}
+          color="gray"
+          style={[
+            styles.headerRight,
+            {
+              opacity: pressed ? 0.5 : 1,
+            },
+          ]}
+        />
+      )}
+    </Pressable>
+  );
+});
+
+HeaderButton.displayName = 'HeaderButton';
+
+export const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15,
+  },
+});

package/build/templates/packages/nativewindui/components/ScreenContent.tsx.ejs

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Text } from '@/components/nativewindui/Text';
+
+import EditScreenInfo from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children }: ScreenContentProps) => {
+  return (
+    <View style={styles.container}>
+      <Text variant="title1" className="text-center">
+        {title}
+      </Text>
+      <View style={styles.separator} />
+      <EditScreenInfo path={path} />
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  separator: {
+    backgroundColor: '#d1d5db',
+    height: 1,
+    marginVertical: 30,
+    width: '80%',
+  },
+});

package/build/templates/packages/nativewindui/components/TabBarIcon.tsx.ejs

@@ -0,0 +1,15 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { StyleSheet } from 'react-native';
+
+export const TabBarIcon = (props: {
+  name: React.ComponentProps<typeof FontAwesome>['name'];
+  color: string;
+}) => {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+};
+
+export const styles = StyleSheet.create({
+  tabBarIcon: {
+    marginBottom: -3,
+  },
+});

package/build/templates/packages/nativewindui/components/nativewindui/Icon/Icon.ios.tsx.ejs

@@ -0,0 +1,52 @@
+import { SymbolView } from 'expo-symbols';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  materialCommunityIcon: _materialCommunityIcon,
+  materialIcon: _materialIcon,
+  sfSymbol,
+  name,
+  color,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  return (
+    <SymbolView
+      name={name ?? 'questionmark'}
+      tintColor={rgbaToHex(color ?? colors.foreground)}
+      size={size}
+      resizeMode="scaleAspectFit"
+      {...props}
+      {...sfSymbol}
+    />
+  );
+}
+
+export { Icon };
+
+// TODO: seems like the need to convert rgba to hex color is a bug in expo-symbols, accordion to the docs, it should accept a hex color, but it doesn't.
+
+function rgbaToHex(color: string): string {
+  if (!color) return 'black';
+  const rgbaRegex =
+    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)$/i;
+  const match = color.match(rgbaRegex);
+
+  if (!match) {
+    return color;
+  }
+
+  const [, rStr, gStr, bStr, aStr] = match;
+  const r = Math.min(255, parseInt(rStr));
+  const g = Math.min(255, parseInt(gStr));
+  const b = Math.min(255, parseInt(bStr));
+  const a = aStr !== undefined ? Math.round(parseFloat(aStr) * 255) : 255;
+
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}${a < 255 ? toHex(a) : ''}`;
+}

package/build/templates/packages/nativewindui/components/nativewindui/Icon/Icon.tsx.ejs

@@ -0,0 +1,58 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import {
+  SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS,
+  SF_SYMBOLS_TO_MATERIAL_ICONS,
+} from 'rn-icon-mapper';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  name,
+  materialCommunityIcon,
+  materialIcon,
+  sfSymbol: _sfSymbol,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  const defaultColor = colors.foreground;
+
+  if (materialCommunityIcon) {
+    return (
+      <MaterialCommunityIcons
+        size={size}
+        color={defaultColor}
+        {...props}
+        {...materialCommunityIcon}
+      />
+    );
+  }
+  if (materialIcon) {
+    return <MaterialIcons size={size} color={defaultColor} {...props} {...materialIcon} />;
+  }
+  const materialCommunityIconName =
+    SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS[
+      name as keyof typeof SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS
+    ];
+  if (materialCommunityIconName) {
+    return (
+      <MaterialCommunityIcons
+        name={materialCommunityIconName}
+        size={size}
+        color={defaultColor}
+        {...props}
+      />
+    );
+  }
+  const materialIconName =
+    SF_SYMBOLS_TO_MATERIAL_ICONS[name as keyof typeof SF_SYMBOLS_TO_MATERIAL_ICONS];
+  if (materialIconName) {
+    return <MaterialIcons name={materialIconName} size={size} color={defaultColor} {...props} />;
+  }
+  return <MaterialCommunityIcons name="help" size={size} color={defaultColor} {...props} />;
+}
+
+export { Icon };

package/build/templates/packages/nativewindui/components/nativewindui/Icon/index.ts.ejs

@@ -0,0 +1,16 @@
+import { cssInterop } from 'nativewind';
+
+import { Icon } from './Icon';
+
+cssInterop(Icon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      color: 'color',
+      height: 'size',
+      width: 'size',
+    },
+  },
+});
+
+export { Icon };

package/build/templates/packages/nativewindui/components/nativewindui/Icon/types.ts.ejs

@@ -0,0 +1,18 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import type MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import type { SymbolViewProps } from 'expo-symbols';
+import type { IconMapper } from 'rn-icon-mapper';
+
+type MaterialCommunityIconsProps = React.ComponentProps<typeof MaterialCommunityIcons>;
+type MaterialIconsProps = React.ComponentProps<typeof MaterialIcons>;
+
+type Style = SymbolViewProps['style'] &
+  MaterialIconsProps['style'] &
+  MaterialCommunityIconsProps['style'];
+
+type IconProps = IconMapper<SymbolViewProps, MaterialIconsProps, MaterialCommunityIconsProps> & {
+  style?: Style;
+  className?: string;
+};
+
+export type { IconProps };

package/build/templates/packages/nativewindui/components/nativewindui/ThemeToggle.tsx.ejs

@@ -0,0 +1,33 @@
+import { Pressable, View } from 'react-native';
+import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
+
+import { Icon } from '@/components/nativewindui/Icon';
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { COLORS } from '@/theme/colors';
+
+export function ThemeToggle() {
+  const { colorScheme, toggleColorScheme } = useColorScheme();
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <Animated.View
+        className="items-center justify-center"
+        key={`toggle-${colorScheme}`}
+        entering={ZoomInRotate}>
+        <Pressable onPress={toggleColorScheme} className="opacity-80">
+          {colorScheme === 'dark'
+            ? ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon name="moon.stars" color={COLORS.white} />
+                </View>
+              )
+            : ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon name="sun.min" color={COLORS.black} />
+                </View>
+              )}
+        </Pressable>
+      </Animated.View>
+    </LayoutAnimationConfig>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { Tabs } from 'expo-router';
+
+import { TabBarIcon } from '@/components/TabBarIcon';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: 'black',
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

package/build/templates/packages/nativewindui/drawer/app/(drawer)/(tabs)/index.tsx.ejs

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router';
+
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab One' }} />
+      <Container>
+        <ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Tab One" />
+      </Container>
+    </>
+  );
+}

package/build/templates/packages/nativewindui/drawer/app/(drawer)/(tabs)/two.tsx.ejs

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router';
+
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab Two' }} />
+      <Container>
+        <ScreenContent path="app/(drawer)/(tabs)/two.tsx" title="Tab Two" />
+      </Container>
+    </>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { Link } from 'expo-router';
+import { Drawer } from 'expo-router/drawer';
+
+import { HeaderButton } from '../../components/HeaderButton';
+
+const DrawerLayout = () => (
+  <Drawer>
+    <Drawer.Screen
+      name="index"
+      options={{
+        headerTitle: 'Home',
+        drawerLabel: 'Home',
+        drawerIcon: ({ size, color }) => <Ionicons name="home-outline" size={size} color={color} />,
+      }}
+    />
+    <Drawer.Screen
+      name="(tabs)"
+      options={{
+        headerTitle: 'Tabs',
+        drawerLabel: 'Tabs',
+        drawerIcon: ({ size, color }) => (
+          <MaterialIcons name="border-bottom" size={size} color={color} />
+        ),
+        headerRight: () => (
+          <Link href="/modal" asChild>
+            <HeaderButton />
+          </Link>
+        ),
+      }}
+    />
+  </Drawer>
+);
+
+export default DrawerLayout;