Bài viết này giới thiệu cách tạo ra một bộ các component và hook chung cho React Web và React Native, giúp team save thời gian và duy trì nhất quán UI. Đầu tiên, chúng ta xác định các element UI cơ bản như Button, Input, Card và chúng ta viết chúng dưới dạng file .tsx trong một repo riêng, sử dụng TypeScript để typed props. Khi cần dùng trong cả hai môi trường, chỉ cần import component từ repo này, không cần sao chép mã. Tiếp theo, chúng ta tạo một custom hook named useFormValidation. Hook này nhận props: initialValues, validationRules và onSubmit. Nội dung của hook sử dụng Zustand hoặc Context để quản lý trạng thái form, đồng thời áp dụng các validationRule để hiển thị lỗi. Vì hook được viết bằng TypeScript, nó có thể được dùng trong React Web (với DOM) và React Native (với UI components). Để triển khai, chúng ta tạo một file hooks/useFormValidation.ts, khai báo interface FormState, và trong useEffect thực hiện validate. Khi chạy trên React Native, hook vẫn hoạt động vì nó không phụ thuộc vào DOM, chỉ sử dụng setState. Một ví dụ thực tế: một form đăng ký với các trường email, password và phone. Khi người dùng nhập email không hợp lệ, hook sẽ trả về lỗi 'Invalid email' và hiển thị dưới Input. Sau khi form hợp lệ, onSubmit được gọi và dữ liệu được gửi qua API chung. Ngoài ra, chúng ta có thể xây dựng một component library với các Button, Input, Modal sử dụng styled‑components cho web và react‑native‑paper cho mobile. Mỗi component được thiết kế với props theme, cho phép thay đổi màu sắc và kích thước một cách nhất quán. Cuối cùng, để duy trì tính nhất quán, chúng ta nên đặt các file type definitions và helper functions trong thư mục shared, và sử dụng Yarn workspaces hoặc PNPM monorepo để quản lý các package chung. Những bước này giúp team giảm duplicate code, giảm lỗi UI và tăng tốc độ phát triển.