coding-in-react-native-expo

Automate React Native Expo best practices for project structure, routing, and components.

1|Updated Jun 14, 2025
One-click install
npx skills add https://github.com/kishan04rajput/ai-ide-rules --skill coding-in-react-native-expo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coding-in-react-native-expo
Source: https://github.com/kishan04rajput/ai-ide-rules/tree/main/global_skills/coding-in-react-native-expo
Command: npx skills add https://github.com/kishan04rajput/ai-ide-rules --skill coding-in-react-native-expo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured guidelines to ensure consistency, maintainability, and quality when developing React Native apps with Expo and Expo Router.

Core Features & Use Cases

  • Project structure & routing: Use the app/ directory for screens and routes; define layouts with _layout.tsx and dynamic routes.
  • Components & styling: Enforce native components, responsive styling, and optional shared components.
  • UI/UX best practices: Platform-specific variants, gestures, safe areas, and performance considerations.
  • State & logic: Use hooks, context for shared state, and proper API integration patterns.
  • Performance: Prefer FlatList for lists; memoization; avoid inline styles for many items.
  • Expo APIs & Data: Correctly manage permissions, fonts, and API services via centralized modules.
  • Coding standards: Naming conventions, code structure, and DRY principles.
  • Common pitfalls: Avoid web-only constructs, remove console.log in prod.

Quick Start

Follow this skill's guidelines to scaffold a new Expo Router project or audit an existing one. Start by creating the app/ structure, then apply the recommended patterns to a sample screen, and run the app to validate UI consistency.

Frequently Asked Questions about coding-in-react-native-expo

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

FAQPage Schema
How do I structure a React Native Expo Router project for maintainability?

Structure a React Native Expo Router project using the app/ directory for screens, defining layouts with _layout.tsx, and applying shared components to enforce consistency and maintainability across your application.

What are the best practices for UI and styling in Expo apps?

Best practices for Expo UI and styling include enforcing native components, applying responsive styling, using SafeArea, and implementing platform-specific variants to ensure a consistent user experience.

How do I improve React Native Expo app performance for large lists?

Improve React Native Expo app performance by using FlatList for rendering lists, applying memoization, and avoiding inline styles for many items to reduce rendering overhead and boost responsiveness.

How do I manage state and API integration in an Expo Router project?

Manage state and API integration in an Expo Router project by using hooks and context for shared state, alongside centralized modules for API services to standardize data fetching and logic organization.

What common pitfalls should I avoid when developing with React Native Expo?

Avoid common React Native Expo pitfalls by steering clear of web-only constructs, removing console.log statements in production, and following established naming conventions and DRY principles.

Can I use this approach to audit an existing React Native Expo project?

Yes, you can audit an existing React Native Expo project by applying these guidelines to review your current structure, styling, navigation, and performance, standardizing patterns during refactoring tasks.