NativeWind UI setup and removal of some default UI components.

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

app/_layout.tsx

@@ -1,4 +1,6 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
+import "@/global.css";
+import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
@@ -7,15 +9,14 @@ import { useEffect } from 'react';
 import 'react-native-reanimated';
 
 import { useColorScheme } from '@/components/useColorScheme';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export {
-  // Catch any errors thrown by the Layout component.
   ErrorBoundary,
 } from 'expo-router';
 
 export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: '(tabs)',
+  initialRouteName: 'index',
 };
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
@@ -49,11 +50,12 @@ function RootLayoutNav() {
   const colorScheme = useColorScheme();
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
-      </Stack>
-    </ThemeProvider>
+    <GluestackUIProvider mode="light">
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="index" options={{ headerShown: false}} />
+        </Stack>
+      </ThemeProvider>
+      </GluestackUIProvider>
   );
 }

app/index.tsx

@@ -0,0 +1,25 @@
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text"; 
+import { View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function HomeScreen() {
+    return (
+        <SafeAreaView>
+            <View className={"h-[150px] bg-red-500 items-center justify-center"}>
+                <Text>
+                Hello World
+                </Text>
+            </View>
+            <View className={"flex-1 items-center justify-center"}>
+                <Heading size="2xl">Welcome to HabitForge</Heading>
+                <Text>
+                    Welcome! You’re about to discover a whole new way of creating positive change in your life, one step at a time. HabitForge was designed to help you build routines that last, by focusing on what truly matters: steady progress and genuine commitment.
+                </Text>
+                <Text>
+                    We believe the best habits are formed when you start small and allow your efforts to grow naturally. Whether you want to read more, exercise consistently, or learn a new skill, HabitForge makes the process simple, approachable, and—most importantly—sustainable.
+                </Text>
+            </View>
+        </SafeAreaView>
+    )
+}

babel.config.js

@@ -0,0 +1,18 @@
+module.exports = function(api) {
+    api.cache(true);
+
+    return {
+        presets: [["babel-preset-expo", {
+            jsxImportSource: "nativewind"
+        }], "nativewind/babel"],
+
+        plugins: [["module-resolver", {
+            root: ["./"],
+
+            alias: {
+                "@": "./",
+                "tailwind.config": "./tailwind.config.js"
+            }
+        }]]
+    };
+};

components/EditScreenInfo.tsx

@@ -15,7 +15,7 @@ export default function EditScreenInfo({ path }: { path: string }) {
           style={styles.getStartedText}
           lightColor="rgba(0,0,0,0.8)"
           darkColor="rgba(255,255,255,0.8)">
-          Open up the code for this screen:
+
         </Text>
 
         <View

components/ui/box/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { boxStyle } from './styles';
+
+type IBoxProps = ViewProps &
+  VariantProps<typeof boxStyle> & { className?: string };
+
+const Box = React.forwardRef<React.ElementRef<typeof View>, IBoxProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <View ref={ref} {...props} className={boxStyle({ class: className })} />
+    );
+  }
+);
+
+Box.displayName = 'Box';
+export { Box };

components/ui/box/index.web.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { boxStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type IBoxProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof boxStyle> & { className?: string };
+
+const Box = React.forwardRef<HTMLDivElement, IBoxProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={boxStyle({ class: className })} {...props} />
+    );
+  }
+);
+
+Box.displayName = 'Box';
+export { Box };

components/ui/box/styles.tsx

@@ -0,0 +1,10 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb
+  ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const boxStyle = tva({
+  base: baseStyle,
+});