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

package/README.md

@@ -74,7 +74,7 @@ Each project is generated based on the results of the CLI, on a per-file basis.
 | NativeWind         | UI Framework        | v4.1    | Tailwind CSS for React Native                  |
 | Restyle            | UI Framework        | v2      | Theme-based styling library for React Native   |
 | Tamagui            | UI Framework        | v1      | Universal UI with a smart optimizing compiler  |
-| Unistyles          | UI Framework        | v2      | Superset of StyleSheet                         |
+| Unistyles          | UI Framework        | v3      | Superset of StyleSheet                         |
 | Safe Area Context  | Safe Area Library   | v4      | Safe area support                              |
 | React Native Web   | Web Support         | v0.19   | React Native for Web                           |
 | Firebase           | Backend and Auth    | v10     | Cloud-hosted NoSQL database from Google        |

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

@@ -1,3 +1,6 @@
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import './unistyles';
+<% } %>
 import { ScreenContent } from 'components/ScreenContent';
 import { StatusBar } from 'expo-status-bar';
 
@@ -29,7 +32,7 @@ import { StatusBar } from 'expo-status-bar';
 <% } %>
 
 <% if (props.stylingPackage?.name === "restyle") {%>
-  export default function App() {   
+  export default function App() {
     return (
       <ThemeProvider theme={theme}>
         <ScreenContent title="Home" path="App.tsx">

package/build/templates/base/app.json.ejs

@@ -3,6 +3,9 @@
     "name": "<%= props.projectName %>",
     "slug": "<%= props.projectName %>",
     "version": "1.0.0",
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+        "newArchEnabled": true,
+    <% } %>
     <% if (props.navigationPackage?.name === 'expo-router') { %>
       "scheme": "<%= props.projectName %>",
       "web": {
@@ -58,7 +61,7 @@
     <% } %>
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    <% if (props.stylingPackage?.name === "nativewindui") { %>
+    <% if (props.stylingPackage?.name === "nativewindui" || props.stylingPackage?.name === "unistyles") { %>
     "userInterfaceStyle": "automatic",
      <% } else { %>
      "userInterfaceStyle": "light",
@@ -81,4 +84,4 @@
       }
     }
   }
-}
+}

package/build/templates/base/babel.config.js.ejs

@@ -1,7 +1,7 @@
 module.exports = function(api) {
   api.cache(true);
   let plugins = [];
-  
+
   <% if (props.stylingPackage?.name === "tamagui") { %>
     plugins.push([
       '@tamagui/babel-plugin',
@@ -12,6 +12,16 @@ module.exports = function(api) {
     ]);
   <% } %>
 
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+        plugins.push([
+            'react-native-unistyles/plugin',
+            {
+                autoProcessRoot: 'app',
+                autoProcessImports: ['~/components']
+            }
+        ]);
+    <% } %>
+
   <% if (props.navigationPackage?.options.type === "drawer + tabs") { %>
     plugins.push('react-native-reanimated/plugin');
   <% } %>

package/build/templates/base/package.json.ejs

@@ -1,9 +1,11 @@
 {
   "name": "<%= props.projectName %>",
   "version": "1.0.0",
-  <% if (props.navigationPackage?.name === "expo-router") { %>
-  "main": "expo-router/entry",
-  <% } %>
+<% if (props.navigationPackage?.name === "expo-router" && props.stylingPackage?.name === 'unistyles') { %>
+    "main": "index.js",
+<% } else if (props.navigationPackage?.name === "expo-router") { %>
+    "main": "expo-router/entry",
+<% } %>
   "scripts": {
   <% if (props.flags?.eas) { %>
     "start": "expo start --dev-client",
@@ -71,22 +73,25 @@
     <% if (props.stateManagementPackage?.name === "zustand") { %>
       "zustand": "^4.5.1",
     <% } %>
-    
+
     <% if (props.stylingPackage?.name === "restyle") { %>
       "@shopify/restyle": "^2.4.2",
     <% } %>
 
     <% if (props.stylingPackage?.name === "tamagui") { %>
-      "tamagui": "1.74.8",
-      "@tamagui/font-inter": "1.74.8",
-      "@tamagui/shorthands": "1.74.8",
-      "@tamagui/themes": "1.74.8",
-      "@tamagui/react-native-media-driver": "1.74.8",
-      "expo-font": "~12.0.5",
+      "@tamagui/font-inter": "^1.125.8",
+      "@tamagui/react-native-media-driver": "^1.125.8",
+      "@tamagui/shorthands": "^1.125.8",
+      "@tamagui/themes": "^1.125.8",
+      "tamagui": "^1.125.8",
+      "@tamagui/animations-react-native": "^1.125.8",
+      "expo-font": "~13.0.3",
     <% } %>
 
     <% if (props.stylingPackage?.name === "unistyles") { %>
-      "react-native-unistyles": "^2.1.1",
+        "react-native-unistyles": "3.0.0-nightly-20250220",
+        "react-native-nitro-modules": "0.22.1",
+        "react-native-edge-to-edge": "1.4.3",
     <% } %>
 
     <% if (props.navigationPackage?.type === "navigation") { %>
@@ -121,12 +126,12 @@
       "@react-navigation/drawer": "^7.0.0",
       "@react-navigation/bottom-tabs": "^7.0.5",
     <% } %>
-    
+
     <% if (props.navigationPackage?.name === "expo-router") { %>
       "@expo/vector-icons": "^14.0.0",
       "expo-linking": "~6.3.1",
-      "expo-router": "~4.0.6", 
-      "expo-constants": "~16.0.1",     
+      "expo-router": "~4.0.6",
+      "expo-constants": "~16.0.1",
       "expo-system-ui": "~3.0.4",
       "expo-web-browser": "~13.0.3",
       "react-dom": "18.3.1",
@@ -142,15 +147,15 @@
 	<% if (props.authenticationPackage?.name === "firebase") { %>
 	  "firebase": "^10.5.2",
 	<% } %>
-  
+
   <% if (props.internalizationPackage?.name === "i18next") { %>
     "i18next": "^23.7.20",
     "react-i18next": "^14.0.1",
     "expo-localization": "~14.8.3",
-  <% } %> 
+  <% } %>
   <% if (props.flags?.eas || props.stylingPackage?.name === "nativewindui") { %>
     "expo-dev-client": "~5.0.4",
-    "expo-dev-launcher": "^5.0.17",      
+    "expo-dev-launcher": "^5.0.17",
   <% } %>
 
     "expo": "^52.0.7",
@@ -175,7 +180,7 @@
       "prettier-plugin-tailwindcss": "^0.5.11",
     <% } %>
     <% if (props.stylingPackage?.name === "tamagui") { %>
-      "@tamagui/babel-plugin": "1.74.8",
+      "@tamagui/babel-plugin": "^1.125.8",
     <% } %>
     "typescript": "~5.3.3"
   },

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

@@ -1,13 +1,25 @@
 import { Tabs } from 'expo-router';
 import { TabBarIcon } from '~/components/TabBarIcon';
-
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { useUnistyles } from "react-native-unistyles";
+<% } %>
 
 export default function TabLayout() {
+<% if (props.stylingPackage?.name === "unistyles") { %>
+  const { theme } = useUnistyles();
+<% } %>
   return (
     <Tabs
       screenOptions={{
         headerShown: false,
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+        tabBarActiveTintColor: theme.colors.astral,
+        tabBarStyle: {
+          backgroundColor: theme.colors.background,
+        }
+        <% } else { %>
         tabBarActiveTintColor: 'black',
+        <% } %>
       }}>
       <Tabs.Screen
         name="index"

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

@@ -1,35 +1,65 @@
 import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { Link } from 'expo-router';
 import { Drawer } from 'expo-router/drawer';
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { useUnistyles } from "react-native-unistyles";
+<% } %>
 
 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>
-);
+const DrawerLayout = () => {
+<% if (props.stylingPackage?.name === "unistyles") { %>
+    const { theme } = useUnistyles();
+<% } %>
+
+    return (
+        <% if (props.stylingPackage?.name === "unistyles") { %>
+        <Drawer
+            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>
+        <% } %>
+            <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;

package/build/templates/packages/expo-router/drawer/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/drawer/app/+not-found.tsx.ejs

@@ -4,7 +4,7 @@ import { Link, Stack } from 'expo-router';
 
   import { Container } from '~/components/Container';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+  import { StyleSheet } from 'react-native-unistyles'
   import { Text } from 'react-native';
 
   import { Container } from '~/components/Container';
@@ -24,8 +24,6 @@ import { Link, Stack } from 'expo-router';
 export default function NotFoundScreen() {
 <% if (props.stylingPackage?.name === "restyle") { %>
   const styles = useStyles();
-<% } else if (props.stylingPackage?.name === "unistyles") {%>
-  const { styles } = useStyles(stylesheet);
 <% } %>
 
   return (
@@ -84,10 +82,11 @@ export default function NotFoundScreen() {
     linkText: `text-base text-[#2e78b7]`,
 	};
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  const stylesheet = createStyleSheet((theme) => ({
+  const styles = StyleSheet.create((theme) => ({
     title: {
       fontSize: 20,
       fontWeight: 'bold',
+      color: theme.colors.typography,
     },
     link: {
       marginTop: 16,
@@ -120,4 +119,4 @@ export default function NotFoundScreen() {
       paddingVertical: theme.spacing.m_16,
     },
   }));
-<% } %>
+<% } %>

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

@@ -4,9 +4,6 @@
   import '../global.css';
   import 'expo-dev-client';
 <% } %>
-<% if (props.stylingPackage?.name === "unistyles") { %>
-import '../unistyles';
-<% } %>
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import '../translation';
@@ -27,10 +24,14 @@ import { Stack } from 'expo-router';
 	SplashScreen.preventAutoHideAsync();
 <% }  else if (props.stylingPackage?.name === "restyle") { %>
   import { ThemeProvider } from '@shopify/restyle';
-  
+
   import { theme } from '../theme';
 <% } %>
 
+<% if (props.stylingPackage?.name === "unistyles") { %>
+    import { useUnistyles } from "react-native-unistyles";
+<% } %>
+
 <% if (props.analyticsPackage?.name === "vexo-analytics") { %>
   import { vexo } from 'vexo-analytics';
 
@@ -57,6 +58,9 @@ export default function RootLayout() {
 
     if (!loaded) return null;
   <% } %>
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { theme } = useUnistyles();
+  <% } %>
 
   	return (
     	<% if (props.stylingPackage?.name === "tamagui") { %>
@@ -65,7 +69,28 @@ export default function RootLayout() {
     		<ThemeProvider theme={theme}>
     	<% } %>
         <GestureHandlerRootView style={{ flex: 1 }}>
+         <% if (props.stylingPackage?.name === "unistyles") { %>
+            <Stack
+                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  { %>
           <Stack>
+        <% } %>
             <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
             <Stack.Screen name="modal" options={{ title: 'Modal', presentation: 'modal' }} />
           </Stack>
@@ -76,4 +101,4 @@ export default function RootLayout() {
         </ThemeProvider>
       <% } %>
   );
-}
+}

package/build/templates/packages/expo-router/index.js.ejs

@@ -0,0 +1,4 @@
+<% if (props.stylingPackage?.name === 'unistyles') { %>
+import 'expo-router/entry';
+import './unistyles';
+<% } %>

package/build/templates/packages/expo-router/stack/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/stack/app/+not-found.tsx.ejs

@@ -4,7 +4,7 @@ import { Link, Stack } from 'expo-router';
 
   import { Container } from '~/components/Container';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  import { createStyleSheet, useStyles } from 'react-native-unistyles'
+  import { StyleSheet } from 'react-native-unistyles'
   import { Text } from 'react-native';
 
   import { Container } from '~/components/Container';
@@ -26,10 +26,6 @@ export default function NotFoundScreen() {
   const styles = useStyles();
 <% } %>
 
-<% if (props.stylingPackage?.name === "unistyles") {%>
-  const { styles } = useStyles(stylesheet)
-<% } %>
-
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -86,10 +82,11 @@ export default function NotFoundScreen() {
     linkText: `text-base text-[#2e78b7]`,
 	};
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
-  const stylesheet = createStyleSheet({
+const styles = StyleSheet.create((theme) => ({
     title: {
       fontSize: 20,
       fontWeight: 'bold',
+      color: theme.colors.typography,
     },
     link: {
       marginTop: 16,
@@ -97,11 +94,11 @@ export default function NotFoundScreen() {
     },
     linkText: {
       fontSize: 14,
-      color: '#2e78b7',
+      color: theme.colors.astral
     },
-  });
+}));
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
-  const styles = StyleSheet.create({
+const styles = StyleSheet.create({
     title: {
       fontSize: 20,
       fontWeight: 'bold',
@@ -114,7 +111,7 @@ export default function NotFoundScreen() {
       fontSize: 14,
       color: '#2e78b7',
     },
-  });
+});
 <% } else if (props.stylingPackage?.name === "restyle") { %>
   const useStyles = makeStyles((theme) => ({
     link: {
@@ -122,4 +119,4 @@ export default function NotFoundScreen() {
       paddingVertical: theme.spacing.m_16,
     },
   }));
-<% } %>
+<% } %>

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

@@ -3,7 +3,7 @@
 <% } %>
 
 <% if (props.stylingPackage?.name === "unistyles") { %>
-import '../unistyles';
+  import { useUnistyles } from "react-native-unistyles";
 <% } %>
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import '../translation';
@@ -29,7 +29,9 @@ import '../unistyles';
 <% } %>
 
 export default function Layout() {
-
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { theme } = useUnistyles();
+  <% } %>
   <% if (props.stylingPackage?.name === "tamagui") { %>
   	const [loaded] = useFonts({
 			Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
@@ -51,7 +53,21 @@ export default function Layout() {
 		<% } 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 />
+        <% } %>
 		<% if (props.stylingPackage?.name === "tamagui") { %>
 			</TamaguiProvider>
 		<% } else if (props.stylingPackage?.name === "restyle") { %>

package/build/templates/packages/expo-router/stack/app/index.tsx.ejs

@@ -1,5 +1,9 @@
 import { Stack, Link } from 'expo-router';
 
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { StyleSheet } from 'react-native-unistyles';
+<% } %>
+
 import { Button } from '~/components/Button';
 import { Container } from '~/components/Container';
 import { ScreenContent } from '~/components/ScreenContent';
@@ -19,9 +23,21 @@ export default function Home() {
         <% } %>
         </ScreenContent>
         <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
-          <Button title="Show Details" />
+          <% if (props.stylingPackage?.name === "unistyles") { %>
+              <Button title="Show Details" style={styles.button} />
+          <% } else { %>
+              <Button title="Show Details" />
+          <% } %>
         </Link>
       </Container>
     </>
   );
-}
+}
+
+<% if (props.stylingPackage?.name === "unistyles") { %>
+const styles = StyleSheet.create((theme) => ({
+    button: {
+        marginHorizontal: theme.margins.xl,
+    },
+}));
+<% } %>

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

@@ -1,14 +1,31 @@
 import { Link, Tabs } from "expo-router";
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { useUnistyles } from "react-native-unistyles";
+<% } %>
 import { HeaderButton } from '../../components/HeaderButton';
 import { TabBarIcon } from '../../components/TabBarIcon';
 
-
-
 export default function TabLayout() {
+<% if (props.stylingPackage?.name === "unistyles") { %>
+  const { theme } = useUnistyles();
+<% } %>
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: 'black',
+        <% 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',
+        <% } %>
       }}>
       <Tabs.Screen
         name='index'