create-expo-stack 2.3.15 → 2.4.0-next.43d8ac0

package/build/templates/packages/react-navigation/navigation/index.tsx.ejs

@@ -6,6 +6,11 @@
 		import { Text, View } from "react-native";
 	<% } else if (props.stylingPackage?.name === "tamagui") { %>
 		import { Button, Text } from "tamagui";
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    import { Box, Text, useTheme } from 'theme';
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+    import { createStyleSheet, useStyles } from 'react-native-unistyles'
+		import { Text, View } from "react-native";
 	<% } else { %>
 		import { Text, View, StyleSheet } from "react-native";
 	<% } %>
@@ -21,6 +26,14 @@
 	const Stack = createStackNavigator<RootStackParamList>();
 
 	export default function RootStack() {
+    <% if (props.stylingPackage?.name === "restyle") { %>
+    const { colors } = useTheme();
+    <% } %>
+
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles } = useStyles(stylesheet)
+    <% } %>
+    
 		return (
 			<NavigationContainer>
 				<Stack.Navigator initialRouteName="Overview">
@@ -53,6 +66,17 @@
 									</Button>
 								),
 							})}
+						<% } else if (props.stylingPackage?.name === "restyle") { %>
+              options={({ navigation }) => ({
+                headerLeft: () => (
+                  <Box flexDirection="row" paddingLeft="m_16">
+                    <Feather name="chevron-left" size={16} color={colors.blue} />
+                    <Text marginLeft="xs_4" color="blue" onPress={navigation.goBack}>
+                      Back
+                    </Text>
+                  </Box>
+                ),
+              })}
 						<% } else { %>
 							options={({ navigation }) => ({
 								headerLeft: () => (
@@ -74,6 +98,17 @@
 			backButton: "flex-row",
 			backButtonText: "text-blue-500 ml-1"
 		};
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+		const stylesheet = createStyleSheet({
+			backButton: {
+				flexDirection: "row",
+				paddingLeft: 20,
+			},
+			backButtonText: {
+				color: "#007AFF",
+				marginLeft: 4
+			}
+		});
 	<% } else if (props.stylingPackage?.name === "stylesheet") { %>
 		const styles = StyleSheet.create({
 			backButton: {
@@ -112,13 +147,13 @@
 					<Stack.Screen
 						name="Modal"
 						component={Modal}
-						options={{ presentation: "modal", headerLeft: null }}
+						options={{ presentation: "modal", headerLeft: () => null }}
 					/>
 				</Stack.Navigator>
 			</NavigationContainer>
 		);
 	}
-	<% } else if (props.navigationPackage?.options.type === 'drawer') { %>
+<% } else if (props.navigationPackage?.options.type === 'drawer') { %>
 		import { NavigationContainer } from "@react-navigation/native";
 		import { createStackNavigator } from '@react-navigation/stack';
 	
@@ -150,4 +185,4 @@
 				</NavigationContainer>
 			);
 		}
-	<% } %>
+<% } %>

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

@@ -1,7 +1,14 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { StackScreenProps } from '@react-navigation/stack';
+<% if (props.stylingPackage?.name === "unistyles") {%>
+import { createStyleSheet, useStyles } from 'react-native-unistyles'
+import { Pressable } from "react-native";
+<% } else { %>
 import { Pressable, StyleSheet } from "react-native";
+<% } %>
 
+import { RootStackParamList } from '.';
 import One from "../screens/one";
 import Two from "../screens/two";
 
@@ -11,10 +18,19 @@ function TabBarIcon(props: {
   name: React.ComponentProps<typeof FontAwesome>["name"];
   color: string;
 }) {
+  <% if (props.stylingPackage?.name === "unistyles") {%>
+  const {styles} = useStyles(stylesheet) 
+  <% } %>
   return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
 }
 
-export default function TabLayout({ navigation }) {
+type Props = StackScreenProps<RootStackParamList, 'TabNavigator'>;
+
+export default function TabLayout({ navigation }: Props) {
+  <% if (props.stylingPackage?.name === "unistyles") {%>
+  const {styles} = useStyles(stylesheet) 
+  <% } %>
+  
   return (
     <Tab.Navigator
       screenOptions={{
@@ -52,6 +68,16 @@ export default function TabLayout({ navigation }) {
   );
 }
 
+<% if (props.stylingPackage?.name === "unistyles") {%>
+const stylesheet = createStyleSheet({
+  headerRight: {
+    marginRight: 15
+  },
+  tabBarIcon: {
+    marginBottom: -3
+  }
+});
+<% } else { %>
 const styles = StyleSheet.create({
   headerRight: {
     marginRight: 15
@@ -59,4 +85,5 @@ const styles = StyleSheet.create({
   tabBarIcon: {
     marginBottom: -3
   }
-});
+});
+<% } %>

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

@@ -4,6 +4,11 @@ import { RouteProp, useRoute } from "@react-navigation/native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
 	import { YStack } from "tamagui";
 	import { Container, Main, Subtitle, Title } from "../../tamagui.config";
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+	import { Box, Text } from 'theme';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+	import { View, Text } from "react-native";
 <% } else { %>
 	import { View, StyleSheet, Text } from "react-native";
 <% } %>
@@ -33,6 +38,27 @@ export default function Details() {
 				</Main>
 			</Container>
 		);
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    return (
+      <Box flex={1} padding="ml_24">
+        <Box flex={1} maxWidth={960}>
+          <Text variant="extra_large">Details</Text>
+          <Text variant="large" color="darkGray">
+            Showing details for user {router.params.name}.
+          </Text>
+        </Box>
+      </Box>
+    );
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+    const {styles} = useStyles(stylesheet)
+    return (
+      <View style={styles.container}>
+        <View style={styles.main}>
+          <Text style={styles.title}>Details</Text>
+          <Text style={styles.subtitle}>Showing details for user {router.params.name}.</Text>
+        </View>
+      </View>
+    );
 	<% } else { %>
 		return (
 			<View style={styles.container}>
@@ -52,6 +78,26 @@ export default function Details() {
 		title: "text-[64px] font-bold",
 		subtitle: "text-4xl text-gray-700",
 	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+	const stylesheet = createStyleSheet({
+		container: {
+			flex: 1,
+			padding: 24,
+		},
+		main: {
+			flex: 1,
+			maxWidth: 960,
+			marginHorizontal: "auto",
+		},
+		title: {
+			fontSize: 64,
+			fontWeight: "bold",
+		},
+		subtitle: {
+			fontSize: 36,
+			color: "#38434D",
+		},
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 	const styles = StyleSheet.create({
 		container: {

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

@@ -3,6 +3,12 @@
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
   	import { YStack, Paragraph, Separator, Theme } from "tamagui";
 	import { Platform } from 'react-native'
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+    import { Platform } from 'react-native';
+    import { Box, Text, makeStyles } from 'theme';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+  import { Platform, Text, View } from "react-native";
 <% } else { %>
   	import { Platform, StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -20,7 +26,7 @@ export default function Modal() {
 				<EditScreenInfo path="src/screens/modal.tsx" />
 			</View>
 		)
-			<% } else if (props.stylingPackage?.name === "tamagui") { %>
+	<% } else if (props.stylingPackage?.name === "tamagui") { %>
 		return (
 					<Theme name="light">
 						<YStack flex={1} alignItems="center" justifyContent="center">
@@ -31,6 +37,27 @@ export default function Modal() {
 						</YStack>
 					</Theme>
 				);
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    const styles = useStyles();
+
+    return (
+      <Box flex={1} alignItems="center" justifyContent="center">
+        <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+        <Text variant="title">Modal</Text>
+        <Box style={styles.separator} />
+        <EditScreenInfo path="src/screens/modal.tsx" />
+      </Box>
+    );
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+    const {styles} = useStyles(stylesheet)
+    return (
+			<View style={styles.container}>
+				<StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
+				<Text style={styles.title}>Modal</Text>
+				<View style={styles.separator} />
+				<EditScreenInfo path="src/screens/modal.tsx" />
+			</View>
+		);
 	<% } else { %>
 		return (
 			<View style={styles.container}>
@@ -49,6 +76,35 @@ export default function Modal() {
 		separator: "h-[1px] my-7 w-4/5 bg-gray-200",
 		title: "text-xl font-bold"
 	};
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  const useStyles = makeStyles((theme) => ({
+    separator: {
+      backgroundColor: theme.colors.gray,
+      height: 1,
+      marginVertical: theme.spacing.l_32,
+      opacity: 0.25,
+      width: '80%',
+    },
+  }));
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet({
+		container: {
+			alignItems: "center",
+			flex: 1,
+			justifyContent: "center"
+		},
+		separator: {
+			backgroundColor: "gray",
+			height: 1,
+			marginVertical: 30,
+			opacity: 0.25,
+			width: "80%",
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: "bold"
+		}
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   	const styles = StyleSheet.create({
 		container: {

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

@@ -2,6 +2,11 @@
   	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, makeStyles } 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";
 <% } %>
@@ -27,6 +32,25 @@ export default function TabOneScreen() {
 				</YStack>
 			</Theme>
 		);    
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    const styles = useStyles();
+
+    return (
+      <Box flex={1} alignItems="center" justifyContent="center">
+        <Text variant="title">Tab One</Text>
+        <Box style={styles.separator} />
+        <EditScreenInfo path="src/screens/one.tsx" />
+      </Box>
+    );   
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles } = useStyles(stylesheet)
+		return (
+			<View style={styles.container}>
+				<Text style={styles.title}>Tab One</Text>
+				<View style={styles.separator} />
+				<EditScreenInfo path="src/screens/one.tsx" />
+			</View>
+		);
 	<% } else { %>
 		return (
 			<View style={styles.container}>
@@ -44,6 +68,35 @@ export default function TabOneScreen() {
 		separator: "h-[1px] my-7 w-4/5 bg-gray-200",
 		title: "text-xl font-bold"
 	};
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+    const useStyles = makeStyles((theme) => ({
+      separator: {
+        backgroundColor: theme.colors.gray,
+        height: 1,
+        marginVertical: theme.spacing.l_32,
+        opacity: 0.25,
+        width: '80%',
+      },
+    }));
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  	const stylesheet = createStyleSheet({
+		container: {
+			alignItems: "center",
+			flex: 1,
+			justifyContent: "center",
+		},
+		separator: {
+			backgroundColor: "gray",
+			height: 1,
+			marginVertical: 30,
+			opacity: 0.25,
+			width: "80%",
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: "bold",
+		}
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   	const styles = StyleSheet.create({
 		container: {

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

@@ -5,6 +5,12 @@ import { StackNavigationProp } from "@react-navigation/stack";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
 	import { YStack } from "tamagui";
 	import { Container, Main, Title, Subtitle, Button, ButtonText } from '../../tamagui.config';
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { TouchableOpacity } from 'react-native';
+  import { Box, Text, makeStyles } from 'theme';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+	import { Text, TouchableOpacity, View } from "react-native";
 <% } else { %>
 	import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 <% } %>
@@ -42,7 +48,43 @@ export default function Overview() {
 				</Main>
 			</Container>
 		);
-	<% } else { %>
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    const styles = useStyles();
+    return (
+      <Box flex={1} padding="ml_24">
+        <Box flex={1} maxWidth={960} justifyContent="space-between">
+          <Box>
+            <Text variant="extra_large">Hello World</Text>
+            <Text variant="large" color="darkGray">
+              This is the first page of your app.
+            </Text>
+          </Box>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.navigate('Details', { name: 'Dan' })}>
+            <Text variant="body" textAlign="center" color="white" fontWeight="600">
+              Show Details
+            </Text>
+          </TouchableOpacity>
+        </Box>
+      </Box>
+    );
+	<% } else if (props.stylingPackage?.name === "unistyles") { %>
+    const {styles} = useStyles(stylesheet)
+		return (
+			<View style={styles.container}>
+				<View style={styles.main}>
+					<View>
+						<Text style={styles.title}>Hello World</Text>
+						<Text style={styles.subtitle}>This is the first page of your app.</Text>
+					</View>
+					<TouchableOpacity style={styles.button} onPress={() => navigation.navigate("Details", { name: "Dan" })}>
+						<Text style={styles.buttonText}>Show Details</Text>
+					</TouchableOpacity>
+				</View>
+			</View>
+		);
+  <% } else { %>
 		return (
 			<View style={styles.container}>
 				<View style={styles.main}>
@@ -68,6 +110,68 @@ export default function Overview() {
 		title: "text-[64px] font-bold",
 		subtitle: "text-4xl text-gray-700",
 	};
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  const useStyles = makeStyles((theme) => ({
+    button: {
+      alignItems: 'center',
+      backgroundColor: theme.colors.purple,
+      borderRadius: theme.borderRadii.xl_24,
+      elevation: 5,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      padding: theme.spacing.m_16,
+      shadowColor: theme.colors.black,
+      shadowOffset: {
+        height: 2,
+        width: 0,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+    },
+  }));
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet({
+		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",
+		},
+		container: {
+			flex: 1,
+			padding: 24,
+		},
+		main: {
+			flex: 1,
+			maxWidth: 960,
+			marginHorizontal: "auto",
+			justifyContent: "space-between",
+		},
+		title: {
+			fontSize: 64,
+			fontWeight: "bold",
+		},
+		subtitle: {
+			color: "#38434D",
+			fontSize: 36,
+		}
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 	const styles = StyleSheet.create({
 		button: {

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

@@ -2,6 +2,11 @@
   	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, makeStyles } 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";
 <% } %>
@@ -26,7 +31,26 @@ export default function TabTwoScreen() {
 					<EditScreenInfo path="src/screens/two.tsx" />
 				</YStack>
 			</Theme>
+		);    
+  <% } else if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles } = useStyles(stylesheet)
+		return (
+			<View style={styles.container}>
+				<Text style={styles.title}>Tab Two</Text>
+				<View style={styles.separator} />
+				<EditScreenInfo path="src/screens/two.tsx" />
+			</View>
 		);
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    const styles = useStyles();
+
+    return (
+      <Box flex={1} alignItems="center" justifyContent="center">
+        <Text variant="title">Tab Two</Text>
+        <Box style={styles.separator} />
+        <EditScreenInfo path="src/screens/two.tsx" />
+      </Box>
+    );   
 	<% } else { %>
 		return (
 			<View style={styles.container}>
@@ -44,6 +68,35 @@ export default function TabTwoScreen() {
 		separator: "h-[1px] my-7 w-4/5 bg-gray-200",
 		title: "text-xl font-bold"
 	};
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+    const useStyles = makeStyles((theme) => ({
+      separator: {
+        backgroundColor: theme.colors.gray,
+        height: 1,
+        marginVertical: theme.spacing.l_32,
+        opacity: 0.25,
+        width: '80%',
+      },
+    }));
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  	const stylesheet = createStyleSheet({
+		container: {
+			alignItems: "center",
+			flex: 1,
+			justifyContent: "center",
+		},
+		separator: {
+			backgroundColor: "gray",
+			height: 1,
+			marginVertical: 30,
+			opacity: 0.25,
+			width: "80%",
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: "bold",
+		}
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   	const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/restyle/theme/Box.tsx.ejs

@@ -0,0 +1,6 @@
+import { createBox } from '@shopify/restyle';
+import { Theme } from './theme';
+
+const Box = createBox<Theme>();
+
+export default Box;

package/build/templates/packages/restyle/theme/Text.tsx.ejs

@@ -0,0 +1,6 @@
+import { createText } from '@shopify/restyle';
+import { Theme } from './theme';
+
+const Text = createText<Theme>();
+
+export default Text;

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

@@ -0,0 +1,6 @@
+import Box from './Box';
+import Text from './Text';
+import theme, { useTheme, Theme, makeStyles } from './theme';
+
+export { theme, Box, Text, useTheme, Theme, makeStyles };
+

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

@@ -0,0 +1,67 @@
+import { createTheme, useTheme as useRestyleTheme } from '@shopify/restyle';
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+
+type NamedStyles<T> = {
+  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+};
+
+const palette = {
+  gray: '#808080',
+  blue: '#007AFF',
+  darkGray: '#38434D',
+  white: '#FFFFFF',
+  black: '#000000',
+  purple: '#6366F1',
+};
+
+const theme = createTheme({
+  colors: {
+    ...palette
+  },
+  spacing: {
+    xs_4: 4,
+    s_8: 8,
+    sm_12: 12,
+    m_16: 16,
+    ml_24: 24,
+    l_32: 32,
+    xl_64: 64,
+  },
+  borderRadii: {
+    s_3: 3,
+    m_6: 6,
+    l_12: 12,
+    xl_24: 24,
+  },
+  textVariants: {
+    body: {
+      fontSize: 16,
+    },
+    title: { fontSize: 20, fontWeight: 'bold' },
+    large: {
+      fontSize: 36,
+    },
+    extra_large: {
+      fontSize: 64,
+      fontWeight: 'bold',
+    },
+    defaults: {
+      // We can define a default text variant here.
+    }
+  }
+});
+
+export const useTheme = () => {
+  return useRestyleTheme<Theme>();
+};
+
+export const makeStyles = <T extends NamedStyles<T> | NamedStyles<unknown>>(
+  styles: (theme: Theme) => T,
+) => {
+  return () => {
+    return styles(theme);
+  };
+};
+
+export type Theme = typeof theme;
+export default theme;

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;