DEV Community: Jack Vatcharat

Simplify Responsive Design in React with useBreakpoints

Jack Vatcharat — Tue, 21 Jan 2025 06:48:36 +0000

When building modern web apps, having a responsive design that works smoothly on all screen sizes isn’t just nice to have—it’s a must. A great way to achieve this is by handling mobile and desktop views differently. That’s where the useBreakpoints hook comes in! It’s a handy tool for developers to create user-friendly experiences across devices.

What’s the useBreakpoints Hook?

The useBreakpoints hook is a custom React hook that taps into Material-UI's useTheme and useMediaQuery hooks. It figures out the current screen size, so you can decide what to show or how to style things based on whether someone’s on a phone or a computer.

Why Use useBreakpoints?

Better User Experience: By customizing the interface for mobile and desktop users, you can make sure everyone gets the best experience. Mobile users see a sleek, simplified design, while desktop users get to enjoy a more detailed layout.
Cleaner Code: No more scattered media queries all over your CSS files. The useBreakpoints hook lets you handle responsive logic right in your components, making your code easier to read and maintain.
Faster Performance: By showing only what’s needed for a specific screen size, you can reduce unnecessary data loading and speed up your app.
Project Consistency: Using the useBreakpoints hook across your projects keeps things consistent and helps new team members quickly get up to speed.

How to Use the useBreakpoints Hook

Here’s a quick walkthrough of setting up and using the useBreakpoints hook in a React app.

Step 1: Set Up the Hook

First, create a custom hook using Material-UI's useTheme and useMediaQuery to determine the screen size.

import { useMediaQuery, useTheme } from '@mui/material';

/**
 * Custom hook to get the current state of breakpoints based on the theme.
 */
export const useBreakpoints = () => {
  const theme = useTheme();

  const isMd = useMediaQuery(theme.breakpoints.only('md'));

  return {
    isMd,
  };
};

Step 2: Put the Hook to Work

Now, use the useBreakpoints hook in a component to display different layouts for mobile and desktop users. For instance, you can show a list for mobile users and a table for desktop users using Material-UI components.

import React from 'react';
import { useBreakpoints } from '/Users/jack/Work/SGInnovate/frontend/packages/shared/ui/utils/breakpoints';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, List, ListItem, Paper } from '@mui/material';

