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

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

@@ -3,6 +3,12 @@
 <% } 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";
 <% } %>
@@ -11,6 +17,14 @@ import { Stack } from "expo-router";
 import { Link } from "expo-router";
 
 export default function Page() {
+  <% if (props.stylingPackage?.name === "restyle") { %>
+    const styles = useStyles();
+  <% } %>
+
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const {styles} = useStyles(stylesheet);
+  <% } %>
+
 	return (
 		<% if (props.stylingPackage?.name === "nativewind") { %>
 			<View className={styles.container}>
@@ -27,7 +41,7 @@ export default function Page() {
 				</Link>
 				</View>
 			</View>
-			<% } else if (props.stylingPackage?.name === "tamagui") { %>
+		<% } else if (props.stylingPackage?.name === "tamagui") { %>
 			<Container>
 				<Main>
           <Stack.Screen options={{ title: "Overview" }} />
@@ -40,7 +54,30 @@ export default function Page() {
           </Link>
 				</Main>
 			</Container>
-			<% } else { %>
+		<% } else if (props.stylingPackage?.name === "restyle") { %>
+      <>
+        <Stack.Screen options={{ title: "Overview" }} />
+        <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>
+            <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
+              <TouchableOpacity
+                style={styles.button}
+              >
+                <Text variant="body" textAlign="center" color="white" fontWeight="600">
+                  Show Details
+                </Text>
+              </TouchableOpacity>
+            </Link>
+          </Box>
+        </Box>
+      </>
+  	<% } else { %>
 			<View style={styles.container}>
 				<View style={styles.main}>
           <Stack.Screen options={{ title: "Overview" }} />
@@ -68,6 +105,68 @@ export default function Page() {
 		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/expo-router/tabs/app/(tabs)/_layout.tsx.ejs

@@ -1,15 +1,26 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { Link, Tabs } from "expo-router";
+<% if (props.stylingPackage?.name === "unistyles") { %>
+import { createStyleSheet, useStyles } from 'react-native-unistyles'
+import { Pressable } from "react-native";
+<% } else { %>
 import { Pressable, StyleSheet } from "react-native";
+<% } %>
 
 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() {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+  const {styles} = useStyles(stylesheet)
+  <% } %>
   return (
     <Tabs
       screenOptions={{
@@ -47,6 +58,16 @@ export default function TabLayout() {
   );
 }
 
+<% if (props.stylingPackage?.name === "unistyles") { %>
+const stylesheet = createStyleSheet({
+  headerRight: {
+    marginRight: 15
+  },
+  tabBarIcon: {
+    marginBottom: -3
+  }
+});
+<% } else { %>
 const styles = StyleSheet.create({
   headerRight: {
     marginRight: 15
@@ -54,4 +75,5 @@ const styles = StyleSheet.create({
   tabBarIcon: {
     marginBottom: -3
   }
-});
+});
+<% } %>

package/build/templates/packages/expo-router/tabs/app/(tabs)/index.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 } 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";
 <% } %>
@@ -9,6 +14,9 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabOneScreen() {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles } = useStyles(stylesheet)
+  <% } %> 
     <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
@@ -27,6 +35,14 @@ export default function TabOneScreen() {
 				</YStack>
 			</Theme>
 		);    
+    <% } else if (props.stylingPackage?.name === "restyle") { %>
+      return (
+        <Box flex={1} alignItems="center" justifyContent="center">
+          <Text variant="title">Tab One</Text>
+          <Box height={1} marginVertical="l_32" width="80%" />
+          <EditScreenInfo path="app/(tabs)/index.tsx" />
+        </Box>
+      );  
     <% } else { %>
         return (
 			<View style={styles.container}>
@@ -44,6 +60,23 @@ 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 === "unistyles") { %>
+    const stylesheet = createStyleSheet({
+		container: {
+			alignItems: "center",
+			flex: 1,
+			justifyContent: "center",
+		},
+		separator: {
+			height: 1,
+			marginVertical: 30,
+			width: "80%",
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: "bold",
+		}
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/expo-router/tabs/app/(tabs)/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 } 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";
 <% } %>
@@ -9,6 +14,9 @@
 import EditScreenInfo from "../../components/edit-screen-info";
 
 export default function TabTwoScreen() {
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+      const {styles} = useStyles(stylesheet)
+    <% } %>
     <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
@@ -27,6 +35,14 @@ export default function TabTwoScreen() {
 				</YStack>
 			</Theme>
 		);    
+    <% } else if (props.stylingPackage?.name === "restyle") { %>
+      return (
+        <Box flex={1} alignItems="center" justifyContent="center">
+          <Text variant="title">Tab Two</Text>
+          <Box height={1} marginVertical="l_32" width="80%" />
+          <EditScreenInfo path="app/(tabs)/two.tsx" />
+        </Box>
+      ); 
     <% } else { %>
         return (
 			<View style={styles.container}>
@@ -44,6 +60,23 @@ 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 === "unistyles") { %>
+    const stylesheet = createStyleSheet({
+		container: {
+			alignItems: "center",
+			flex: 1,
+			justifyContent: "center",
+		},
+		separator: {
+			height: 1,
+			marginVertical: 30,
+			width: "80%",
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: "bold",
+		}
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/expo-router/tabs/app/[...unmatched].tsx.ejs

@@ -1,14 +1,27 @@
 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 { Text, View } from 'react-native';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text, View } from 'react-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, makeStyles } from 'theme';
 <% } %>
 
 export default function NotFoundScreen() {
+<% if (props.stylingPackage?.name === "restyle") { %>
+  const styles = useStyles();
+<% } %>
+
+<% if (props.stylingPackage?.name === "unistyles") {%>
+  const {styles} = useStyles(stylesheet);
+<% } %>
+
   return (
       <% if (props.stylingPackage?.name === "nativewind") {%>
         <>
@@ -32,6 +45,18 @@ export default function NotFoundScreen() {
             </YStack>
           </Main>
         </Container>
+      <% } else if (props.stylingPackage?.name === "restyle") {%>
+        <>
+          <Stack.Screen options={{ title: 'Oops!' }} />
+          <Box flex={1} justifyContent="center" alignItems="center" padding="ml_24">
+            <Text variant="title">This screen doesn't exist.</Text>
+            <Link href="/" style={styles.link}>
+              <Text variant="body" color="blue">
+                Go to home screen!
+              </Text>
+            </Link>
+          </Box>
+        </>
       <% } else { %>
         <>
           <Stack.Screen options={{ title: "Oops!" }} />
@@ -53,6 +78,27 @@ export default function NotFoundScreen() {
     link: `mt-4 pt-4`,
     linkText: `text-base text-[#2e78b7]`,
 	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+    },
+    link: {
+      marginTop: 16,
+      paddingVertical: 16,
+    },
+    linkText: {
+      fontSize: 14,
+      color: '#2e78b7',
+    },
+  });
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   const styles = StyleSheet.create({
     container: {
@@ -74,4 +120,11 @@ export default function NotFoundScreen() {
       color: '#2e78b7',
     },
   });
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  const useStyles = makeStyles((theme) => ({
+    link: {
+      marginTop: theme.spacing.m_16,
+      paddingVertical: theme.spacing.m_16,
+    },
+  }));
 <% } %>

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

@@ -7,6 +7,10 @@
 	import config from '../tamagui.config'
 
 	SplashScreen.preventAutoHideAsync();
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  import { Stack } from 'expo-router';
+  import { theme } from 'theme';
 <% } else { %>
 	import { Stack } from "expo-router";
 <% } %>
@@ -35,6 +39,8 @@ export default function RootLayout() {
   	return (
     	<% if (props.stylingPackage?.name === "tamagui") { %>
     		<TamaguiProvider config={config}>
+    	<% } else if (props.stylingPackage?.name === "restyle") { %>
+    		<ThemeProvider theme={theme}>
     	<% } %>
 		<Stack>
 			<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
@@ -42,6 +48,8 @@ export default function RootLayout() {
 		</Stack>
 		<% if (props.stylingPackage?.name === "tamagui") { %>
 			</TamaguiProvider>
+		<% } else if (props.stylingPackage?.name === "restyle") { %>
+			</ThemeProvider>
 		<% } %>
   	);
 }

package/build/templates/packages/expo-router/tabs/app/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 } 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";
 <% } %>
@@ -11,6 +17,9 @@ import { StatusBar } from "expo-status-bar";
 import EditScreenInfo from "../components/edit-screen-info";
 
 export default function ModalScreen() {
+    <% if (props.stylingPackage?.name === "unistyles") { %>
+      const {styles} = useStyles(stylesheet)
+    <% } %>
     <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
 			<View className={styles.container}>
@@ -31,6 +40,15 @@ export default function ModalScreen() {
 				</YStack>
 			</Theme>
 		);
+    <% } else if (props.stylingPackage?.name === "restyle") { %>
+      return (
+        <Box flex={1} alignItems="center" justifyContent="center">
+          <StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
+          <Text variant="title">Modal</Text>
+          <Box height={1} marginVertical="l_32" width="80%" />
+          <EditScreenInfo path="app/modal.tsx" />
+        </Box>
+      );
     <% } else { %>
         return (
 			<View style={styles.container}>
@@ -49,6 +67,23 @@ export default function ModalScreen() {
 		separator: `h-[1px] my-7 w-4/5 bg-gray-200`,
 		title: `text-xl font-bold`
 	};
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet({
+		container: {
+			alignItems: "center",
+			flex: 1,
+			justifyContent: "center"
+		},
+		separator: {
+			height: 1,
+			marginVertical: 30,
+			width: "80%"
+		},
+		title: {
+			fontSize: 20,
+			fontWeight: "bold"
+		}
+	});
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
 		container: {

package/build/templates/packages/expo-router/tabs/components/edit-screen-info.tsx.ejs

@@ -1,13 +1,20 @@
-import React from "react";
 <% if (props.stylingPackage?.name === "nativewind") { %>
     import { Text, View } from "react-native";
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
     import { YStack, H4, Paragraph } from "tamagui"
+<% } 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 { Text, View } from "react-native";
 <% } else { %>
     import { StyleSheet, Text, View } from "react-native";
 <% } %>
 
 export default function EditScreenInfo({ path }: { path: string }) {
+  <% if (props.stylingPackage?.name === "unistyles") { %>
+    const { styles } = useStyles(stylesheet);
+  <% } %>
     <% if (props.stylingPackage?.name === "nativewind") { %>
         return (
             <View>
@@ -40,6 +47,20 @@ export default function EditScreenInfo({ path }: { path: string }) {
                 </YStack>
             </YStack>
         );
+    <% } else if (props.stylingPackage?.name === "restyle") { %>
+        return (
+          <Box alignItems="center" marginHorizontal="xl_64">
+            <Text variant="body" lineHeight={24} textAlign="center">
+              Open up the code for this screen:
+            </Text>
+            <Box borderRadius="s_3" paddingHorizontal="xs_4" marginVertical="s_8">
+              <Text>{path}</Text>
+            </Box>
+            <Text variant="body" lineHeight={24} textAlign="center">
+              Change any of the text, save the file, and your app will automatically update.
+            </Text>
+          </Box>
+        );
     <% } else { %>
         return (
             <View>
@@ -69,6 +90,36 @@ export default function EditScreenInfo({ path }: { path: string }) {
     helpLinkText: `text-center`,
     homeScreenFilename: `my-2`,
     };
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+    const stylesheet = createStyleSheet({
+    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
+    }
+    });
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
     const styles = StyleSheet.create({
     codeHighlightContainer: {

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

@@ -8,7 +8,11 @@ import "react-native-gesture-handler";
 	import config from './tamagui.config'
 
 	SplashScreen.preventAutoHideAsync();
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  import { ThemeProvider } from '@shopify/restyle';
+  import { theme } from 'theme';
 <% } %>
+
 import RootStack from "./src/navigation";
 
 export default function App() {
@@ -33,7 +37,13 @@ export default function App() {
 				<RootStack />
 			</TamaguiProvider>
 		);
-	<% } else { %>
+	<% } else if (props.stylingPackage?.name === "restyle") { %>
+		return (
+      <ThemeProvider theme={theme}>
+        <RootStack />
+      </ThemeProvider>
+    );
+	<% } else { %> 
 		return <RootStack />;
 	<% } %>
 }

package/build/templates/packages/react-navigation/components/edit-screen-info.tsx.ejs

@@ -1,6 +1,11 @@
 import React from "react";
 <% if (props.stylingPackage?.name === "nativewind") { %>
   import { Text, View } from "react-native";
+<% } 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 { Text, View } from "react-native";
 <% } else { %>
   import { StyleSheet, Text, View } from "react-native";
 <% } %>
@@ -30,6 +35,52 @@ import React from "react";
       </View>
     );
   }
+<% } else if (props.stylingPackage?.name === "restyle") { %>
+  export default function EditScreenInfo({ path }: { path: string }) {
+    return (
+      <Box>
+        <Box alignItems="center" marginHorizontal="xl_64">
+          <Text variant="body" lineHeight={24} textAlign="center">
+            Open up the code for this screen:
+          </Text>
+
+          <Box borderRadius="s_3" paddingHorizontal="xs_4" marginVertical="s_8">
+            <Text>{path}</Text>
+          </Box>
+
+          <Text variant="body" lineHeight={24} textAlign="center">
+            Change any of the text, save the file, and your app will automatically update.
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  export default function EditScreenInfo({ path }: { path: string }) {
+    const {styles} = useStyles(stylesheet)
+    return (
+      <View>
+        <View style={styles.getStartedContainer}>
+          <Text
+            style={styles.getStartedText}>
+            Open up the code for this screen:
+          </Text>
+
+          <View
+            style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
+            >
+            <Text>{path}</Text>
+          </View>
+
+          <Text
+            style={styles.getStartedText}
+            >
+            Change any of the text, save the file, and your app will automatically update.
+          </Text>
+        </View>
+      </View>
+    );
+  }
 <% } else { %>
   export default function EditScreenInfo({ path }: { path: string }) {
     return (
@@ -66,7 +117,37 @@ import React from "react";
     helpLink: "py-4",
     helpLinkText: "text-center"
   };
-<% } else { %>
+<% } else if (props.stylingPackage?.name === "unistyles") { %>
+  const stylesheet = createStyleSheet({
+    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
+    }
+  });
+<% } else if (props.stylingPackage?.name !== "restyle") { %>
   const styles = StyleSheet.create({
     codeHighlightContainer: {
       borderRadius: 3,