react-native

Provide React Native development patterns with Expo, React Navigation, and NativeWind.

Updated Mar 8, 2026
One-click install
npx skills add https://github.com/brivaro/brivaro-ai-wizard --skill react-native-brivaro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/brivaro/brivaro-ai-wizard/tree/main/skills/react-native
Command: npx skills add https://github.com/brivaro/brivaro-ai-wizard --skill react-native-brivaro

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 libraries.

Core Features & Use Cases

  • Project Structure: Guidance on organizing your React Native project for maintainability.
  • Component Development: Examples of functional components with TypeScript and styling.
  • Navigation: Setup and usage of Expo Router for app navigation.
  • Styling: Integration and examples for NativeWind (Tailwind CSS for React Native).
  • State Management: Demonstrates using Zustand with persistence.
  • Platform-Specific Code: Techniques for handling iOS and Android differences.
  • Use Case: When starting a new mobile app project with Expo, use this skill to set up a robust project structure, implement navigation, and style components effectively.

Quick Start

Load this skill when building mobile applications with React Native.

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 and TypeScript?▼

To structure a React Native project, organize functional components and configure Expo Router navigation for maintainability. Using TypeScript ensures type safety while establishing a robust foundation for your mobile app's scaling needs.

How do I set up navigation in a React Native app using Expo Router?▼

Setting up navigation in a React Native app involves configuring Expo Router to manage screen transitions. This file-based routing system streamlines the user flow management process and replaces manual navigation logic.

What is the best way to style React Native components with NativeWind?▼

The best way to style React Native components is using NativeWind to apply Tailwind CSS utility classes directly. This method avoids anti-patterns like inline styles, providing a consistent styling approach similar to web development.

How do I manage state in a React Native app with Zustand?▼

Managing state in a React Native app with Zustand involves creating lightweight stores that support persistence. This pattern handles global state efficiently without the boilerplate of heavier libraries, simplifying data sharing across components.

Can I use React Query custom hooks in a React Native Expo project?▼

Yes, you can implement custom hooks with React Query in a React Native Expo project. This integration handles data fetching and caching efficiently, ensuring your mobile application synchronizes remote data effectively across components.

How do I handle platform-specific code for iOS and Android in React Native?▼

Handling platform-specific code in React Native requires using the Platform module to conditionally render iOS and Android variations. This technique addresses visual and functional differences while maintaining a unified component structure.