react-native

Develop React Native mobile apps with Expo, TypeScript, and NativeWind.

2|Updated Aug 2, 2023

Search Tags:#cross-platform #mobile development #react native #expo #expo router #nativewind

Ready to run

npx skills add https://github.com/ic-facet/gestion-programas-asignatura --skill react-native-ic-facet

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-native
Source: https://github.com/ic-facet/gestion-programas-asignatura/tree/main/.cursor/skills/react-native
Command: npx skills add https://github.com/ic-facet/gestion-programas-asignatura --skill react-native-ic-facet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and best practices for developing cross-platform mobile applications using React Native, enabling efficient development for both iOS and Android from a single codebase.

Core Features & Use Cases

Component Development: Offers patterns for creating reusable and type-safe functional components.
Navigation: Demonstrates setup and usage of Expo Router for app navigation.
Styling: Includes examples of using NativeWind for Tailwind CSS-like styling in React Native.
State Management: Shows integration with Zustand for persistent state management.
Platform-Specific Code: Guides on handling differences between iOS and Android.
Use Case: Develop a new feature for a mobile e-commerce app, including product listing, detail view, and a shopping cart, ensuring a consistent user experience across both iOS and Android devices.

Quick Start

Load this skill when you need to build mobile applications with React Native and Expo.

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 cross-platform mobile app using Expo Router?▼

To structure a cross-platform mobile app with Expo Router, follow patterns for project organization, functional components with TypeScript, and platform-specific code handling to ensure consistent navigation across iOS and Android.

What is the best way to handle safe areas and keyboard interactions in React Native?▼

The best way to handle safe areas and the keyboard in React Native is to apply specific patterns for safe area and keyboard handling, ensuring UI elements remain accessible and unobstructed during text input on both platforms.

Can I use NativeWind for Tailwind CSS styling in a React Native project?▼

Yes, you can use NativeWind for Tailwind CSS-like styling in a React Native project. It provides a utility-first approach to style cross-platform components efficiently without writing separate stylesheets.

Does this React Native guide support state management with Zustand?▼

Yes, this React Native guide supports state management with Zustand. It demonstrates how to integrate Zustand for persistent state management across your mobile application to maintain data consistency.

How do I write platform-specific code for iOS and Android in a single codebase?▼

To write platform-specific code in a single codebase, use React Native's built-in module extensions and conditional logic to handle differences between iOS and Android while maintaining shared core components.