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.