create-expo-stack 2.5.0-next.738ca1b → 2.5.0-next.8d1b140

package/build/templates/base/App.tsx.ejs

@@ -1,127 +1,61 @@
-<% if (props.stylingPackage?.name === "nativewind") { %>
-import './global.css';
-<% } %>
-import React from 'react';
-
-<% if (props.stylingPackage?.name === "nativewind") {%>
-  	import { Text, View } from 'react-native';
-<% } else if (props.stylingPackage?.name === "tamagui") {%>
-  	import { View } from 'react-native';
-	import { TamaguiProvider, Text, styled } from 'tamagui';
-	import config from './tamagui.config'
-<% } else if (props.stylingPackage?.name === "restyle") {%>
-  import { ThemeProvider } from '@shopify/restyle';
-  import {theme, Text} from './theme';
-<% } else if (props.stylingPackage?.name === "unistyles") {%>
-  import { createStyleSheet, useStyles } from 'react-native-unistyles'
-  import { Text, View } from 'react-native';
-<% } else {%>
-  	import { StyleSheet, Text, View } from 'react-native';
-<% } %>
+import { ScreenContent } from 'components/ScreenContent';
+import { StatusBar } from 'expo-status-bar';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
-  import { InternalizationExample } from 'components/InternalizationExample';
-
   import './translation';
+  import { InternalizationExample } from 'components/InternalizationExample';
 <% } %>
 
+<% if (props.stylingPackage?.name === "nativewind") { %>
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  import { theme } from 'theme';
+<% } else if (props.stylingPackage?.name === "tamagui") { %>
+  import { TamaguiProvider } from 'tamagui';
+  import config from './tamagui.config';
+<% } %>
 
-import { StatusBar } from 'expo-status-bar';
-
-<% if (props.stylingPackage?.name === "nativewind") {%>
-  export default function App() {
-		return (
-			<View className={styles.container}>
-      <% if (props.internalizationPackage?.name === "i18next") { %>
-        <InternalizationExample />
-      <% } else { %>
-        <Text>Open up App.tsx to start working on your app!</Text>
-      <% } %>
-        <StatusBar style="auto" />
-      </View >
-    );
-	}
-
-	const styles = {
-		container: 'flex flex-1 items-center justify-center bg-white',
-	};
-<% } else if (props.stylingPackage?.name === "tamagui") {%>
-  	const MyView = styled(View, {
-		name: "MyView",
-		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
-	});
-
-	export default function App() {
-		return (
-			<TamaguiProvider config={config}>
-				<MyView>
-          <Text>Open up App.tsx to start working on your app!</Text>
+<% if (props.stylingPackage?.name === "restyle") {%>
+  export default function App() {   
+    return (
+      <ThemeProvider theme={theme}>
+        <ScreenContent title="Home" path="App.tsx">
         <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
         <% } %>
-					<StatusBar style="auto" />
-				</MyView>
-			</TamaguiProvider >
-    	);
-	}
-<% } else if (props.stylingPackage?.name === "restyle") {%>
-    export default function App() {   
-      return (
-        <ThemeProvider theme={theme}>
+        </ScreenContent>
+        <StatusBar style="auto" />
+      </ThemeProvider>
+    );
+  }
+<% } else if (props.stylingPackage?.name === "tamagui") {%>
+  export default function App() {
+    return (
+      <TamaguiProvider config={config}>
+        <ScreenContent title="Home" path="App.tsx">
         <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
         <% } else { %>
-				  <Text>Open up App.tsx to start working on your app!</Text>
+          <Text>Open up App.tsx to start working on your app!</Text>
         <% } %>
-          <StatusBar style="auto" />
-        </ThemeProvider>
-      );
-    }
-<% } else if (props.stylingPackage?.name === "unistyles") {%>
-  	export default function App() {          
-    const {styles} = useStyles(stylesheet)
-		return (
-			<View style={styles.container}>
-      <% if (props.internalizationPackage?.name === "i18next") { %>
-        <InternalizationExample />
-      <% } else { %>
-        <Text>Open up App.tsx to start working on your app!</Text>
-      <% } %>
-				<StatusBar style="auto" />
-			</View >
-    	);
-	}
-
-	const stylesheet = createStyleSheet({
-		container: {
-			flex: 1,
-			backgroundColor: '#fff',
-			alignItems: 'center',
-			justifyContent: 'center',
-		},
-	});
-<% } else {%>
-  	export default function App() {
-		return (
-			<View style={styles.container}>
+        </ScreenContent>
+        <StatusBar style="auto" />
+      </TamaguiProvider>
+    );
+  }
+<% } else { %>
+  export default function App() {
+    return (
+      <>
+        <ScreenContent title="Home" path="App.tsx">
         <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
-        <% } else { %>
-				  <Text>Open up App.tsx to start working on your app!</Text>
         <% } %>
-				<StatusBar style="auto" />
-			</View >
-    	);
-	}
+        </ScreenContent>
+        <StatusBar style="auto" />
+      </>
+    );
+  }
+<% } %>
 
