react-native

Develop cross-platform React Native apps with Expo, React Navigation, and NativeWind.

2|Updated Jun 11, 2024
One-click install
npx skills add https://github.com/gutierrezp22/administracion-departamentos --skill react-native-gutierrezp22
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/gutierrezp22/administracion-departamentos/tree/main/.cursor/skills/react-native
Command: npx skills add https://github.com/gutierrezp22/administracion-departamentos --skill react-native-gutierrezp22

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides patterns and best practices for developing cross-platform mobile applications efficiently using React Native, Expo, and related technologies.

Core Features & Use Cases

  • Project Structure: Guidance on organizing React Native projects for scalability.
  • Component Development: Best practices for functional components with TypeScript.
  • Platform-Specific Code: Strategies for handling iOS and Android differences.
  • Navigation: Implementing navigation with Expo Router and React Navigation.
  • Styling: Utilizing NativeWind for Tailwind CSS in React Native.
  • State Management: Examples using Zustand with persistence.
  • API Integration: Patterns for data fetching and mutation with React Query.

Quick Start

Use the react-native skill to set up a new Expo project with the tabs template.

Frequently Asked Questions about react-native

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

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

Structure a React Native project by organizing routes and components around Expo Router conventions, separating platform-specific code, and using TypeScript for functional components to ensure cross-platform scalability for iOS and Android.

What's the best way to manage state in a cross-platform mobile app using Zustand?

Manage state in a cross-platform mobile app using Zustand by creating persistent stores that integrate seamlessly with React Native, ensuring data is maintained across app sessions without complex boilerplate.

Can I use Tailwind CSS for styling in React Native?

Yes, you can use Tailwind CSS for styling in React Native by implementing NativeWind, which allows you to apply utility classes directly to components for efficient cross-platform UI development.

How do I fetch and mutate API data in a React Native app?

Fetch and mutate API data in a React Native app by integrating React Query, which provides patterns for data fetching, caching, and mutations to handle remote state efficiently across iOS and Android.

Does this React Native skill support handling platform-specific code for iOS and Android?

Yes, this React Native skill provides specific strategies and patterns for handling platform-specific code, allowing you to manage differences between iOS and Android effectively within a single cross-platform codebase.