create-expo-stack 2.21.0-next.7a731e6 → 2.21.1

package/README.md

@@ -59,24 +59,24 @@ Each project is generated based on the results of the CLI, on a per-file basis.
 
 | Library            | Category            | Version | Description                                    |
 | ------------------ | ------------------- | ------- | ---------------------------------------------- |
-| React Native       | Mobile Framework    | v0.81   | The best cross-platform mobile framework       |
-| React              | UI Framework        | v19.1   | The most popular UI framework in the world     |
-| TypeScript         | Language            | v5.9    | Static typechecking                            |
-| React Navigation   | Navigation          | v7.1    | Performant and consistent navigation framework |
-| Expo               | SDK                 | v54     | Opionated framework for building RN apps       |
-| Expo Linking       | URL Handling        | v8      | Open your app via a URL                        |
-| Expo Router        | Navigation          | v6      | File-based routing in React-Native             |
-| Expo Status Bar    | Status Bar Library  | v3      | Status bar support                             |
-| Expo System UI     | System UI Library   | v6      | System UI support                              |
-| Expo Web Browser   | Web Browser Library | v15     | Open links in the browser                      |
-| NativeWind         | UI Framework        | v5      | Tailwind CSS for React Native                  |
-| Tailwind CSS       | CSS Framework       | v4.1    | Utility-first CSS framework                    |
-| React Native CSS   | CSS Engine          | latest  | CSS support for React Native                   |
+| React Native       | Mobile Framework    | v0.79   | The best cross-platform mobile framework       |
+| React              | UI Framework        | v19     | The most popular UI framework in the world     |
+| TypeScript         | Language            | v5      | Static typechecking                            |
+| React Navigation   | Navigation          | v7      | Performant and consistent navigation framework |
+| Expo               | SDK                 | v53     | Allows (optional) Expo modules                 |
+| Expo Font          | Custom Fonts        | v13     | Import custom fonts                            |
+| Expo Linking       | URL Handling        | v7      | Open your app via a URL                        |
+| Expo Router        | Navigation          | v5      | File-based routing in React-Native             |
+| Expo Splash Screen | Splash Screen       | v0.27   | Custom splash screen                           |
+| Expo Status Bar    | Status Bar Library  | v2      | Status bar support                             |
+| Expo System UI     | System UI Library   | v5      | System UI support                              |
+| Expo Web Browser   | Web Browser Library | v14     | Open links in the browser                      |
+| NativeWind         | UI Framework        | v4.1    | Tailwind CSS for React Native                  |
 | Unistyles          | UI Framework        | v3      | Superset of StyleSheet                         |
-| Safe Area Context  | Safe Area Library   | v5.6    | Safe area support                              |
-| React Native Web   | Web Support         | v0.21   | React Native for Web                           |
-| Firebase           | Backend and Auth    | v10.5   | Cloud-hosted NoSQL database from Google        |
-| Supabase           | Backend and Auth    | v2.38   | Open source Firebase alternative               |
+| Safe Area Context  | Safe Area Library   | v5      | Safe area support                              |
+| React Native Web   | Web Support         | v0.20   | React Native for Web                           |
+| Firebase           | Backend and Auth    | v10     | Cloud-hosted NoSQL database from Google        |
+| Supabase           | Backend and Auth    | v2      | Open source Firebase alternative               |
 
 ## Reporting Bugs & Feedback
 

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

@@ -11,6 +11,7 @@ import { StatusBar } from 'expo-status-bar';
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import './global.css';
+  import { SafeAreaProvider } from 'react-native-safe-area-context';
 <% } else if (props.stylingPackage?.name === "nativewinui") { %>
   import './global.css';
   import 'expo-dev-client';
@@ -24,14 +25,21 @@ import { StatusBar } from 'expo-status-bar';
 
 export default function App() {
   return (
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <SafeAreaProvider>
+    <% } else { %>
     <>
+    <% } %>
       <ScreenContent title="Home" path="App.tsx">
       <% if (props.internalizationPackage?.name === "i18next") { %>
         <InternalizationExample />
       <% } %>
       </ScreenContent>
       <StatusBar style="auto" />
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+    </SafeAreaProvider>
+    <% } else { %>
     </>
+    <% } %>
   );
 }
-

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

