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

package/build/templates/packages/react-navigation/navigation/tab-navigator.tsx.ejs

@@ -0,0 +1,38 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { HeaderButton } from '../components/HeaderButton';
+import { TabBarIcon } from '../components/TabBarIcon';
+import One from '../screens/one';
+import Two from '../screens/two';
+
+const Tab = createBottomTabNavigator({
+  screenOptions: function ScreenOptions() {
+    return {
+      <% if (props.stylingPackage?.name !== "unistyles") { %>
+        tabBarActiveTintColor: 'black',
+      <% } %>
+      <% if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
+        headerShown: false,
+      <% } %>
+    }
+  },
+  screens: {
+    One: {
+      screen: One,
+      options: ({ navigation }) => ({
+        title: 'Tab One',
+        tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        headerRight: () => <HeaderButton onPress={() => navigation.navigate('Modal')} />,
+      })
+    },
+    Two: {
+      screen: Two,
+      options: {
+        title: 'Tab Two',
+        tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+      }
+    },
+  }
+});
+
+export default Tab;
+

package/build/templates/packages/react-navigation/screens/details.tsx.ejs

@@ -0,0 +1,41 @@
+import type { StaticScreenProps } from '@react-navigation/native';
+import { ScreenContent } from 'components/ScreenContent';
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+<% } else {%>
+import { StyleSheet, View } from 'react-native';
+<% } %>
+
+type Props = StaticScreenProps<{
+  name: string;
+}>;
+
+export default function Details({ route }: Props) {
+  return (
+    <View style={styles.container}>
+      <ScreenContent
+        path="screens/details.tsx"
+        title={`Showing details for user ${route.params?.name}`}
+      />
+    </View>
+  );
+}
+
+<% if (props.stylingPackage?.name === "unistyles") { %>
+export const styles = StyleSheet.create((theme, rt) => ({
+    container: {
+        flex: 1,
+        padding: 24,
+        backgroundColor: theme.colors.background,
+        paddingBottom: rt.insets.bottom,
+    },
+}));
+<% } else { %>
+export const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 24,
+    },
+});
+<% } %>

package/build/templates/packages/react-navigation/screens/home.tsx.ejs

@@ -0,0 +1,5 @@
+import { ScreenContent } from 'components/ScreenContent';
+
+export default function Home() {
+  return <ScreenContent path="screens/home.tsx" title="Home" />;
+}

package/build/templates/packages/react-navigation/screens/modal.tsx.ejs

@@ -0,0 +1,20 @@
+import { ScreenContent } from 'components/ScreenContent';
+import { StatusBar } from 'expo-status-bar';
+import { Platform } from 'react-native';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
+<% } %>
+
+export default function Modal() {
+  return (
+    <>
+      <ScreenContent path="screens/modal.tsx" title="Modal">
+      <% if (props.internalizationPackage?.name === "i18next") { %>
+        <InternalizationExample />
+      <% } %>
+      </ScreenContent>
+      <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+    </>
+  );
+}

package/build/templates/packages/react-navigation/screens/one.tsx.ejs

@@ -0,0 +1,5 @@
+import { ScreenContent } from 'components/ScreenContent';
+
+export default function TabOneScreen() {
+  return <ScreenContent path="screens/one.tsx" title="Tab One" />;
+}

package/build/templates/packages/react-navigation/screens/overview.tsx.ejs

@@ -0,0 +1,54 @@
+import { useNavigation } from '@react-navigation/native';
+import { ScreenContent } from 'components/ScreenContent';
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+<% } else {%>
+import { StyleSheet, View } from 'react-native';
+<% } %>
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+  import { InternalizationExample } from 'components/InternalizationExample';
+<% } %>
+
+import { Button } from '../components/Button';
+
+export default function Overview() {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <ScreenContent path="screens/overview.tsx" title="Overview">
+      <% if (props.internalizationPackage?.name === "i18next") { %>
+        <InternalizationExample />
+      <% } %>
+      </ScreenContent>
+      <Button
+        onPress={() =>
+          navigation.navigate('Details', {
+            name: 'Dan',
+          })
+        }
+        title="Show Details"
+      />
+    </View>
+  );
+}
+
+<% if (props.stylingPackage?.name === "unistyles") { %>
+export const styles = StyleSheet.create((theme, rt) => ({
+    container: {
+        flex: 1,
+        padding: 24,
+        backgroundColor: theme.colors.background,
+        paddingBottom: rt.insets.bottom,
+    },
+}));
+<% } else { %>
+export const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 24,
+    },
+});
+<% } %>

package/build/templates/packages/react-navigation/screens/two.tsx.ejs

@@ -0,0 +1,5 @@
+import { ScreenContent } from 'components/ScreenContent';
+
+export default function TabTwoScreen() {
+  return <ScreenContent path="screens/two.tsx" title="Tab Two" />;
+}

package/build/templates/packages/restyle/components/BackButton.tsx.ejs