const ResponsiveComponent = () => {
  const { isMdDown } = useBreakpoints();

  const data = [
    { id: 1, name: 'Item 1', value: 'Value 1' },
    { id: 2, name: 'Item 2', value: 'Value 2' },
    { id: 3, name: 'Item 3', value: 'Value 3' },
  ];

  return (
    <div>
      {isMdDown ? (
        <List>
          {data.map((item) => (
            <ListItem key={item.id}>{item.name}: {item.value}</ListItem>
          ))}
        </List>
      ) : (
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Value</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>{item.name}</TableCell>
                  <TableCell>{item.value}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </div>
  );
};

export default ResponsiveComponent;

And that’s it! With the useBreakpoints hook, you can make your app responsive and user-friendly without breaking a sweat.

Wrapping It Up

The useBreakpoints hook is a simple yet powerful tool that makes managing responsive designs in React a lot easier. By tailoring your UI for different screen sizes, you can create a seamless experience for your users while keeping your code clean and maintainable. Whether you’re building a complex web app or a simple site, this hook can help you deliver polished, professional results. So go ahead, give it a try, and watch your app adapt like a pro!

กว่าจะมาเป็น Software Developer ในบริษัทข้ามชาติ ที่เจ้าของเป็นคนฝรั่งเศส!

Jack Vatcharat — Sat, 11 Jan 2025 12:40:34 +0000

สวัสดีครับ ผมชื่อแจ๊ค ในบทความนี้จะมาเล่าประสบการณ์ก่อนที่จะมาทำงานที่บริษัทปัจจุบัน PALO IT (Thailand) ที่มีบริษัทแม่ตั้งอยู่ที่ฝรั่งเศสครับ ท้าวความไปตอนเด็กผมชอบภาษาอังกฤษมาก แม้จะเรียนมัธยมสายวิทย์-คณิต แต่ผมมักจะฝึกฟังภาษาอังกฤษผ่านการเรียนวิชาอื่นๆ เช่น คณิต ก็จะมีช่อง Khan Academy กับเว็บ MathIsFun.com ที่เข้าไปบ่อยๆ เลยเป็นการปูพื้นฐานให้เรียนมหาวิทยาลัยคณะวิศวกรรมคอมพิวเตอร์ภาคอินเตอร์ครับ

KBTG

พอเรียนจบมาผมได้ทำงานที่ KBTG เผื่อใครไม่รู้จักนะครับ KBTG (KASIKORN Business-Technology Group) เป็นบริษัทพัฒนาเทคโนโลยีของกสิกร เรียกง่ายๆ ว่าบริษัทลูกน่ะแหละครับ และนับว่าโชคดีมากที่ได้ที่นี่เพราะอยู่ใกล้บ้านผมที่สุดและสมัยนั้นรถไฟฟ้า BTS ใกล้บ้านยังไม่เกิดครับ 555

ทำที่ KBTG ได้ 2 ปี มีทั้งใช้ ReactJS, React Native, NodeJS, NestJS, Prisma, Go web framework อย่าง Echo

โปรเจคที่ชอบสุดตอนอยู่ KBTG คือโปรเจคด้านสุขภาพ ซึ่งต้องเขียนแอพแล้วต่อกับ Apple Health เลยพบว่า Apple ไม่เหมือนเจ้าอื่นๆ คืออย่างพวก Fitbit, Garmin จะเก็บข้อมูลพวก heart rate (อัตราการเต้นของหัวใจ) การนอนหลับ สถิติการออกกำลังกายที่ server ของเค้าและเราสามารถดึงข้อมูลผ่าน API ได้เลย ส่วน Apple จะเก็บที่ iCloud ของ user จริงแต่นักพัฒนาไม่มีสิทธิ์ดึงได้ จึงเป็นความท้าทายที่เราต้องเขียนให้แอพดึงข้อมูลตอนเปิดแอพ แสดงผลบนแอพ แล้วเก็บที่ database ของเรา

Allianz Technology Thailand

หลังจากนั้นผมก็ย้ายไป Allianz Technology Thailand ด้วยเหตุผล 3 ข้อ

เพื่อนแนะนำว่า work-life balance ดีมาก (พิสูจน์แล้วว่าจริง )
ที่ KBTG ไม่มีต่างชาติให้คุยภาษาอังกฤษด้วย ผมเจอคนเวียดนามนะครับ แต่เค้าอยู่คนละโปรเจคเลยไม่ได้คุยกันในการทำงาน
หาประสบการณ์ใหม่ๆ

ตอนทำที่นี่เป็น frontend developer และเขียน Angular อย่างเดียว ไม่เคยเขียนมาก่อน อาศัย On-the-job training เลยครับ

ที่นี่ใช้ Scaled Agile Framework (SAFe) ซึ่งเหมาะมากกับบริษัทใหญ่ที่มีหลายทีมทำโปรเจคเดียวกัน เพื่อไม่ให้บทความยาวเกินไป ขอไม่อธิบายลงละเอียดถึง framework นี้นะครับ

PALO IT (Thailand)

ทำได้อยู่ 1 ปี คุยกับเพื่อนร่วมงานเลยรู้จักคนที่ย้ายไป PALO IT (Thailand) ติดต่อคุยกับเค้า คิดว่าน่าสนใจดีด้วยเหตุผล 3 ข้อ

อยากใช้ MacBook Pro ตอนอยู่ Allianz ใช้คอม Lenovo CPU เป็น AMD Ryzen 5 และจอ resolution 1366x768p ถ้าไม่ต่อจอแยกคือดูแล้วปวดตามาก

ผมทำงานที่ Allianz ตอนช่วงโควิด บริษัทอาจจะลดค่าใช้จ่ายพอดีครับ พี่ที่ทำงานใช้ HP จอยังเป็น full hd (1920x1080p) เลย
ยังชอบเขียนแอพอยู่ ตอนอยู่ Allianz เขียนเว็บด้วย Angular v8 ซึ่งเก่ามาก ตอนนั้นล่าสุดน่าจะ v12 แล้ว
อยากเขียน backend บ้าง ตอนอยู่ Allianz เป็น frontend developer จึงเขียนแค่ frontend อย่างเดียว

ผมแอบลังเลก่อนยื่นสมัครงานอยู่เพราะเรื่องนึง คือพี่ที่ทำงานก็เคยทำงานบริษัทขนาดเล็กมาก่อน แล้วเล่าให้ฟังว่าเคยเจอว่าบริษัทหมุนเงินไม่ทัน ขอจ่ายเงินเดือนครึ่งนึง หรือบางที่เลื่อนจ่ายเงินเดือนก็มี โชคดีว่าเพื่อนที่รู้จักทำที่นี่มาปีกว่าแล้ว + บริษัทนี้ไม่ได้ก่อตั้งโดยคนไทยแต่ก่อตั้งโดยคนฝรั่งเศสในปี 2009 และมีออฟฟิศกว่า 10 สาขาทั่วโลก แปลว่าตัดคำว่า startup ออกได้

ตอนผมสัมภาษณ์มี 2 รอบ รอบแรกเป็นคนไทย รอบที่ 2 เป็นคนฝรั่งเศส ทั้งคู่สัมภาษณ์เป็นภาษาอังกฤษและมีโจทย์เขียนโปรแกรมให้ทำ ผมขอสปอยว่าแตกต่างจาก KBTG ที่ใช้ Codility อยากรู้ว่าโจทย์สัมภาษณ์คืออะไรให้สมัครเลยครับ 555

โปรเจคที่ PALO IT (Thailand)

เกริ่นมานาน ขอเข้าส่วนที่ผมชอบมากกับการทำโปรเจคต่างๆ ในบริษัทนี้นะครับ ถ้าเป็นโปรเจคเขียนแอพบนมือถือที่ผมทำอยู่ ในทีมมีถึง 30 คน ได้ใช้ภาษาอังกฤษทำงานทุกวัน ต่างชาติที่มีคนฝรั่งเศส คนเยอรมัน คนฟิลิปปินส์ คนฮ่องกง คนจีน เขียนแอพด้วย React Native และเขียนหลังบ้านด้วย Java Spring Boot ครับ ซึ่งไม่ได้จำกัดว่าทุกโปรเจคเราจะใช้ framework เดียวกัน อยู่ที่การตกลงกับลูกค้าว่าเค้าต้องการอะไรเพื่อไป maintain ต่อครับ

ที่นี่เราจะเป็น full stack developer กัน คือทำได้ทั้ง frontend และ backend ในโปรเจคผมจะเน้น frontend มากกว่าเพราะ requirement ต่างๆ จะหนักทางนั้นครับ

และนี่คือ system architecture อย่างง่าย

BFF ไม่ได้ย่อมาจาก Best Friends Forever นะครับ 555 ย่อมาจาก Backend For Frontend ที่ไม่เรียก backend เฉยๆ เพื่อให้เข้าใจว่าทำมาเพื่อแปลงข้อมูลสำหรับส่งให้ frontend โดยเฉพาะ เช่น เปิดแอพหน้านึงต้องไปต้องเรียกหลังบ้าน 3 เส้น หน้าที่ของ BFF คือเรียก 3 เส้นนั้น เพื่อให้ frontend เรียก BFF เส้นเดียวครับ

Downstream API services คือระบบหลังบ้านของลูกค้า

ตอนพัฒนาแอพบนเครื่อง

End-to-end testing

เพื่อที่จะทำ frontend app ให้มี bug น้อยที่สุด dev ทุกคนจึงต้องเขียน E2E (End-to-end testing) เพื่อต่อกับ simulator (จำลอง downstream api) และยึดตาม acceptance criteria ของ story นั้นๆ หลายคนคงเดาว่า "แบบนี้ก็ต้องมีเครื่องไว้รัน e2e ทุก story สิ" ใช่ครับ เราจะมีเครื่องไว้รันและหมั่นคอยเช็ค report ทุกวันว่าการทำ feature ใหม่ๆ ไปทำให้ของเก่าพังมั้ย

Q: รู้ได้อย่างไรว่า Downstream API ต้องการ request/response body หน้าตาแบบไหน เพราะมีหลาย service มาก?
A: เรายึดจาก API spec ที่ Business Analyst เตรียมให้ครับ หลังจาก sprint demo จบก็จะมี QA เตรียม data ไปทดสอบอีกทีบน UAT

Q: เราทดสอบแอพไปต่อ UAT เองได้มั้ย
A: ได้ครับ วิธีเดียวกับที่ปล่อยแอพให้ tester ทดสอบคือผ่าน App Center ข้อดีของเจ้านี้คือปล่อยให้โหลดได้ทั้ง iOS และ Android

Backend

ฝั่ง backend ก็มีเขียน test ต่อกับ simulator เช่นกัน เป็นการทดสอบว่า logic ถูกต้องไหม เช่น รับข้อมูล A จาก downstream ประมวลผลบางอย่างแล้วควรตอบกลับด้วยข้อมูล B และเราตกลงกันว่า test coverage ต้องเป็น 100%

Management

แน่นอนว่าทีมที่ใหญ่ก็ต้องมีการจัดการที่ดี มี 4 squad แต่ละ squad มี 4-5 คน ก็จะมี scrum master, tech lead และ developer เพื่อดูแล feature ในหมวดนั้นๆ ทุกวันก็มี daily standup ก่อนที่จะเอา story เข้า sprint ก็มี story refinement ก่อนเริ่ม sprint ก็มี sprint planning พอจบ sprint ก็มี sprint retrospective เรียกได้ว่าใช้ Agile methodology ค่อนข้างเต็มรูปแบบเลยครับ

Work from home มั้ย?

คิดว่าหลายคนต้องการคำตอบ ผมเลยแบ่งเป็นหัวข้อใหม่เลยครับ 555 คำตอบคือ Hybrid หมายถึง WFH เป็นหลัก และเข้า office 1 ครั้ง/2 สัปดาห์เพื่อ demo ให้ลูกค้าดู ทั้งนี้ขึ้นอยู่กับโปรเจคนั้นๆ ว่าจำเป็นต้องเข้าออฟฟิศบ่อยแค่ไหนด้วยครับ

โปรเจคนอก PALO IT (Thailand)

ThailandCan

ผมได้โอกาสร่วมพัฒนาเว็บไซต์ https://thailandcan.org/ โดยเฉพาะ landing page ที่ design ใหม่หมดโดย designer ของ PALO IT เอง ก็เป็นโอกาสดีในรื้อฟื้นทักษะการเขียน CSS แบบ responsive ให้ support ทั้งจอคอม แท็บเล็ตและมือถือครับ ตอนเขียนแอพคำนึงแต่มือถือ 555

Workshop

นอกจากโปรเจคที่ได้ทำแล้ว มีโอกาสได้ก้าวออกจาก comfort zone ด้วยการไปช่วยพี่ Paco (Tech Lead) จัด Advanced Prompt Engineering workshop ในงาน KBTG Techtopia 2024

และก็เป็นจุดเริ่มต้นของการจัด workshop เองที่งาน JS Bangkok 2024 ในหัวข้อ From Nodes to Prompts: Exploring Prompt Engineering with Rivet

ถ้าใครพลาดงานไหนไปก็ไม่เป็นไรครับ สามารถกดดูใน GitHub ได้เลย

Advanced Prompt Engineering 2024 workshop
JS Bangkok 2024 workshop มีไฟล์ PDF อธิบายใน repo ด้วยนะ

ขอบคุณที่อ่านมาถึงตรงนี้ครับ หากใครอยากรู้เรื่องอะไรเพิ่มเติมสามารถพิมพ์คอมเม้นถามได้เลยนะครับ ถ้าตอบได้ก็จะตอบครับ และยังมีโปรเจคอื่นๆ ที่น่าสนใจอีก ไว้มีโอกาสจะมาเล่าให้ฟังนะครับ

Boost Your AI Skills with Rivet: A Comprehensive Guide

Jack Vatcharat — Mon, 11 Nov 2024 11:37:44 +0000

Introduction to Prompt Engineering

Prompt engineering is a crucial aspect of working with AI models, particularly those developed by OpenAI. It involves crafting precise and effective prompts to guide the AI in generating the desired responses. This guide aims to provide a comprehensive overview of prompt engineering, drawing insights from the OpenAI documentation and demonstrating how to implement these techniques using the Rivet program.

Why Create This Article?

Clear and effective communication is essential when leveraging advanced AI tools. The purpose of this article is to demystify the process of prompt engineering, making it accessible to both beginners and experienced users. By providing a step-by-step guide on using the Rivet program to create one-shot prompts, this article aims to empower users to harness the full potential of AI in their projects. It serves as a practical resource, helping users understand the logic behind each step and offering examples to illustrate key concepts, ensuring they can effectively communicate with AI models.

Understanding One-Shot Prompts and Prompt Roles

One-Shot Prompt

A one-shot prompt is a single example provided to the AI to demonstrate the desired style or format of the response. It helps the AI understand how to respond to similar inputs without needing multiple examples.

Prompt Roles

System: This prompt sets the overall instructions and guidelines for the AI. It defines the style and tone of the responses.
User: This prompt represents the input or question from the user. It simulates what a user might ask or say to the AI.
Assistant: This prompt provides the AI's response to the user prompt. It shows how the AI should reply based on the given input.

Example from OpenAI Documentation

If you go to Tactic: Provide examples on the OpenAI Doc, you will see the following example (as of September 21, 2024):

The reason they use the terms SYSTEM, USER, and ASSISTANT is not just to indicate that ASSISTANT = AI. They guide us that whenever we call an API, such as gpt-4o-mini, we should not put everything in one prompt. We should create an array like below:

await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [
      {
        role: 'system',
        content: 'Answer in a consistent style.',
      },
      {
        role: 'user',
        content: 'Teach me about patience.',
      },
      {
        role: 'assistant',
        content: 'The river that carves the deepest valley flows from a modest spring; the grandest symphony originates from a single note; the most intricate tapestry begins with a solitary thread.',
      },
      {
        role: 'user',
        content: 'Teach me about the ocean.',
      },
    ],
  })

