skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

webdev-readme-mobile

Guides development of Expo SDK 54 React Native mobile apps with NativeWind styling.

Updated Aug 28, 2026
Search Tags:#typescript#tailwind#react native#mobile app#expo#nativewind#template guide
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill webdev-readme-mobile-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-readme-mobile
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/webdev-readme-mobile
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill webdev-readme-mobile-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building mobile apps with the Expo template requires knowing its conventions, file layout, theming system, and common pitfalls; this Skill provides the complete development guide so agents and developers avoid broken flows, crashes, and styling mistakes. ## Core Features & Use Cases - Template Conventions: Documents the Expo SDK 54 + React Native 0.81 + TypeScript stack, project structure, ScreenContainer SafeArea handling, and tab icon mapping rules. - Styling & Theming: Explains NativeWind v4 Tailwind usage, the shared theme.config.js token system, dark mode behavior, and the cn() class-merging utility. - Pitfall & Crash Prevention: Lists common failures (Pressable className, gesture worklets, iOS ph:// URIs, missing icon mappings) with concrete fixes, plus interaction, haptics, and animation guidelines. - Use Case: When scaffolding a new mobile-app feature, follow the guide to edit app/(tabs)/index.tsx, register icons in icon-symbol.tsx, wire providers in app/_layout.tsx, and pass the delivery checklist before shipping. ## Quick Start Use the webdev-readme-mobile guide to build a new screen in my Expo mobile app following the template conventions.

Frequently Asked Questions about webdev-readme-mobile

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a mobile app screen with Expo Router and NativeWind?▼

Create the screen under app/ using Expo Router file-based routing and wrap content in the ScreenContainer component for SafeArea handling. Style with NativeWind Tailwind classes like flex-1, p-4, and text-foreground instead of inline styles.

How do I add tab bar icons in an Expo Router app?▼

Add the SF Symbol to Material Icons mapping in components/ui/icon-symbol.tsx before referencing the icon in app/(tabs)/_layout.tsx. Using an unmapped icon name crashes the app, so the mapping must come first.

Does NativeWind support dark mode in React Native?▼

Yes, this template handles dark mode through ThemeProvider and CSS variables defined in theme.config.js. Use color tokens like bg-background and text-foreground directly; no dark: prefix is needed because the scheme switches automatically.

Why is my Pressable onPress not firing in NativeWind?▼

Pressable className is globally disabled in this template to avoid NativeWind pitfalls, which breaks interaction when classes are used. Pass all interaction and layout styles through the style prop instead of className.

Why does my iOS app crash inside gesture callbacks?▼

Gesture handlers run as worklets on the UI thread, so calling JS functions directly crashes on iOS. Add .runOnJS(true) to the gesture or wrap JS calls with runOnJS() from react-native-reanimated.

Should I use Zustand or React Context for Expo app state?▼

Default to React Context with useReducer or useState, persisting with AsyncStorage when needed. If you choose Zustand, selectors must return stable references and subscribe to data rather than functions to avoid stale renders.

Related Skills

Explore More Software Engineering Skills→
rmethodmrmethodm

ss-setup

Configure StyleSeed design locks by selecting grammar, recipes, and tokens before scaffolding screens.

Community
Advanced
Military-Veteran-Team-LPT-RealtyMilitary-Veteran-Team-LPT-Realty

webdev-readme-mobile-backend

Implements backend features for Expo mobile apps using Manus OAuth, Drizzle, and tRPC.

Official
Advanced
capawesome-teamcapawesome-team
37

capacitor-in-app-purchases

Configure and test in-app purchases in Capacitor apps across iOS and Android.

Official
Advanced
nihalnihalaninihalnihalani

jac-mobui

Build cross-platform mobile and web apps in Jac using React Native primitives.

Community
Advanced