create-expo-stack 2.12.2 → 2.12.3-next.23deeea

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

@@ -1,5 +1,10 @@
 import { Stack } from 'expo-router';
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+<% } else { %>
 import { StyleSheet, View } from 'react-native';
+<% } %>
 
 import { ScreenContent } from '~/components/ScreenContent';
 
@@ -14,9 +19,19 @@ export default function Home() {
   );
 }
 
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        padding: 24,
+        backgroundColor: theme.colors.background,
+    },
+}));
+<% } else { %>
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 24,
-  },
+    container: {
+        flex: 1,
+        padding: 24,
+    },
 });
+<% } %>

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

@@ -1,5 +1,10 @@
 import { Stack } from 'expo-router';
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+<% } else { %>
 import { StyleSheet, View } from 'react-native';
+<% } %>
 
 import { ScreenContent } from '~/components/ScreenContent';
 
@@ -14,9 +19,19 @@ export default function Home() {
   );
 }
 
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        padding: 24,
+        backgroundColor: theme.colors.background,
+    },
+}));
+<% } else { %>
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 24,
-  },
+    container: {
+        flex: 1,
+        padding: 24,
+    },
 });
+<% } %>

package/build/templates/packages/expo-router/tabs/app/+html.tsx.ejs

@@ -1,4 +1,7 @@
 import { ScrollViewStyleReset } from 'expo-router/html';
+<% if (props.stylingPackage?.name === "unistyles") { %>
+    import '../unistyles';
+<% } %>
 
 // This file is web-only and used to configure the root HTML for every
 // web page during static rendering.
