I am too dumb to use regular css now, tailwind is the way to go

Author: emon5122

app/+not-found.tsx

@@ -1,30 +1,27 @@
 import { Link, Stack } from "expo-router";
 import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Text, View } from "react-native";
 
 export default function NotFoundScreen() {
     return (
         <>
             <Stack.Screen options={{ title: "Oops!" }} />
-            <View style={styles.container}>
-                <Text>This screen doesn't exist.</Text>
-                <Link href="/" style={styles.link}>
-                    <Text>Go to Game Board!</Text>
+            <View className="flex-1 items-center justify-center p-8 bg-gray-50">
+                <Text className="text-4xl font-bold text-gray-800 mb-4">
+                    404
+                </Text>
+                <Text className="text-lg text-gray-600 mb-8">
+                    This page doesn't exist.
+                </Text>
+                <Link
+                    href="/"
+                    className="bg-blue-500 rounded-lg px-6 py-3 shadow-md active:bg-blue-600"
+                >
+                    <Text className="text-white font-semibold">
+                        Go to Game Board
+                    </Text>
                 </Link>
             </View>
         </>
     );
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 20,
-    },
-    link: {
-        marginTop: 15,
-        paddingVertical: 15,
-    },
-});

app/_layout.tsx

@@ -8,6 +8,7 @@ import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 import { SafeAreaView } from "react-native";
 import "react-native-reanimated";
+import "../global.css";
 
 SplashScreen.preventAutoHideAsync();
 

app/news.tsx

@@ -4,26 +4,16 @@ import { ScrollView, View } from "react-native";
 
 const NewsScreen = () => {
     const data = newsMockData;
+
     return (
-        <View
-            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-        >
-            <ScrollView>
-                {data.map((item, index) => {
-                    return (
-                        <View key={index}>
-                            <NewsCard {...item} />
-                            <View
-                                style={{
-                                    height: 1.5,
-                                    width: "80%",
-                                    backgroundColor: "#EEEEEE",
-                                    marginVertical: 10,
-                                }}
-                            />
-                        </View>
-                    );
-                })}
+        <View className="flex-1 justify-center items-center">
+            <ScrollView className="w-full px-4">
+                {data.map((item, index) => (
+                    <View key={index}>
+                        <NewsCard {...item} />
+                        <View className="h-[1.5px] w-4/5 bg-[#EEEEEE] mx-auto my-2.5" />
+                    </View>
+                ))}
             </ScrollView>
         </View>
     );

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: [
+            ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+            "nativewind/babel",
+        ],
+    };
+};

components/chat/others-chat.tsx