-	const styles = StyleSheet.create({
-		container: {
-			flex: 1,
-			backgroundColor: '#fff',
-			alignItems: 'center',
-			justifyContent: 'center',
-		},
-	});
-<% } %>

package/build/templates/base/components/BackButton.tsx.ejs

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

package/build/templates/base/components/Button.tsx.ejs

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+import { StyleSheet, Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+type ButtonProps = {
+  onPress?: TouchableOpacityProps['onPress'];
+  title?: string;
+} & TouchableOpacityProps;
+
+export const Button = forwardRef<TouchableOpacity, ButtonProps>(({ onPress, title }, ref) => {
+  return (
+    <TouchableOpacity ref={ref} style={styles.button} onPress={onPress}>
+      <Text style={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+});
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#6366F1',
+    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: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/build/templates/base/components/EditScreenInfo.tsx.ejs

@@ -0,0 +1,55 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+<% 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 style={styles.getStartedText}>{title}</Text>
+      <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
+        <Text>{path}</Text>
+      </View>
+      <Text style={styles.getStartedText}>{description}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  codeHighlightContainer: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+  },
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+  },
+  getStartedText: {
+    fontSize: 17,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  helpContainer: {
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginTop: 15,
+  },
+  helpLink: {
+    paddingVertical: 15,
+  },
+  helpLinkText: {
+    textAlign: 'center',
+  },
+  homeScreenFilename: {
+    marginVertical: 7,
+  },
+});

package/build/templates/base/components/HeaderButton.tsx.ejs

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

package/build/templates/base/components/ScreenContent.tsx.ejs

@@ -0,0 +1,38 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+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 style={styles.title}>{title}</Text>
+      <View style={styles.separator} />
+      <EditScreenInfo path={path} />
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  separator: {
+    backgroundColor: '#d1d5db',
+    height: 1,
+    marginVertical: 30,
+    width: '80%',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});

package/build/templates/base/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/expo-router/drawer/app/(drawer)/(tabs)/_layout.tsx.ejs

@@ -1,13 +1,7 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { Tabs } from 'expo-router';
 import { StyleSheet } from 'react-native';
+import { TabBarIcon } from '~/components/TabBarIcon';
 
-function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>['name'];
-  color: string;
-}) {
-  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
-}
 
 export default function TabLayout() {
   return (
@@ -33,9 +27,3 @@ export default function TabLayout() {
     </Tabs>
   );
 }
-
-const styles = StyleSheet.create({
-  tabBarIcon: {
-    marginBottom: -3,
-  },
-});

package/build/templates/packages/expo-router/drawer/app/(drawer)/(tabs)/index.tsx.ejs

@@ -1,88 +1,22 @@
-<% if (props.stylingPackage?.name === 'nativewind') { %>
-    import { Text, View } from 'react-native';
-<% } else if (props.stylingPackage?.name === 'tamagui') { %>
-    import { YStack, H2, Separator, Theme } from 'tamagui';
-<% } else if (props.stylingPackage?.name === 'restyle') { %>
-    import { Box, Text } from 'theme';
-<% } else if (props.stylingPackage?.name === 'unistyles') { %>
-    import { useStyles } from 'react-native-unistyles'
-    import { Text, View } from 'react-native';
-<% } else { %>
-    import { StyleSheet, Text, View } from 'react-native';
-<% } %>
+import { Stack } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
 
-import EditScreenInfo from '../../../components/edit-screen-info';
+import { ScreenContent } from '~/components/ScreenContent';
 
-export default function TabOneScreen() {
-  <% if (props.stylingPackage?.name === 'unistyles') { %>
-    const { theme } = useStyles()
-
-    return (
-			<View style={theme.components.container}>
-				<Text style={theme.components.title}>Tab One</Text>
-				<View style={theme.components.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-			</View>
-    );
-  <% } else if (props.stylingPackage?.name === 'nativewind') { %>
-        return (
-			<View className={styles.container}>
-				<Text className={styles.title}>Tab One</Text>
-				<View className={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-			</View>
-		);
-    <% } else if (props.stylingPackage?.name === 'tamagui') { %>
-        return (
-			<Theme name='light'>
-				<YStack flex={1} alignItems='center' justifyContent='center'>
-					<H2>Tab One</H2>
-					<Separator />
-					<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-				</YStack>
-			</Theme>
-		);    
-    <% } else if (props.stylingPackage?.name === 'restyle') { %>
-      return (
-        <Box flex={1} alignItems='center' justifyContent='center'>
-          <Text variant='title'>Tab One</Text>
-          <Box height={1} marginVertical='l_32' width='80%' />
-          <EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-        </Box>
-      );
-    <% } else { %>
-        return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab One</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/index.tsx' />
-			</View>
-		);
-    <% } %>
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab One' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Tab One" />
+      </View>
+    </>
+  );
 }
 
-<% if (props.stylingPackage?.name === 'nativewind') { %>
-    const styles = {
-		container: `items-center flex-1 justify-center`,
-		separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
-		title: `text-xl font-bold`
-	};
-<% } else if (props.stylingPackage?.name === 'stylesheet') { %>
-    const styles = StyleSheet.create({
-		container: {
-			alignItems: 'center',
-			flex: 1,
-			justifyContent: 'center',
-		},
-		separator: {
-      backgroundColor: '#d1d5db',
-			height: 1,
-			marginVertical: 30,
-			width: '80%',
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: 'bold',
-		}
-	});
-<% } %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});