@@ -15,7 +15,14 @@ module.exports = function(api) {
   plugins.push('react-native-worklets/plugin');
 
   return {
-    presets: ['babel-preset-expo'],
+    <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
+      presets: [
+        ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+        'nativewind/babel',
+      ],
+    <% } else { %>
+      presets: ['babel-preset-expo'],
+    <% } %>
     plugins,
   };
 };

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

@@ -38,17 +38,6 @@ const styles = StyleSheet.create({
     lineHeight: 24,
     textAlign: 'center',
   },
-  helpContainer: {
-    alignItems: 'center',
-    marginHorizontal: 20,
-    marginTop: 15,
-  },
-  helpLink: {
-    paddingVertical: 15,
-  },
-  helpLinkText: {
-    textAlign: 'center',
-  },
   homeScreenFilename: {
     marginVertical: 7,
   },

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

@@ -31,10 +31,7 @@
   },
   "dependencies": {
     <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
-      "nativewind": "preview",
-      "react-native-css": "latest",
-      "postcss": "^8.5.6",
-      "@tailwindcss/postcss": "^4.1.13",
+      "nativewind": "latest",
     <% } %>
     <% if (props.stylingPackage?.name === "nativewindui") { %>
       "@shopify/flash-list": "2.0.2",
@@ -146,8 +143,8 @@
     "eslint-config-prettier": "^10.1.2",
     "prettier": "^3.2.5",
     <% if (props.stylingPackage?.name === "nativewind" || props.stylingPackage?.name === "nativewindui") { %>
-      "tailwindcss": "^4.1.13",
-      "prettier-plugin-tailwindcss": "^0.6.14",
+      "tailwindcss": "^3.4.0",
+      "prettier-plugin-tailwindcss": "^0.5.11",
     <% } %>
     "typescript": "~5.9.2"
   },
@@ -157,20 +154,5 @@
   <% if  (props.packageManager === "yarn"){ %>
     "packageManager": "yarn@4.9.4",
   <% } %>
-  <% if (props.stylingPackage?.name === "nativewind" && props.packageManager === "yarn") { %>
-    "resolutions": {
-      "lightningcss": "1.30.1"
-    },
-  <% } else if (props.stylingPackage?.name === "nativewind" && props.packageManager === "pnpm") { %>
-    "pnpm": {
-      "overrides": {
-        "lightningcss": "1.30.1"
-      }
-    },
-  <% } else if (props.stylingPackage?.name === "nativewind") { %>
-    "overrides": {
-      "lightningcss": "1.30.1"
-    },
-  <% } %>
   "private": true
 }

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

@@ -1,5 +1,5 @@
 import { Tabs } from 'expo-router';
-import { TabBarIcon } from '~/components/TabBarIcon';
+import { TabBarIcon } from '@/components/TabBarIcon';
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import { useUnistyles } from "react-native-unistyles";
 <% } %>

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

@@ -1,7 +1,7 @@
 import { Stack } from 'expo-router';
 