@@ -0,0 +1,19 @@
+import { Pressable } from 'react-native';
+import { createBox, createText } from '@shopify/restyle';
+
+import type { Theme } from '../theme';
+
+const Box = createBox<Theme>();
+const Text = createText<Theme>();
+
+export const BackButton = ({ onPress }: { onPress: () => void }) => {
+  return (
+    <Pressable onPress={onPress}>
+      <Box flexDirection="row" alignItems="center" paddingLeft="lg">
+        <Text variant="body" color="primary">
+          {'<'} Back
+        </Text>
+      </Box>
+    </Pressable>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { Pressable, View } from 'react-native';
+import { createBox, createText } from '@shopify/restyle';
+
+import type { Theme } from '../theme';
+
+const Box = createBox<Theme>();
+const Text = createText<Theme>();
+
+type ButtonProps = {
+  title?: string;
+  onPress?: () => void;
+};
+
+export const Button = forwardRef<View, ButtonProps>(({ title, onPress }, ref) => {
+  return (
+    <Pressable ref={ref} onPress={onPress}>
+      <Box
+        padding="md"
+        borderRadius={24}
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor="primary">
+        <Text variant="body" color="background">
+          {title}
+        </Text>
+      </Box>
+    </Pressable>
+  );
+});
+
+Button.displayName = 'Button';

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

@@ -0,0 +1,16 @@
+import { SafeAreaView } from 'react-native';
+import { createBox } from '@shopify/restyle';
+
+import type { Theme } from '../theme';
+
+const Box = createBox<Theme>();
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Box flex={1} padding="lg" backgroundColor="background">
+        {children}
+      </Box>
+    </SafeAreaView>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { createBox, createText } from '@shopify/restyle';
+
+import type { Theme } from '../theme';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+import { useTranslation } from 'react-i18next';
+<% } %>
+
+const Box = createBox<Theme>();
+const Text = createText<Theme>();
+
+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 (
+    <Box alignItems="center" marginHorizontal="lg">
+      <Text variant="body" textAlign="center">
+        {title}
+      </Text>
+      <Box
+        borderRadius={3}
+        paddingHorizontal="sm"
+        marginVertical="sm"
+        backgroundColor="border">
+        <Text variant="muted">{path}</Text>
+      </Box>
+      <Text variant="muted" textAlign="center">
+        {description}
+      </Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createBox, createText } from '@shopify/restyle';
+
+import EditScreenInfo from './EditScreenInfo';
+import type { Theme } from '../theme';
+
+const Box = createBox<Theme>();
+const Text = createText<Theme>();
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children }: ScreenContentProps) => {
+  return (
+    <Box
+      flex={1}
+      alignItems="center"
+      justifyContent="center"
+      padding="lg"
+      backgroundColor="background">
+      <Text variant="header">{title}</Text>
+      <Box height={1} width="80%" backgroundColor="border" marginVertical="lg" />
+      <EditScreenInfo path={path} />
+      {children}
+    </Box>
+  );
+};

package/build/templates/packages/restyle/theme.ts.ejs

@@ -0,0 +1,51 @@
+import { createTheme } from '@shopify/restyle';
+
+const palette = {
+  white: '#FFFFFF',
+  black: '#0B0B0B',
+  slate: '#5B6670',
+  indigo: '#4F46E5',
+  gray: '#E5E7EB'
+} as const;
+
+export const theme = createTheme({
+  colors: {
+    background: palette.white,
+    text: palette.black,
+    muted: palette.slate,
+    primary: palette.indigo,
+    border: palette.gray
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  textVariants: {
+    defaults: {
+      color: 'text',
+      fontSize: 16
+    },
+    header: {
+      color: 'text',
+      fontSize: 20,
+      fontWeight: '700'
+    },
+    body: {
+      color: 'text',
+      fontSize: 16
+    },
+    muted: {
+      color: 'muted',
+      fontSize: 14
+    }
+  },
+  breakpoints: {
+    phone: 0,
+    tablet: 768
+  }
+});
+
+export type Theme = typeof theme;

package/build/templates/packages/supabase/.env.ejs

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_SUPABASE_URL=
+EXPO_PUBLIC_SUPABASE_ANON_KEY=

package/build/templates/packages/supabase/utils/supabase.ts.ejs

@@ -0,0 +1,14 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+	auth: {
+		storage: AsyncStorage,
+		autoRefreshToken: true,
+		persistSession: true,
+		detectSessionInUrl: false,
+	},
+});

package/build/templates/packages/tamagui/components/BackButton.tsx.ejs

@@ -0,0 +1,12 @@
+import { Pressable } from 'react-native';
+import { Text, XStack } from 'tamagui';
+
+export const BackButton = ({ onPress }: { onPress: () => void }) => {
+  return (
+    <Pressable onPress={onPress}>
+      <XStack paddingLeft="$4" alignItems="center">
+        <Text color="$blue10">{'<'} Back</Text>
+      </XStack>
+    </Pressable>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { Button as TamaguiButton } from 'tamagui';
+import type { ButtonProps as TamaguiButtonProps, TamaguiElement } from 'tamagui';
+
+type ButtonProps = {
+  title?: string;
+} & TamaguiButtonProps;
+
+export const Button = forwardRef<TamaguiElement, ButtonProps>(({ title, ...props }, ref) => {
+  return (
+    <TamaguiButton ref={ref} backgroundColor="$blue10" color="white" borderRadius="$8" {...props}>
+      {title}
+    </TamaguiButton>
+  );
+});
+
+Button.displayName = 'Button';

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

@@ -0,0 +1,12 @@
+import { SafeAreaView } from 'react-native';
+import { YStack } from 'tamagui';
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <YStack flex={1} padding="$6">
+        {children}
+      </YStack>
+    </SafeAreaView>
+  );
+};

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