@@ -4,9 +4,9 @@ const OthersChat = () => {
     const { height } = useWindowDimensions();
 
     return (
-        <View style={styles.othersChatContainer}>
-            <View style={styles.ChatContainer}>
-                <Text style={styles.text}>
+        <View className="flex-row mx-4 my-2.5">
+            <View className="relative max-w-[75%] bg-white border border-[#EEEEEE] rounded-xl p-3">
+                <Text className="text-black text-base font-[Rubik_400Regular] leading-5">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
                     Minus, labore neque perferendis id dolor minima ad aliquam
                     ex, sed debitis quos, unde animi. Et eligendi quas magnam
@@ -40,26 +40,6 @@ const OthersChat = () => {
 };
 
 const styles = StyleSheet.create({
-    othersChatContainer: {
-        flexDirection: "row",
-        marginVertical: 10,
-        marginHorizontal: 15,
-    },
-    ChatContainer: {
-        maxWidth: "75%",
-        backgroundColor: "#FFFFFF",
-        borderWidth: 1,
-        borderColor: "#EEEEEE",
-        borderRadius: 10,
-        padding: 12,
-        position: "relative",
-    },
-    text: {
-        color: "black",
-        fontSize: 16,
-        fontFamily: "Rubik_400Regular",
-        lineHeight: 20,
-    },
     triangle: {
         width: 0,
         height: 0,
@@ -73,15 +53,9 @@ const styles = StyleSheet.create({
     },
     triangleBorder: {
         borderTopColor: "#CFD8DC",
-        borderLeftWidth: 8,
-        borderRightWidth: 8,
-        borderTopWidth: 8,
     },
     triangleFill: {
         borderTopColor: "#FFFFFF",
-        borderLeftWidth: 7,
-        borderRightWidth: 7,
-        borderTopWidth: 7,
         left: -11,
         bottom: 9,
     },

components/chat/self-chat.tsx

@@ -5,14 +5,14 @@ const SelfChat = () => {
     const { height } = useWindowDimensions();
 
     return (
-        <View style={styles.selfChatContainer}>
+        <View className="flex-row justify-end items-end pr-5 mb-2.5">
             <LinearGradient
                 colors={["#34506D", "#3498DB"]}
                 start={{ x: 0, y: 0 }}
                 end={{ x: 1, y: 0 }}
-                style={styles.gradientContainer}
+                className="relative max-w-[75%] p-2.5 border border-[#EEEEEE] rounded-xl"
             >
-                <Text style={styles.text}>
+                <Text className="text-white text-base font-[Rubik_400Regular]">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
                     Minus, labore neque perferendis id dolor minima ad aliquam
                     ex, sed debitis quos, unde animi. Et eligendi quas magnam
@@ -34,26 +34,6 @@ const SelfChat = () => {
 };
 
 const styles = StyleSheet.create({
-    selfChatContainer: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        alignItems: "flex-end",
-        paddingRight: 20,
-        marginBottom: 10,
-    },
-    gradientContainer: {
-        maxWidth: "75%",
-        padding: 10,
-        borderWidth: 1,
-        borderColor: "#EEEEEE",
-        borderRadius: 10,
-        position: "relative",
-    },
-    text: {
-        color: "#fff",
-        fontSize: 16,
-        fontFamily: "Rubik_400Regular",
-    },
     triangle: {
         width: 0,
         height: 0,

components/footer.tsx

@@ -1,73 +1,85 @@
-import { Styles } from "@/constants/Colors";
 import { Link, usePathname } from "expo-router";
-import { StyleSheet, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import GameBoardIcon from "./icons/gameBoard";
 import NewsIcon from "./icons/news";
 import RankIcon from "./icons/rank";
 import RegisterIcon from "./icons/register";
 
+type TabItemProps = {
+    icon: React.ComponentType<{ size: number }>;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    isActive?: boolean;
+};
+
+type TabType = {
+    icon: React.ComponentType<{ size: number; color?: string }>;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+};
+
+const ICON_SIZE = 20;
+
+const TABS: TabType[] = [
+    { icon: RegisterIcon, label: "Register", disabled: true },
+    { icon: GameBoardIcon, label: "Game Board", href: "/" },
+    { icon: RankIcon, label: "Rank", disabled: true },
+    { icon: NewsIcon, label: "News", href: "/news" },
+];
+
 export const Footer = () => {
     const path = usePathname();
 
-    if (path === "/chat") {
-        return null;
-    }
+    if (path === "/chat") return null;
 
-    return (
-        <View style={styles.footer}>
-            <View style={styles.disabledTab}>
-                <RegisterIcon size={20} />
-                <Text style={styles.tabText}>Register</Text>
+    const TabItem = ({
+        icon: Icon,
+        label,
+        href,
+        disabled = false,
+        isActive = false,
+    }: TabItemProps) => {
+        const content = (
+            <View
+                className={`flex-col items-center p-2.5 
+                    ${disabled ? "opacity-50" : ""} 
+                    ${isActive ? "opacity-100" : "opacity-70"}`}
+            >
+                <Icon size={ICON_SIZE} />
+                <Text className="text-white font-[Rubik_400Regular] text-sm mt-1.5">
+                    {label}
+                </Text>
             </View>
-            <Link href="/" style={styles.resetLink}>
-                <View style={styles.tab}>
-                    <GameBoardIcon size={20} />
-                    <Text style={styles.tabText}>Game Board</Text>
-                </View>
-            </Link>
-            <View style={styles.disabledTab}>
-                <RankIcon size={20} />
-                <Text style={styles.tabText}>Rank</Text>
-            </View>
-            <Link href="/news" style={styles.resetLink}>
-                <View style={styles.tab}>
-                    <NewsIcon size={20} />
-                    <Text style={styles.tabText}>News</Text>
-                </View>
-            </Link>
+        );
+
+        if (href) {
+            return (
+                <Link
+                    href={href as "/chat" | "/"}
+                    className="no-underline p-0 m-0"
+                >
+                    {content}
+                </Link>
+            );
+        }
+
+        return content;
+    };
+
+    return (
+        <View className="flex-row justify-around items-center bg-[#1F1B1B] w-full h-[8%]">
+            {TABS.map((tab, index) => (
+                <TabItem
+                    key={index}
+                    icon={tab.icon}
+                    label={tab.label}
+                    href={tab.href}
+                    disabled={tab.disabled}
+                    isActive={tab.href ? path === tab.href : false}
+                />
+            ))}
         </View>
     );
 };
-
-const styles = StyleSheet.create({
-    resetLink: {
-        textDecorationLine: "none",
-        padding: 0,
-        margin: 0,
-    },
-    footer: {
-        flexDirection: "row",
-        justifyContent: "space-around",
-        alignItems: "center",
-        backgroundColor: Styles.colour.backgroundColour,
-        width: "100%",
-        height: "8%",
-    },
-    tab: {
-        flexDirection: "column",
-        alignItems: "center",
-        padding: 10,
-    },
-    tabText: {
-        color: "white",
-        fontFamily: "Rubik_400Regular",
-        fontSize: 14,
-        marginTop: 5,
-    },
-    disabledTab: {
-        flexDirection: "column",
-        alignItems: "center",
-        opacity: 0.5,
-        padding: 10,
-    },
-});