The example from the OpenAI Doc shows us that the AI won't answer how to be patient and what the ocean is because we provided an example that it should answer like a poem.

However, this article focuses on how to do this using the Rivet program, which is a no-code tool. So let's get started by creating a one-shot prompt in Rivet.

Prerequisites

Before you begin, make sure you have the following:

GroqAI or OpenAI API Key: You’ll need an API key to access the AI services.
Rivet program installed: Ensure that the Rivet program is installed on your computer. You can download it from the official Rivet website.

How to Create a One-Shot Prompt in Rivet

Step 1: Open the Rivet Program

First, launch the Rivet program on your computer. If you don't have it installed yet, download and install it from the official website.

Step 2: Create a New Project

Once the program is open, create a new project. This will be the workspace where you'll build your one-shot prompt.

Step 3: Create a System Prompt Node

In your new project, right-click on the canvas and select Add => Text => Prompt to create a new prompt node.

Click the gear icon and set this node as the System Prompt.

Enter the following text: "Answer in a consistent style."

Step 4: Create a User Prompt Node

Create another prompt node.
Set this node as the User Prompt.
Enter the example input: "Teach me about patience."

Step 5: Create an Assistant Prompt Node

Create another prompt node.
Set this node as the Assistant Prompt.
Enter the desired AI response to the user prompt. For example: "The river that carves the deepest valley flows from a modest spring; the grandest symphony originates from a single note; the most intricate tapestry begins with a solitary thread."

