React Native Development

React Native Development Skill

Overview

This skill provides deep integration with the React Native ecosystem for cross-platform mobile development. It enables execution of React Native CLI commands, component generation, build optimization, and comprehensive debugging capabilities.

Allowed Tools

• bash - Execute React Native CLI, Expo CLI, and npm/yarn commands
• read - Analyze React Native project files, configurations, and components
• write - Generate and modify React Native components and configurations
• edit - Update existing React Native code and configurations
• glob - Search for React Native components and configuration files
• grep - Search for patterns in React Native codebase

Capabilities

Core Development

1. React Native CLI Operations
2. Initialize new React Native projects
3. Run Metro bundler with custom configurations
4. Execute platform-specific builds (iOS/Android)
5. Link native dependencies
6. Generate native code bridges

1. Expo CLI Operations
2. Create and manage Expo projects
3. Configure EAS Build and EAS Submit
4. Manage Expo config plugins
5. Handle over-the-air updates
6. Prebuild for bare workflow ejection

1. Component Generation
2. Generate TypeScript-based functional components
3. Create custom hooks with proper typing
4. Implement React Navigation screens and navigators
5. Build reusable UI component libraries
6. Generate Storybook stories for components

State Management

1. Redux Toolkit Integration
2. Generate Redux slices with createSlice
3. Configure RTK Query for API caching
4. Implement async thunks with proper typing
5. Set up Redux DevTools integration
6. Create selectors with createSelector

1. Zustand/Jotai/Recoil
2. Configure lightweight state stores
3. Implement atomic state patterns
4. Set up persistence middleware
5. Create derived state computations

Navigation

1. React Navigation
2. Configure Stack, Tab, and Drawer navigators
3. Implement type-safe navigation with TypeScript
4. Set up deep linking configurations
5. Handle authentication flows
6. Implement nested navigation patterns

Performance

1. Performance Optimization
2. Configure Hermes JavaScript engine
3. Implement FlatList/FlashList optimizations
4. Set up React Native Performance monitoring
5. Analyze and fix re-render issues
6. Implement lazy loading and code splitting

1. Native Module Integration
2. Configure TurboModules and JSI
3. Bridge native code (Objective-C/Swift/Java/Kotlin)
4. Set up Codegen for native modules
5. Debug native crashes and issues

Testing

1. Testing Configuration
2. Configure Jest with React Native preset
3. Set up React Native Testing Library
4. Implement component snapshot testing
5. Configure Detox for E2E testing
6. Mock native modules effectively

Debugging

1. Debug Tools
2. Configure Flipper plugins
3. Set up Reactotron integration
4. Use React DevTools for component inspection
5. Debug network requests
6. Profile JavaScript performance

Target Processes

This skill integrates with the following processes:

• react-native-app-setup.js - Project initialization and configuration
• cross-platform-ui-library.js - Shared component development
• mobile-testing-strategy.js - Test implementation and coverage
• mobile-performance-optimization.js - Performance tuning

Dependencies

Required

• Node.js 18+
• npm or yarn package manager
• React Native CLI (npx react-native)
• Watchman (macOS)

Optional

• Expo CLI (npx expo)
• Android Studio with Android SDK
• Xcode (macOS only)
• Flipper
• Reactotron

Configuration

Project Structure

project-root/
├── src/
│   ├── components/
│   ├── screens/
│   ├── navigation/
│   ├── store/
│   ├── hooks/
│   ├── services/
│   ├── utils/
│   └── types/
├── __tests__/
├── android/
├── ios/
├── metro.config.js
├── babel.config.js
├── tsconfig.json
└── package.json

Metro Configuration

// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Usage Examples

Initialize Project

# Create new React Native project
npx react-native init MyApp --template react-native-template-typescript

# Or with Expo
npx create-expo-app MyApp --template expo-template-blank-typescript

Generate Component

// src/components/Button/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

export const Button: React.FC<ButtonProps> = ({
  title,
  onPress,
  variant = 'primary',
  disabled = false,
}) => {
  return (
    <TouchableOpacity
      style={[styles.button, styles[variant], disabled && styles.disabled]}
      onPress={onPress}
      disabled={disabled}
      activeOpacity={0.8}
    >
      <Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
  },
  primary: {
    backgroundColor: '#007AFF',
  },
  secondary: {
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#007AFF',
  },
  disabled: {
    opacity: 0.5,
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
  },
  primaryText: {
    color: '#FFFFFF',
  },
  secondaryText: {
    color: '#007AFF',
  },
});

Configure Navigation

// src/navigation/RootNavigator.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from '../screens/HomeScreen';
import { DetailsScreen } from '../screens/DetailsScreen';

export type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export const RootNavigator: React.FC = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Configure Redux Store

// src/store/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { api } from './api';
import userReducer from './slices/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

setupListeners(store.dispatch);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Quality Gates

Code Quality

• TypeScript strict mode enabled
• ESLint with React Native config
• Prettier for code formatting
• No any types in production code

Performance Benchmarks

• App launch time < 2 seconds
• FPS maintained at 60fps during scrolling
• Memory usage within platform limits
• Bundle size optimized with tree shaking

Test Coverage

• Unit test coverage > 80%
• Component test coverage > 70%
• E2E critical paths covered

Error Handling

Common Issues

1. Metro bundler cache issues

``bash npx react-native start --reset-cache ``

1. iOS pod installation failures

```bash cd io