Hướng dẫn phát triển ứng dụng Expo (thanh toán, quảng cáo, onboarding)

Bộ quy tắc dựng app Expo React Native kèm onboarding, paywall RevenueCat, banner AdMob và đa ngôn ngữ theo một cấu trúc chuẩn.

Lập trìnhTrung cấp★ 113⑂ 11Điểm AI 8/10Cập nhật lần cuối: 29 thg 1, 2026

Làm được gì

Bắt buộc mọi project Expo mới phải có các màn hình onboarding, paywall, settings và cấu trúc thư mục src/app, src/context, src/lib, src/locales.
Đưa mẫu code cho RevenueCat (thanh toán), AdMob (banner + cấu hình plugin trong app.json và Test IDs), expo-notifications, i18next và Reanimated.
Quy định điều hướng bằng NativeTabs, thứ tự bọc Context (Theme → Onboarding → Ads) và luồng Onboarding → Paywall → Tabs.
Danh sách cấm dùng (AsyncStorage, expo-av, lineHeight, Tabs cũ) và bước dọn dẹp sau khi code: npx expo install --fix rồi npx expo prebuild --clean.

Phù hợp với ai

Lập trình viên indie làm nhiều app React Native/Expo Router theo mẫu.
Người cần template app kiếm tiền bằng subscription và quảng cáo.
Ai muốn Claude Code tự tuân theo một stack cố định mà không phải nhắc lại mỗi lần.

Ví dụ sử dụng

"Tạo app Expo mới" → hỏi bundle ID trước, chạy bunx create-expo, rồi tạo đủ onboarding/paywall/settings.
"Thêm banner quảng cáo dưới tab bar" → dùng TestIds.BANNER khi dev và ẩn quảng cáo cho người dùng premium.
"Làm màn hình paywall" → hai gói Weekly/Yearly với badge '50% OFF' và gắn package RevenueCat.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/zaferayan/skills/HEAD/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)

Tải tệp ZIP bằng nút bên dưới.
Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.

↓ Tải ZIP

Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục SKILL.m từ repo GitHub zaferayan/skills vào ~/.claude/skills/zafer-skills/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/zaferayan/skills.git ~/.claude/skills/zafer-skills

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

Mở Terminal.
Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
Clone repo vào đó: git clone https://github.com/zaferayan/skills.git ~/.claude/skills/zafer-skills
Kiểm tra tồn tại file ~/.claude/skills/zafer-skills/SKILL.md.
Mở lại Claude Code và thử yêu cầu: "Tạo cho tôi một app Expo mới".
Lưu ý: không chạy npm install trong thư mục skill; hãy tạo project thật ở đường dẫn riêng, ví dụ ~/Projects/ten-app.

Xem mã nguồn trên GitHub ↗