create-expo-stack 2.9.10-next.aa2c885 → 2.10.0-next.01a5826

package/README.md

@@ -128,14 +128,21 @@ Thanks go to these wonderful people:
             <sub><b>Frank Calise</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/dannyhw">
+            <img src="https://avatars.githubusercontent.com/u/3481514?v=4" width="100;" alt="dannyhw"/>
+            <br />
+            <sub><b>Daniel Williams</b></sub>
+        </a>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/ludwig-pro">
             <img src="https://avatars.githubusercontent.com/u/62896243?v=4" width="100;" alt="ludwig-pro"/>
             <br />
             <sub><b>Ludwig</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/PickleNik">
             <img src="https://avatars.githubusercontent.com/u/31113245?v=4" width="100;" alt="PickleNik"/>
@@ -150,13 +157,6 @@ Thanks go to these wonderful people:
             <sub><b>Zach Nugent</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/dannyhw">
-            <img src="https://avatars.githubusercontent.com/u/3481514?v=4" width="100;" alt="dannyhw"/>
-            <br />
-            <sub><b>Daniel Williams</b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/kratos-respawned">
             <img src="https://avatars.githubusercontent.com/u/87561983?v=4" width="100;" alt="kratos-respawned"/>

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

@@ -1,5 +1,4 @@
 import { Tabs } from 'expo-router';
-import { StyleSheet } from 'react-native';
 import { TabBarIcon } from '~/components/TabBarIcon';
 
 

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

@@ -1,5 +1,4 @@
 import { Stack } from 'expo-router';
-import { StyleSheet, View } from 'react-native';
 
 import { Container } from '~/components/Container';
 import { ScreenContent } from '~/components/ScreenContent';
@@ -9,7 +8,7 @@ export default function Home() {
     <>
       <Stack.Screen options={{ title: 'Home' }} />
       <Container>
-        <ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Home" />
+        <ScreenContent path="app/(drawer)/index.tsx" title="Home" />
       </Container>
     </>
   );

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

@@ -1,6 +1,6 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
-<% if (props.stylingPackage?.name === "nativewind") { %>
+<% if (props.stylingPackage?.name === "nativewind" || "nativewindui") { %>
   const { withNativeWind } = require("nativewind/metro");
 <% } %>
 
@@ -10,7 +10,8 @@ const config = getDefaultConfig(__dirname);
 
 <% if (props.stylingPackage?.name === "nativewind") { %>
   module.exports = withNativeWind(config, { input: "./global.css" });
+<% } else if (props.stylingPackage?.name === "nativewindui") { %>
+  module.exports = withNativeWind(config, { input: "./global.css", inlineRem: 16 });
 <% } else { %>
   module.exports = config;
-<% } %>
-
+<% } %>

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

@@ -1,9 +1,7 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import '../global.css';
-<% } else if (props.stylingPackage?.name === "nativewinui") { %>
-  import '../global.css';
-  import 'expo-dev-client';
 <% } %>
+
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import '../unistyles';
 <% } %>

package/build/templates/packages/nativewindui/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/packages/nativewindui/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/packages/nativewindui/components/Container.tsx.ejs

@@ -0,0 +1,13 @@
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+});
+

package/build/templates/packages/nativewindui/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/packages/nativewindui/components/HeaderButton.tsx.ejs

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Pressable, StyleSheet } from 'react-native';
+
+export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void; }>(({ onPress }, ref) => {
+  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/packages/nativewindui/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/packages/nativewindui/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/nativewindui/drawer/app/(drawer)/(tabs)/_layout.tsx.ejs

@@ -0,0 +1,28 @@
+import { Tabs } from 'expo-router';
+
+import { TabBarIcon } from '~/components/TabBarIcon';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: 'black',
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}