Step 6: Create Another User Prompt Node

Create one more prompt node.
Set this node as the User Prompt.
Enter the task you want the AI to perform in this node. For example: "Teach me about the ocean."

Step 7: Create an Assemble Prompt Node

Create an assemble prompt node.

Draw lines from the system, user, and assistant prompt nodes to the assemble prompt node.

Step 8: Add a Chat Node

Create a chat node.

Click the gear icon, expand the advanced section, and set the endpoint, custom model, and headers. The following screenshot shows an example of how to configure it for GroqAI. Replace <your-api-key> with your GroqAI API key.

Draw a line from the assemble prompt node to the chat node.

Step 9: Run the Prompt

Click the Run button to execute the prompt. The output will be generated based on the one-shot prompt you created. If you followed the example text in this guide, the AI response should maintain a consistent style, similar to the initial poetic response.

Conclusion

Prompt engineering is a powerful tool for guiding AI models to generate desired responses. This guide has provided a clear, step-by-step process for creating one-shot prompts using the Rivet program. By understanding and applying these steps, you can effectively communicate with AI models, making your projects more efficient and impactful. Happy prompting!

Harness AI for Free: A Beginner’s Guide to GroqAI API Keys

Jack Vatcharat — Mon, 11 Nov 2024 11:29:36 +0000