@@ -11,7 +14,7 @@ export default function Root({ children }: { children: React.ReactNode }) {
         <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" />
@@ -20,8 +23,8 @@ export default function Root({ children }: { children: React.ReactNode }) {
           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. 
+        {/*
+          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 />

package/build/templates/packages/expo-router/tabs/app/+not-found.tsx.ejs

@@ -2,7 +2,7 @@ import { Link, Stack } from 'expo-router';
 <% if (props.stylingPackage?.name === "nativewind") {%>
   import { Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+  import { StyleSheet } from 'react-native-unistyles'
   import { Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from 'react-native';
@@ -18,10 +18,6 @@ export default function NotFoundScreen() {
   const styles = useStyles();
 <% } %>
 
-<% if (props.stylingPackage?.name === "unistyles") {%>
-  const { styles } = useStyles(stylesheet);
-<% } %>
-
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -79,7 +75,7 @@ export default function NotFoundScreen() {
     linkText: `text-base text-[#2e78b7]`,
 	};
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  const stylesheet = createStyleSheet((theme) => ({
+  const styles = StyleSheet.create((theme) => ({
     container: {
       flex: 1,
       alignItems: 'center',
@@ -127,4 +123,4 @@ export default function NotFoundScreen() {
       paddingVertical: theme.spacing.m_16,
     },
   }));
-<% } %>
+<% } %>

package/build/templates/packages/expo-router/tabs/app/_layout.tsx.ejs

@@ -3,9 +3,8 @@
 <% } else if (props.stylingPackage?.name === "nativewinui") { %>
   import '../global.css';
   import 'expo-dev-client';
-<% } %>
-<% if (props.stylingPackage?.name === "unistyles") { %>
-import '../unistyles';
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  import { useUnistyles } from "react-native-unistyles";
 <% } %>
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import '../translation';
@@ -54,6 +53,9 @@ export default function RootLayout() {
 
     	if (!loaded) return null;
   	<% } %>
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+        const { theme } = useUnistyles();
+    <% } %>
 
   	return (
     	<% if (props.stylingPackage?.name === "tamagui") { %>
@@ -61,7 +63,21 @@ export default function RootLayout() {
     	<% } else if (props.stylingPackage?.name === "restyle") { %>
     		<ThemeProvider theme={theme}>
     	<% } %>
-		<Stack>
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+            <Stack
+                screenOptions={{
+                    headerStyle: {
+                        backgroundColor: theme.colors.background,
+                    },
+                    headerTitleStyle: {
+                        color: theme.colors.typography,
+                    },
+                    headerTintColor: theme.colors.typography
+                }}
+            >
+        <% } else  { %>
+            <Stack>
+        <% } %>
 			<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
 			<Stack.Screen name="modal" options={{ presentation: "modal" }} />
 		</Stack>
@@ -71,4 +87,4 @@ export default function RootLayout() {
 			</ThemeProvider>
 		<% } %>
   	);
-}
+}

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

@@ -2,6 +2,9 @@ import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { StackScreenProps } from '@react-navigation/stack';
 import { HeaderButton } from 'components/HeaderButton';
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { useUnistyles } from 'react-native-unistyles';
+<% } %>
 
 import { RootStackParamList } from '.';
 import TabNavigator from './tab-navigator';
@@ -12,8 +15,33 @@ type Props = StackScreenProps<RootStackParamList, 'DrawerNavigator'>;
 const Drawer = createDrawerNavigator();
 
 export default function DrawerNavigator({ navigation }: Props) {
+<% if (props.stylingPackage?.name === "unistyles") { %>
+  const { theme } = useUnistyles();
+<% } %>
+
   return (
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+    <Drawer.Navigator
+        screenOptions={{
+            headerStyle: {
+                backgroundColor: theme.colors.background,
+            },
+            headerTitleStyle: {
+                color: theme.colors.typography,
+            },
+            headerTintColor: theme.colors.typography,
+            drawerStyle: {
+                backgroundColor: theme.colors.background,
+            },
+            drawerLabelStyle: {
+                color: theme.colors.typography,
+            },
+            drawerInactiveTintColor: theme.colors.typography,
+        }}
+    >
+    <% } else { %>
     <Drawer.Navigator>
+    <% } %>
       <Drawer.Screen
         name="Home"
         component={Home}

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

@@ -2,9 +2,13 @@
 	import { NavigationContainer } from "@react-navigation/native";
 	import { createStackNavigator } from "@react-navigation/stack";
 
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+        import { useUnistyles } from 'react-native-unistyles';
+    <% } %>
+
 	import Overview from "../screens/overview";
 	import Details from "../screens/details";
-  import { BackButton } from '../components/BackButton';
+    import { BackButton } from '../components/BackButton';
 
 	export type RootStackParamList = {
 		Overview: undefined;
@@ -14,10 +18,25 @@
 	const Stack = createStackNavigator<RootStackParamList>();
 
 	export default function RootStack() {
-
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+        const { theme } = useUnistyles();
+        <% } %>
 		return (
 			<NavigationContainer>
-				<Stack.Navigator initialRouteName="Overview">
+				<Stack.Navigator
+                    initialRouteName="Overview"
+                    <% if (props.stylingPackage?.name === "unistyles") { %>
+                    screenOptions={{
+                        headerStyle: {
+                            backgroundColor: theme.colors.background,
+                        },
+                        headerTitleStyle: {
+                            color: theme.colors.typography,
+                        },
+                        headerTintColor: theme.colors.typography,
+                    }}
+                    <% } %>
+                >
 					<Stack.Screen name="Overview" component={Overview} />
 					<Stack.Screen
 						name="Details"
@@ -34,6 +53,9 @@
 <% } else if (props.navigationPackage?.options.type === 'tabs') { %>
 	import { NavigationContainer } from "@react-navigation/native";
 	import { createStackNavigator } from "@react-navigation/stack";
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+        import { useUnistyles } from 'react-native-unistyles';
+    <% } %>
 
 	import Modal from "../screens/modal";
 	import TabNavigator from "./tab-navigator";
@@ -46,9 +68,25 @@
 	const Stack = createStackNavigator<RootStackParamList>();
 
 	export default function RootStack() {
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+        const { theme } = useUnistyles();
+        <% } %>
 		return (
 			<NavigationContainer>
-				<Stack.Navigator initialRouteName="TabNavigator">
+				<Stack.Navigator
+                    initialRouteName="TabNavigator"
+                    <% if (props.stylingPackage?.name === "unistyles") { %>
+                        screenOptions={{
+                            headerStyle: {
+                                backgroundColor: theme.colors.background,
+                            },
+                            headerTitleStyle: {
+                                color: theme.colors.typography,
+                            },
+                            headerTintColor: theme.colors.typography,
+                        }}
+                    <% } %>
+                >
 					<Stack.Screen
 						name="TabNavigator"
 						component={TabNavigator}
@@ -66,22 +104,41 @@
 	<% } else if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
 		import { NavigationContainer } from "@react-navigation/native";
 		import { createStackNavigator } from '@react-navigation/stack';
-	
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+            import { useUnistyles } from 'react-native-unistyles';
+        <% } %>
+
 		import Modal from "../screens/modal";
 		import DrawerNavigator from "./drawer-navigator";
-	
+
 		export type RootStackParamList = {
 			DrawerNavigator: undefined;
 			Modal: undefined;
       TabNavigator: undefined;
 		};
-	
+
 		const Stack = createStackNavigator<RootStackParamList>();
-	
+
 		export default function RootStack() {
+            <% if (props.stylingPackage?.name === "unistyles") { %>
+            const { theme } = useUnistyles();
+            <% } %>
 			return (
 				<NavigationContainer>
-					<Stack.Navigator initialRouteName="DrawerNavigator">
+					<Stack.Navigator
+                        initialRouteName="DrawerNavigator"
+                        <% if (props.stylingPackage?.name === "unistyles") { %>
+                        screenOptions={{
+                            headerStyle: {
+                                backgroundColor: theme.colors.background,
+                            },
+                            headerTitleStyle: {
+                                color: theme.colors.typography,
+                            },
+                            headerTintColor: theme.colors.typography,
+                        }}
+                        <% } %>
+                    >
 						<Stack.Screen
 							name="DrawerNavigator"
 							component={DrawerNavigator}
@@ -96,4 +153,4 @@
 				</NavigationContainer>
 			);
 		}
-<% } %>
+<% } %>

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

@@ -1,6 +1,8 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StackScreenProps } from '@react-navigation/stack';
-
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { useUnistyles } from 'react-native-unistyles';
+<% } %>
 import { RootStackParamList } from '.';
 import { HeaderButton } from '../components/HeaderButton';
 import { TabBarIcon } from '../components/TabBarIcon';
@@ -12,10 +14,26 @@ const Tab = createBottomTabNavigator();
 type Props = StackScreenProps<RootStackParamList, 'TabNavigator'>;
 
 export default function TabLayout({ navigation }: Props) {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+  const { theme } = useUnistyles();
+  <% } %>
   return (
     <Tab.Navigator
-      screenOptions={{
-        tabBarActiveTintColor: 'black',
+        screenOptions={{
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+            headerStyle: {
+                backgroundColor: theme.colors.background,
+            },
+            headerTitleStyle: {
+                color: theme.colors.typography,
+            },
+            tabBarActiveTintColor: theme.colors.astral,
+            tabBarStyle: {
+                backgroundColor: theme.colors.background,
+            },
+        <% } else { %>
+            tabBarActiveTintColor: 'black',
+        <% } %>
 	    <% if (props.navigationPackage?.options.type === 'drawer + tabs') { %>
         headerShown: false,
       <% } %>

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

@@ -1,6 +1,11 @@
 import { RouteProp, useRoute } 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';
+<% } %>
 
 import { RootStackParamList } from '../navigation';
 
@@ -19,9 +24,20 @@ export default function Details() {
   );
 }
 
+<% 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,
-  },
+    container: {
+        flex: 1,
+        padding: 24,
+    },
 });
+<% } %>

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

@@ -1,7 +1,12 @@
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 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';
@@ -34,10 +39,20 @@ export default function Overview() {
   );
 }
 
-
+<% 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,
-  },
+    container: {
+        flex: 1,
+        padding: 24,
+    },
 });
+<% } %>

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

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

@@ -1,18 +1,40 @@
 import { forwardRef } from 'react';
 import { Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
-import { useStyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 
 type ButtonProps = {
-  title?: string;
+    title?: string;
 } & TouchableOpacityProps;
 
-
 export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps }, ref) => {
-  const { theme } = useStyles();
-
-  return (
-    <TouchableOpacity ref={ref} {...touchableProps} style={[theme.components.button, touchableProps.style]}>
-      <Text style={theme.components.buttonText}>{title}</Text>
+    return (
+    <TouchableOpacity ref={ref} {...touchableProps} style={[styles.button, touchableProps.style]}>
+        <Text style={styles.buttonText}>{title}</Text>
     </TouchableOpacity>
-  );
+    );
 });
+
+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

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