React Native App Development Skill

React Native App Development

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Create robust cross-platform mobile applications using React Native with modern development patterns including navigation, state management, API integration, and native module handling.

When to Use

Building iOS and Android apps from single codebase
Rapid prototyping for mobile platforms
Leveraging web development skills for mobile
Sharing code between React Native and React Web
Integrating with native modules and APIs

Quick Start

Minimal working example:

// Navigation with React Navigation
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function HomeStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: "#6200ee" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: "Home Feed" }}
      />
      <Stack.Screen name="Details" component={DetailsScreen} />
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

| Guide | Contents | |---|---| | Project Setup & Navigation | Project Setup & Navigation | | State Management with Redux | State Management with Redux | | API Integration with Axios | API Integration with Axios | | Functional Component with Hooks | Functional Component with Hooks |

Best Practices

✅ DO

Use functional components with React Hooks
Implement proper error handling and loading states
Use Redux or Context API for state management
Leverage React Navigation for routing
Optimize list rendering with FlatList
Handle platform-specific code elegantly
Use TypeScript for type safety
Test on both iOS and Android
Use environment variables for API endpoints
Implement proper memory management

❌ DON'T

Use inline styles excessively (use StyleSheet)
Make API calls without error handling
Store sensitive data in plain text
Ignore platform differences
Create large monolithic components
Use index as key in lists
Make synchronous operations
Ignore battery optimization
Deploy without testing on real devices
Forget to unsubscribe from listeners

Agent Skills: React Native App Development

Install this agent skill to your local

Skill Files