Introduction

As a tech enthusiast, you know the value of integrating AI into your projects. However, many popular AI services, like the ChatGPT API, require pay-per-use fees. That’s why I’m excited to share how you can use GroqAI for free. This guide will walk you through the process of creating an API key from GroqAI, so you can start leveraging their powerful AI models without worrying about costs.

How to Create an API Key from GroqAI

Step 1: Sign Up for GroqAI

Visit the GroqAI website.
If you don't already have an account, click on the "Sign Up" button and fill in your details. If you already have an account, simply log in.

Step 2: Navigate to the API Keys Section

Once you're logged in, you'll be directed to your dashboard.
Look for the "API Keys" option in the left-side navigation panel and click on it or go to https://console.groq.com/keys

Step 3: Create a New API Key

Click on "Create API Key."
A modal will pop up asking you to provide a name for your new API key. Choose a name that helps you easily identify it later.
Click the "Submit" button to generate your API key.

Step 4: Secure Your API Key

Once generated, copy the API key to your clipboard. You won't be able to view it again after closing the dialog box.
Save the key in a secure location, such as a password manager, to ensure it doesn't get lost or exposed.

Step 5: Start Using Your API Key

Check out the blog post I wrote. Even if you’re a non-programmer, you can follow along because the program is a no-code tool. This way, you can practice prompt engineering without writing a single line of code.