@@ -0,0 +1,27 @@
+import { Text, YStack } from 'tamagui';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+import { useTranslation } from 'react-i18next';
+<% } %>
+
+export const 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 (
+    <YStack alignItems="center" gap="$3">
+      <Text textAlign="center">{title}</Text>
+      <Text textAlign="center" color="$gray8">
+        {path}
+      </Text>
+      <Text textAlign="center" color="$gray8">
+        {description}
+      </Text>
+    </YStack>
+  );
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Separator, Text, YStack } from 'tamagui';
+
+import { EditScreenInfo } from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children }: ScreenContentProps) => {
+  return (
+    <YStack flex={1} alignItems="center" justifyContent="center" padding="$6" gap="$4">
+      <Text fontSize="$6" fontWeight="700">
+        {title}
+      </Text>
+      <Separator alignSelf="stretch" />
+      <EditScreenInfo path={path} />
+      {children}
+    </YStack>
+  );
+};

package/build/templates/packages/tamagui/tamagui.config.ts.ejs

@@ -0,0 +1,14 @@
+import { config } from '@tamagui/config/v3';
+import { createTamagui } from 'tamagui';
+
+const appConfig = createTamagui(config);
+
+type AppConfig = typeof appConfig;
+
+declare module 'tamagui' {
+  interface TamaguiCustomConfig extends AppConfig {
+    _tamagui?: never;
+  }
+}
+
+export default appConfig;

package/build/templates/packages/unistyles/breakpoints.ts.ejs

@@ -0,0 +1,9 @@
+export const breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  superLarge: 2000,
+  tvLike: 4000
+} as const;

package/build/templates/packages/unistyles/components/BackButton.tsx.ejs

@@ -0,0 +1,28 @@
+import { Feather } from '@expo/vector-icons';
+import { Text, View } from 'react-native';
+import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+
+const UniFeather = withUnistyles(Feather, theme => ({
+    color: theme.colors.azureRadiance
+}));
+
+export const BackButton = ({ onPress }: { onPress: () => void; }) => {
+    return (
+        <View style={styles.backButton}>
+            <UniFeather name="chevron-left" size={16} />
+            <Text style={styles.backButtonText} onPress={onPress}>
+                Back
+            </Text>
+        </View>
+    );
+};
+const styles = StyleSheet.create((theme) => ({
+    backButton: {
+        flexDirection: 'row',
+        paddingLeft: 20,
+    },
+    backButtonText: {
+        color: theme.colors.azureRadiance,
+        marginLeft: 4,
+    },
+}));

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

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+type ButtonProps = {
+    title?: string;
+} & TouchableOpacityProps;
+
+export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps }, ref) => {
+    return (
+    <TouchableOpacity ref={ref} {...touchableProps} style={[styles.button, touchableProps.style]}>
+        <Text style={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+    );
+});
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create(theme => ({
+    button: {
+        alignItems: 'center',
+        backgroundColor: theme.colors.cornflowerBlue,
+        borderRadius: 24,
+        elevation: 5,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        padding: 16,
+        shadowColor: '#000',
+        shadowOffset: {
+            height: 2,
+            width: 0,
+        },
+        shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+        },
+    buttonText: {
+        color: theme.colors.background,
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+}));

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <View style={styles.container}>{children}</View>
+    );
+};
+
+const styles = StyleSheet.create((theme, rt) => ({
+    container: {
+        flex: 1,
+        paddingBottom: rt.insets.bottom,
+        backgroundColor: theme.colors.background,
+    },
+}));

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

@@ -0,0 +1,53 @@
+import { Text, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+<% if (props.internalizationPackage?.name === "i18next") { %>
+    import { useTranslation } from 'react-i18next';
+<% } %>
+
+export const 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>
+            <View style={styles.getStartedContainer}>
+                <Text style={styles.getStartedText}>{title}</Text>
+                <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
+                    <Text style={styles.text}>{path}</Text>
+                </View>
+                <Text style={styles.getStartedText}>
+                    {description}
+                </Text>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create((theme) => ({
+    codeHighlightContainer: {
+        borderRadius: 3,
+        paddingHorizontal: 4,
+    },
+    getStartedContainer: {
+        alignItems: 'center',
+        marginHorizontal: 50,
+    },
+    text: {
+        color: theme.colors.typography,
+    },
+    getStartedText: {
+        fontSize: 17,
+        lineHeight: 24,
+        textAlign: 'center',
+        color: theme.colors.typography,
+    },
+    homeScreenFilename: {
+        marginVertical: 7,
+    },
+}));