package/build/templates/packages/expo-router/drawer/app/(drawer)/(tabs)/two.tsx.ejs

@@ -1,88 +1,22 @@
-<% if (props.stylingPackage?.name === 'nativewind') { %>
-    import { Text, View } from 'react-native';
-<% } else if (props.stylingPackage?.name === 'tamagui') { %>
-    import { YStack, H2, Separator, Theme } from 'tamagui';
-<% } else if (props.stylingPackage?.name === 'restyle') { %>
-    import { Box, Text } from 'theme';
-<% } else if (props.stylingPackage?.name === 'unistyles') { %>
-    import { useStyles } from 'react-native-unistyles'
-    import { Text, View } from 'react-native';
-<% } else { %>
-    import { StyleSheet, Text, View } from 'react-native';
-<% } %>
+import { Stack } from 'expo-router';
+import { StyleSheet, View } from 'react-native';
 
-import EditScreenInfo from '../../../components/edit-screen-info';
+import { ScreenContent } from '~/components/ScreenContent';
 
-export default function TabTwoScreen() {
-    <% if (props.stylingPackage?.name === 'unistyles') { %>
-      const { theme } = useStyles()
-
-      return (
-        <View style={theme.components.container}>
-          <Text style={theme.components.title}>Tab Two</Text>
-          <View style={theme.components.separator} />
-          <EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-        </View>
-      );
-    <% } else if (props.stylingPackage?.name === 'nativewind') { %>
-        return (
-			<View className={styles.container}>
-				<Text className={styles.title}>Tab Two</Text>
-				<View className={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-			</View>
-		);
-    <% } else if (props.stylingPackage?.name === 'tamagui') { %>
-        return (
-			<Theme name='light'>
-				<YStack flex={1} alignItems='center' justifyContent='center'>
-					<H2>Tab Two</H2>
-					<Separator />
-					<EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-				</YStack>
-			</Theme>
-		);    
-    <% } else if (props.stylingPackage?.name === 'restyle') { %>
-      return (
-        <Box flex={1} alignItems='center' justifyContent='center'>
-          <Text variant='title'>Tab Two</Text>
-          <Box height={1} marginVertical='l_32' width='80%' />
-          <EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-        </Box>
-      );
-    <% } else { %>
-        return (
-			<View style={styles.container}>
-				<Text style={styles.title}>Tab Two</Text>
-				<View style={styles.separator} />
-				<EditScreenInfo path='app/(drawer)/(tabs)/two.tsx' />
-			</View>
-		);
-    <% } %>
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Tab Two' }} />
+      <View style={styles.container}>
+        <ScreenContent path="app/(drawer)/(tabs)/two.tsx" title="Tab Two" />
+      </View>
+    </>
+  );
 }
 
-<% if (props.stylingPackage?.name === 'nativewind') { %>
-    const styles = {
-		container: `items-center flex-1 justify-center`,
-		separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
-		title: `text-xl font-bold`
-	};
-<% } else if (props.stylingPackage?.name === 'stylesheet') { %>
-    const styles = StyleSheet.create({
-		container: {
-			alignItems: 'center',
-			flex: 1,
-			justifyContent: 'center',
-		},
-		separator: {
-      backgroundColor: '#d1d5db',
-			height: 1,
-			marginVertical: 30,
-			width: '80%',
-		},
-		title: {
-			fontSize: 20,
-			fontWeight: 'bold',
-		}
-	});
-<% } %>
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});

package/build/templates/packages/expo-router/drawer/app/(drawer)/_layout.tsx.ejs

@@ -1,7 +1,8 @@
-import { FontAwesome, Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { Link } from 'expo-router';
 import { Drawer } from 'expo-router/drawer';
-import { Pressable, StyleSheet } from 'react-native';
+
+import { HeaderButton } from '../../components/HeaderButton';
 
 const DrawerLayout = () => (
   <Drawer>
@@ -23,16 +24,7 @@ const DrawerLayout = () => (
         ),
         headerRight: () => (
           <Link href="/modal" asChild>
-            <Pressable>
-              {({ pressed }) => (
-                <FontAwesome
-                  name="info-circle"
-                  size={25}
-                  color="gray"
-                  style={[styles.headerRight, { opacity: pressed ? 0.5 : 1 }]}
-                />
-              )}
-            </Pressable>
+            <HeaderButton />
           </Link>
         ),
       }}
@@ -40,10 +32,4 @@ const DrawerLayout = () => (
   </Drawer>
 );
 
-const styles = StyleSheet.create({
-  headerRight: {
-    marginRight: 15,
-  },
-});
-
 export default DrawerLayout;