Conclusion

Creating an API key from GroqAI is a straightforward process that opens up a world of possibilities for integrating powerful AI models into your projects. Unlike other services that require pay-per-use fees, GroqAI offers a free option, making it accessible for tech enthusiasts and developers alike. By following the steps outlined in this guide, you can quickly generate and secure your API key, allowing you to start experimenting with AI without any cost concerns. Happy coding, and enjoy exploring the capabilities of GroqAI!

Getting Started with NativeWind: Using Tailwind CSS in React Native

Jack Vatcharat — Sat, 21 Sep 2024 08:42:13 +0000

What is NativeWind?

NativeWind is a library that allows you to use Tailwind CSS in React Native projects. It helps you style your mobile apps quickly and efficiently.

Why Use NativeWind?

Easy to Use: You can write styles directly in your components.
Consistent Design: Tailwind CSS ensures your design is consistent across different components.
Fast Development: Quickly apply styles without writing a lot of custom CSS.

Prerequisites

Before you start, make sure you have:

Node.js installed
React Native CLI installed
Basic knowledge of React Native

Step-by-Step Guide

1. Create a New React Native Project

If you haven't already, create a new React Native project using React Native CLI:

npx react-native init MyNativeWindApp
cd MyNativeWindApp

2. Install NativeWind

Next, install NativeWind and its dependencies:

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

# Yarn
yarn add nativewind
yarn add --dev tailwindcss@3.3.2

3. Setup Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.js file.

Add the paths to all of your component files in your tailwind.config.js file. If you put your screens and components inside the src folder, update <custom-folder> with your folder name. For example, './src/**/*.{js,jsx,ts,tsx}'.

// tailwind.config.js

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./<custom-folder>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Make sure nativewind.d.ts file is created in your project's root directory with the following content:

/// <reference types="nativewind/types" />

// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

4. Configure Babel

Add the NativeWind plugin to your Babel configuration. Open your babel.config.js file and add the following:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'nativewind/babel',
  ],
}

5. Use NativeWind in Your Components

Now, you can start using NativeWind in your components. Here's an example:

import React from 'react';
import { View, Text } from 'react-native';
import { NativeWindStyleSheet } from 'nativewind';

export default function App() {
  return (
    <View className="flex-1 justify-center items-center bg-blue-500">
      <Text className="text-white text-lg">Hello, NativeWind!</Text>
    </View>
  );
}

Button Component

To add margin or padding to buttons, wrap them with a styled component using styled(Button) as shown below:

import { styled } from 'nativewind'
import React from 'react'
import { Pressable, StyleProp, Text, ViewStyle } from 'react-native'

const variantStyles = {
  default: {
    background: 'bg-white',
    text: 'text-black',
  },
  primary: {
    background: 'bg-blue-500',
    text: 'text-white',
  },
}

const StyledPressable = styled(Pressable)

interface Props {
  title: string
  onPress?: () => void
  disabled?: boolean
  variant?: keyof typeof variantStyles
  style?: StyleProp<ViewStyle>
}

function Button({
  onPress,
  title,
  disabled,
  variant = 'default',
  style,
}: Props): JSX.Element {
  return (
    <StyledPressable
      disabled={disabled}
      onPress={onPress}
      className={`rounded-lg p-2 my-1 ${disabled ? 'bg-gray-300' : ''} 
      ${variantStyles[variant].background} active:bg-slate-500 `}
      style={style}>
      <Text
        className={`text-lg font-bold ${variantStyles[variant].text} text-center`}>
        {title}
      </Text>
    </StyledPressable>
  )
}

// Export the styled component
export default styled(Button)

You can now use the Button component in your app. Notice that the className prop is used to apply styles to the component.

import React from 'react'
import { View } from 'react-native'
import Button from './Button'

export default function App() {
  return (
    <View className="flex-1 justify-center items-center">
        <Text>Hello world!</Text>
        <Button title="Press Me" className="mt-4" />
    </View>
  )
}

Conclusion

NativeWind makes it easy to style your React Native apps using Tailwind CSS. With this guide, you should be able to set up and start using NativeWind in your projects. Happy coding!