-import { Container } from '~/components/Container';
-import { ScreenContent } from '~/components/ScreenContent';
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Home() {
   return (

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

@@ -1,7 +1,7 @@
 import { Stack } from 'expo-router';
 
-import { Container } from '~/components/Container';
-import { ScreenContent } from '~/components/ScreenContent';
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Home() {
   return (

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

@@ -1,7 +1,7 @@
 import { Stack } from 'expo-router';
 
-import { Container } from '~/components/Container';
-import { ScreenContent } from '~/components/ScreenContent';
+import { Container } from '@/components/Container';
+import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Home() {
   return (

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

@@ -2,16 +2,16 @@ import { Link, Stack } from 'expo-router';
 <% if (props.stylingPackage?.name === "nativewind") {%>
   import { Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   import { StyleSheet } from 'react-native-unistyles'
   import { Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } %>
 
 export default function NotFoundScreen() {

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

@@ -1,5 +1,6 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import '../global.css';
+  import { SafeAreaProvider } from 'react-native-safe-area-context';
 <% } else if (props.stylingPackage?.name === "nativewinui") { %>
   import '../global.css';
   import 'expo-dev-client';
@@ -35,6 +36,9 @@ export default function RootLayout() {
 
   return (
         <GestureHandlerRootView style={{ flex: 1 }}>
+        <% if (props.stylingPackage?.name === "nativewind") { %>
+          <SafeAreaProvider>
+        <% } %>
          <% if (props.stylingPackage?.name === "unistyles") { %>
             <Stack
                 screenOptions={{
@@ -60,6 +64,9 @@ export default function RootLayout() {
             <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
             <Stack.Screen name="modal" options={{ title: 'Modal', presentation: 'modal' }} />
           </Stack>
+        <% if (props.stylingPackage?.name === "nativewind") { %>
+          </SafeAreaProvider>
+        <% } %>
         </GestureHandlerRootView>
   );
 }

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

@@ -1,7 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import { Platform } from 'react-native';
 
-import { ScreenContent } from '~/components/ScreenContent';
+import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import { InternalizationExample } from 'components/InternalizationExample';

package/build/templates/packages/expo-router/metro.config.js.ejs

@@ -1,7 +1,7 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 <% if (["nativewind", "nativewindui"].includes(props.stylingPackage?.name)) { %>
-  const { withNativewind } = require("nativewind/metro");
+  const { withNativeWind } = require("nativewind/metro");
 <% } %>
 
 /** @type {import('expo/metro-config').MetroConfig} */
@@ -9,9 +9,9 @@ const { getDefaultConfig } = require('expo/metro-config');
 const config = getDefaultConfig(__dirname);
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  module.exports = withNativewind(config);
+  module.exports = withNativeWind(config, { input: "./global.css" });
 <% } else if (props.stylingPackage?.name === "nativewindui") { %>
-  module.exports = withNativewind(config, { inlineRem: 16 });
+  module.exports = withNativeWind(config, { input: "./global.css", inlineRem: 16 });
 <% } else { %>
   module.exports = config;
 <% } %>

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

@@ -2,13 +2,16 @@ import { Link, Stack } from 'expo-router';
 <% if (props.stylingPackage?.name === "nativewind") {%>
   import { Text, View } from 'react-native';
 
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   import { StyleSheet } from 'react-native-unistyles'
   import { Text, View } from 'react-native';
 
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from 'react-native';
 
+  import { Container } from '@/components/Container';
 <% } %>
 
 export default function NotFoundScreen() {
@@ -17,22 +20,22 @@ export default function NotFoundScreen() {
     <% if (props.stylingPackage?.name === "nativewind") { %>
       <View className={styles.container}>
         <Stack.Screen options={{ title: "Oops!" }} />
-        <View className={styles.contentContainer}>
+        <Container>
           <Text className={styles.title}>{"This screen doesn't exist."}</Text>
           <Link href="/" className={styles.link}>
             <Text className={styles.linkText}>Go to home screen!</Text>
           </Link>
-        </View>
+        </Container>
       </View>
     <% } else { %>
       <View style={styles.container}>
         <Stack.Screen options={{ title: "Oops!" }} />
-        <View style={styles.contentContainer}>
+        <Container>
           <Text style={styles.title}>{"This screen doesn't exist."}</Text>
           <Link href="/" style={styles.link}>
             <Text style={styles.linkText}>Go to home screen!</Text>
           </Link>
-        </View>
+        </Container>
       </View>
     <% } %>
   );
@@ -41,7 +44,6 @@ export default function NotFoundScreen() {
 <% if (props.stylingPackage?.name === "nativewind") { %>
   const styles = {
     container: `flex flex-1 bg-white`,
-    contentContainer: `flex flex-1 m-6`,
     title: `text-xl font-bold`,
     link: `mt-4 pt-4`,
     linkText: `text-base text-[#2e78b7]`,
@@ -52,10 +54,6 @@ const styles = StyleSheet.create((theme) => ({
       flex: 1,
       backgroundColor: 'white',
     },
-    contentContainer: {
-      flex: 1,
-      margin: 24,
-    },
     title: {
       fontSize: 20,
       fontWeight: 'bold',
@@ -76,10 +74,6 @@ const styles = StyleSheet.create({
       flex: 1,
       backgroundColor: 'white',
     },
-    contentContainer: {
-      flex: 1,
-      margin: 24,
-    },
     title: {
       fontSize: 20,
       fontWeight: 'bold',

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

@@ -1,5 +1,6 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import '../global.css';
+  import { SafeAreaProvider } from 'react-native-safe-area-context';
 <% } %>
 
 <% if (props.stylingPackage?.name === "unistyles") { %>
@@ -35,10 +36,9 @@ export default function Layout() {
         }}
       />
     <% } else if (props.stylingPackage?.name === "nativewind") { %>
-      <Stack>
-        <Stack.Screen name="index" options={{ title: 'Home' }} />
-        <Stack.Screen name="details" options={{ title: 'Details' }} />
-      </Stack>
+      <SafeAreaProvider>
+        <Stack />
+      </SafeAreaProvider>
     <% } else { %>
       <Stack />
     <% } %>

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

@@ -3,12 +3,12 @@ import { StyleSheet, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
 import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
+<% } else { %>
+import { View } from 'react-native';
 <% } %>
 import { Stack, useLocalSearchParams } from 'expo-router';
 
-<% if (props.stylingPackage?.name !== "nativewind") { %>
 import { Container } from '@/components/Container';
-<% } %>
 import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Details() {
@@ -16,22 +16,23 @@ export default function Details() {
 
   return (
     <% if (props.stylingPackage?.name === "nativewind") { %>
-      <>
-        <Stack.Screen options={{ title: 'Details' }} />
-        <ScreenContent path="screens/details.tsx" title={`Showing details for user ${name}`} />
-      </>
+      <View className={styles.container}>
     <% } else { %>
       <View style={styles.container}>
-        <Stack.Screen options={{ title: 'Details' }} />
-        <Container>
-          <ScreenContent path="screens/details.tsx" title={`Showing details for user ${name}`} />
-        </Container>
-      </View>
     <% } %>
+      <Stack.Screen options={{ title: 'Details' }} />
+      <Container>
+        <ScreenContent path="screens/details.tsx" title={`Showing details for user ${name}`} />
+      </Container>
+    </View>
   );
 }
 
-<% if (props.stylingPackage?.name === "stylesheet") { %>
+<% if (props.stylingPackage?.name === "nativewind") { %>
+const styles = {
+  container: "flex flex-1 bg-white",
+}
+<% } else if (props.stylingPackage?.name === "stylesheet") { %>
 const styles = StyleSheet.create({
   container: {
     flex: 1,

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

@@ -1,20 +1,15 @@
+import { Stack, Link } from 'expo-router';
 <% if (props.stylingPackage?.name === "stylesheet") { %>
 import { StyleSheet, View } from 'react-native';
-import { Stack, Link } from 'expo-router';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
 import { StyleSheet } from 'react-native-unistyles';
-import { Stack, Link } from 'expo-router';
 import { View } from 'react-native';
 <% } else { %>
 import { View } from 'react-native';
-import { router } from 'expo-router';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 <% } %>
 
 import { Button } from '@/components/Button';
-<% if (props.stylingPackage?.name !== "nativewind") { %>
 import { Container } from '@/components/Container';
-<% } %>
 import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
@@ -22,54 +17,34 @@ import { ScreenContent } from '@/components/ScreenContent';
 <% } %>
 
 export default function Home() {
-  <% if (props.stylingPackage?.name === "nativewind") { %>
-    const insets = useSafeAreaInsets();
-  <% } %>
   return (
     <% if (props.stylingPackage?.name === "nativewind") { %>
-      <View className="flex-1 px-4 bg-white">
-      <% if (props.internalizationPackage?.name === "i18next") { %>
+      <View className={styles.container}>
+    <% } else { %>
+      <View style={styles.container}>
+    <% } %>
+      <Stack.Screen options={{ title: 'Home' }} />
+      <Container>
         <ScreenContent path="app/index.tsx" title="Home">
+        <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
+        <% } %>
         </ScreenContent>
-      <% } else { %>
-      <ScreenContent path="app/index.tsx" title="Home" />
-      <% } %>
-      <View className={styles.buttonWrapper} style={{ paddingBottom: insets.bottom }}>
-        <Button
-          title="Show Details"
-          onPress={() => router.push({ pathname: '/details', params: { name: 'Dan' } })} 
-        />
-      </View>
-    </View>
-    <% } else { %>
-      <View style={styles.container}>
-        <Stack.Screen options={{ title: 'Home' }} />
-        <Container>
-          <% if (props.internalizationPackage?.name === "i18next") { %>
-            <ScreenContent path="app/index.tsx" title="Home">
-              <InternalizationExample />
-            </ScreenContent>
+        <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
+          <% if (props.stylingPackage?.name === "unistyles") { %>
+              <Button title="Show Details" style={styles.button} />
           <% } else { %>
-            <ScreenContent path="app/index.tsx" title="Home" />
+              <Button title="Show Details" />
           <% } %>
-          <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
-            <% if (props.stylingPackage?.name === "unistyles") { %>
-                <Button title="Show Details" style={styles.button} />
-            <% } else { %>
-                <Button title="Show Details" />
-            <% } %>
-          </Link>
-        </Container>
-      </View>
-    <% } %>
+        </Link>
+      </Container>
+    </View>
   );
 }
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
 const styles = {
-  buttonWrapper: "w-full",
-  container: "flex flex-1 bg-white px-4",
+  container: "flex flex-1 bg-white",
 }
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
 const styles = StyleSheet.create({

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

@@ -6,7 +6,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { StyleSheet, View } from 'react-native';
 <% } %>
 
-import { ScreenContent } from '~/components/ScreenContent';
+import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Home() {
   return (

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

@@ -6,7 +6,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { StyleSheet, View } from 'react-native';
 <% } %>
 
-import { ScreenContent } from '~/components/ScreenContent';
+import { ScreenContent } from '@/components/ScreenContent';
 
 export default function Home() {
   return (

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

@@ -1,5 +1,6 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import '../global.css';
+  import { SafeAreaProvider } from 'react-native-safe-area-context';
 <% } else if (props.stylingPackage?.name === "nativewinui") { %>
   import '../global.css';
   import 'expo-dev-client';
@@ -28,6 +29,9 @@ export default function RootLayout() {
   <% } %>
 
   return (
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+    <SafeAreaProvider>
+    <% } %>
         <% if (props.stylingPackage?.name === "unistyles") { %>
             <Stack
                 screenOptions={{
@@ -46,5 +50,8 @@ export default function RootLayout() {
 		<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
 		<Stack.Screen name="modal" options={{ presentation: "modal" }} />
 	</Stack>
+    <% if (props.stylingPackage?.name === "nativewind") { %>
+    </SafeAreaProvider>
+    <% } %>
   );
 }

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

@@ -1,7 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import { Platform } from 'react-native';
 
-import { ScreenContent } from '~/components/ScreenContent';
+import { ScreenContent } from '@/components/ScreenContent';
 
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import { InternalizationExample } from 'components/InternalizationExample';

package/build/templates/packages/firebase/metro.config.js.ejs

@@ -1,14 +1,14 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  const { withNativewind } = require("nativewind/metro");
+  const { withNativeWind } = require("nativewind/metro");
 <% } %>
 
 /** @type {import('expo/metro-config').MetroConfig} */
+// eslint-disable-next-line no-undef
 const config = getDefaultConfig(__dirname);
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
-  module.exports = withNativewind(config);
+  module.exports = withNativeWind(config, { input: "./global.css" });
 <% } else { %>
   module.exports = config;
 <% } %>

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

@@ -1,7 +1,11 @@
 import { Feather } from '@expo/vector-icons';
 import { Text, View } from 'react-native';
 
-export const BackButton = ({ onPress }: { onPress: () => void }) => {
+interface BackButtonProps {
+  onPress: () => void;
+}
+
+export const BackButton: React.FC<BackButtonProps> = ({ onPress }) => {
   return (
     <View className={styles.backButton}>
       <Feather name="chevron-left" size={16} color="#007AFF" />

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

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import { Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 
-type ButtonProps = {
+interface ButtonProps extends TouchableOpacityProps {
   title: string;
-} & TouchableOpacityProps;
+}
 
 export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps }, ref) => {
   return (
@@ -16,6 +16,6 @@ export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps
 Button.displayName = 'Button';
 
 const styles = {
-  button: 'items-center bg-indigo-500 rounded-[28px] shadow-md p-4 w-full',
+  button: 'items-center bg-indigo-500 rounded-[28px] shadow-md p-4',
   buttonText: 'text-white text-lg font-semibold text-center',
 };

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

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+
+interface ContainerProps {
+  children: React.ReactNode;
+}
+
+export const Container: React.FC<ContainerProps> = ({ children }) => {
+  return <View className={styles.container}>{children}</View>;
+};
+
+const styles = {
+  container: "flex flex-1 p-safe-offset-6",
+};