chore: Rewrite HomeScreen & SlugScreen to use Nativewind classNames

Author: codinsonn

apps/expo/app/ExpoRootLayout.tsx

@@ -7,6 +7,8 @@ import UniversalRootLayout from '@app/core/screens/UniversalRootLayout'
 // -i- Use this file to apply your Expo specific layout setup:
 // -i- like rendering our Universal Layout and App Providers
 
+/* --- <ExpoRootLayout> ------------------------------------------------------------------------ */
+
 export default function ExpoRootLayout() {
   return (
     <UniversalAppProviders>

features/app-core/screens/HomeScreen.tsx

@@ -1,50 +1,22 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Link } from '../navigation/Link'
 import { Image } from '../components/Image'
-import { H3, P } from '../components/Typography'
+import { View, H3, P, TextLink } from '../components/styled'
 
 /* --- <HomeScreen/> --------------------------------------------------------------------------- */
 
 const HomeScreen = () => {
   return (
-    <View style={styles.container}>
+    <View className="flex flex-1 justify-center items-center">
       <Image src={require('../assets/aetherspaceLogo.png')} width={60} height={60} style={{ marginBottom: 12 }} />
-      <H3 className="text-center">Expo + Next.js app routing 🚀</H3>
-      <P className="mt-8 text-center">Open HomeScreen.tsx in features/app-core/screens to start working on your app</P>
-      <Link href="/subpages/aetherspace" style={styles.link}>Test navigation</Link>
-      <Link href="/images" style={styles.link}>Test images</Link>
+      <H3 className="text-center">Expo + Next.js app routing 👋</H3>
+      <P className="mt-2 text-center">Open HomeScreen.tsx in features/app-core/screens to start working on your app</P>
+      <TextLink className="mt-4 text-center" href="/subpages/aetherspace">
+        Test navigation
+      </TextLink>
     </View>
   )
 }
 
-/* --- Styles ---------------------------------------------------------------------------------- */
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontWeight: 'bold',
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  subtitle: {
-    marginTop: 8,
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  link: {
-    marginTop: 16,
-    fontSize: 16,
-    color: 'blue',
-    textAlign: 'center',
-    textDecorationLine: 'underline',
-  },
-})
-
 /* --- Exports --------------------------------------------------------------------------------- */
 
 export default HomeScreen

features/app-core/screens/SlugScreen.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
 import { useRouteParams } from '@app/core/navigation/useRouteParams'
-import { Link } from '../navigation/Link'
+import { View, Text, H3, TextLink } from '../components/styled'
 import { useRouter } from '../navigation/useRouter'
 
 /* --- <SlugScreen/> --------------------------------------------------------------------------- */
@@ -17,71 +16,45 @@ const SlugScreen = (props) => {
   // -- Render --
 
   return (
-    <View style={styles.container}>
+    <View className="flex flex-1 justify-center items-center">
       {showBackButton && (
         <Text
-          style={{ ...styles.backButton, ...styles.link, textDecorationLine: 'none' }}
+          className="text-blue-500 absolute top-8 web:top-0 left-0 p-4"
           onPress={back}
         >
           {`< Back`}
         </Text>
       )}
-      <Text style={styles.title}>
+      <H3>
         Page slug: {slug}
         {!!count && ` | count: ${count}`}
+      </H3>
+      <Text className="mt-2 text-base text-center">
+        Need a more robust, Fully-Stacked, Full-Product, Universal App Setup?
       </Text>
-      <Text style={styles.subtitle}>Need a more robust, Fully-Stacked, Full-Product, Universal App Setup?</Text>
-      <Link href="https://github.com/Aetherspace/green-stack-starter-demo#readme" target="_blank" style={styles.link}>
+      <TextLink
+        href="https://github.com/Aetherspace/green-stack-starter-demo#readme"
+        className="mt-4 text-center"
+        target="_blank"
+      >
         Check out the GREEN Stack Starter
-      </Link>
-      <Text style={styles.link} onPress={() => push('/subpages/push')}>
+      </TextLink>
+      <Text className="mt-4 text-center text-blue-500 underline" onPress={() => push('/subpages/push')}>
         {`router.push()`}
       </Text>
-      <Text style={styles.link} onPress={() => navigate('/subpages/navigate')}>
+      <Text className="mt-4 text-center text-blue-500 underline" onPress={() => navigate('/subpages/navigate')}>
         {`router.navigate()`}
       </Text>
-      <Text style={styles.link} onPress={() => replace('/subpages/replace')}>
+      <Text className="mt-4 text-center text-blue-500 underline" onPress={() => replace('/subpages/replace')}>
         {`router.replace()`}
       </Text>
-      <Text style={styles.link} onPress={() => setParams({ count: `${+count + 1}` })}>
+      <Text className="mt-4 text-center text-blue-500 underline" onPress={() => setParams({ count: `${+count + 1}` })}>
         {`router.setParams()`}
       </Text>
     </View>
   )
 }
 
-/* --- Styles ---------------------------------------------------------------------------------- */
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  backButton: {
-    position: 'absolute',
-    top: 16,
-    left: 16,
-  },
-  title: {
-    fontWeight: 'bold',
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  subtitle: {
-    marginTop: 8,
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  link: {
-    marginTop: 16,
-    fontSize: 16,
-    color: 'blue',
-    textAlign: 'center',
-    textDecorationLine: 'underline',
-  },
-})
-
 /* --- Exports --------------------------------------------------------------------------------- */
 
 export default SlugScreen