React Native Mobile Development

Level 1: Quick Reference (~700-900 tokens)
Level 2: Implementation Guide (~4000-5000 tokens)
Level 3: Deep Dive Resources (external links)

Level 1: Quick Reference

Core Components

import { View, Text, ScrollView, FlatList, Image, TouchableOpacity } from 'react-native';

// Basic Layout
<View style={styles.container}>
  <Text style={styles.title}>Hello World</Text>
  <Image source={require('./logo.png')} style={styles.image} />
  <TouchableOpacity onPress={handlePress}>
    <Text>Press Me</Text>
  </TouchableOpacity>
</View>

// List Rendering (Performance Optimized)
<FlatList
  data={items}
  renderItem={({ item }) => <ItemCard item={item} />}
  keyExtractor={item => item.id}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
/>

// Scrollable Content
<ScrollView contentContainerStyle={styles.scrollContent}>
  {/* Long content */}
</ScrollView>

Navigation (React Navigation v6)

// Stack Navigator
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Navigate Between Screens
navigation.navigate('Details', { itemId: 42 });
navigation.goBack();

Styling

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    color: '#333',
    fontWeight: 'bold',
  },
});

Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 } },
      android: { elevation: 4 },
    }),
  },
});

// Platform-specific files
// Button.ios.tsx
// Button.android.tsx

Essential Checklist

• Use FlatList for long lists (virtualized rendering)
• Implement React.memo() for expensive components
• Handle safe area insets (notches, status bars)
• Test on both iOS and Android devices
• Optimize images (use proper dimensions, formats)
• Handle keyboard avoiding behavior
• Implement proper navigation typing
• Use useCallback and useMemo appropriately
• Handle network errors and offline states
• Add accessibility labels for screen readers

Level 2:

📚 Full Examples: See [REFERENCE.md](./REFERENCE.md) for complete code samples, detailed configurations, and production-ready implementations.

Implementation Guide

1. Core Components and APIs

Layout Components

See [REFERENCE.md](./REFERENCE.md#example-0) for complete implementation.

Interactive Components

See [REFERENCE.md](./REFERENCE.md#example-1) for complete implementation.

Input Components

See [REFERENCE.md](./REFERENCE.md#example-2) for complete implementation.

List Components

See [REFERENCE.md](./REFERENCE.md#example-3) for complete implementation.

2. Navigation Architecture

React Navigation v6 Setup

See [REFERENCE.md](./REFERENCE.md#example-4) for complete implementation.

Tab Navigation

See [REFERENCE.md](./REFERENCE.md#example-5) for complete implementation.

Drawer Navigation

See [REFERENCE.md](./REFERENCE.md#example-6) for complete implementation.

3. State Management

Redux Toolkit

See [REFERENCE.md](./REFERENCE.md#example-7) for complete implementation.

Zustand (Lightweight Alternative)

See [REFERENCE.md](./REFERENCE.md#example-8) for complete implementation.

React Query (Server State)

See [REFERENCE.md](./REFERENCE.md#example-9) for complete implementation.

4. Styling and Theming

StyleSheet API

See [REFERENCE.md](./REFERENCE.md#example-10) for complete implementation.

Styled Components

See [REFERENCE.md](./REFERENCE.md#example-11) for complete implementation.

Responsive Design

See [REFERENCE.md](./REFERENCE.md#example-12) for complete implementation.

5. Platform-Specific Code

Platform API

See [REFERENCE.md](./REFERENCE.md#example-13) for complete implementation.

File Extensions

See [REFERENCE.md](./REFERENCE.md#example-14) for complete implementation.

Conditional Rendering

See [REFERENCE.md](./REFERENCE.md#example-15) for complete implementation.

6. Native Modules and Bridges

Using Native Modules

See [REFERENCE.md](./REFERENCE.md#example-16) for complete implementation.

Linking to Native APIs

See [REFERENCE.md](./REFERENCE.md#example-17) for complete implementation.

7. Performance Optimization

Component Optimization

See [REFERENCE.md](./REFERENCE.md#example-18) for complete implementation.

FlatList Optimization

See [REFERENCE.md](./REFERENCE.md#example-19) for complete implementation.

InteractionManager

See [REFERENCE.md](./REFERENCE.md#example-20) for complete implementation.

Image Optimization

See [REFERENCE.md](./REFERENCE.md#example-21) for complete implementation.

8. Testing

Jest Unit Tests

See [REFERENCE.md](./REFERENCE.md#example-22) for complete implementation.

React Native Testing Library

See [REFERENCE.md](./REFERENCE.md#example-23) for complete implementation.

E2E Testing (Detox)

See [REFERENCE.md](./REFERENCE.md#example-24) for complete implementation.

9. Accessibility

Screen Reader Support

See [REFERENCE.md](./REFERENCE.md#example-25) for complete implementation.

Semantic Labels

See [REFERENCE.md](./REFERENCE.md#example-26) for complete implementation.

10. Deployment

iOS App Store

See [REFERENCE.md](./REFERENCE.md#example-27) for complete implementation.

Android Play Store

See [REFERENCE.md](./REFERENCE.md#example-28) for complete implementation.

Over-the-Air (OTA) Updates

See [REFERENCE.md](./REFERENCE.md#example-29) for complete implementation.

Level 3: Deep Dive Resources

Official Documentation

• React Native Docs
• React Navigation
• Expo Documentation

Performance

• React Native Performance Guide
• Profiling React Native

Testing

• Testing Library for React Native
• Detox E2E Framework

State Management

• Redux Toolkit
• Zustand
• React Query

Native Modules

• Native Modules Guide
• Turbo Modules

Deployment

• App Store Guidelines
• Play Store Policies
• CodePush

Examples

Basic Usage

// TODO: Add basic example for mobile-react-native
// This example demonstrates core functionality

Advanced Usage

// TODO: Add advanced example for mobile-react-native
// This example shows production-ready patterns

Integration Example

// TODO: Add integration example showing how mobile-react-native
// works with other systems and services

See examples/mobile-react-native/ for complete working examples.

Integration Points

This skill integrates with:

Upstream Dependencies

• Tools: Common development tools and frameworks
• Prerequisites: Basic understanding of general concepts

Downstream Consumers

• Applications: Production systems requiring mobile-react-native functionality
• CI/CD Pipelines: Automated testing and deployment workflows
• Monitoring Systems: Observability and logging platforms

Related Skills

• See other skills in this category

Common Integration Patterns

1. Development Workflow: How this skill fits into daily development
2. Production Deployment: Integration with production systems
3. Monitoring & Alerting: Observability integration points

Common Pitfalls

Pitfall 1: Insufficient Testing

Problem: Not testing edge cases and error conditions leads to production bugs

Solution: Implement comprehensive test coverage including:

• Happy path scenarios
• Error handling and edge cases
• Integration points with external systems

Prevention: Enforce minimum code coverage (80%+) in CI/CD pipeline

Pitfall 2: Hardcoded Configuration

Problem: Hardcoding values makes applications inflexible and environment-dependent

Solution: Use environment variables and configuration management:

• Separate config from code
• Use environment-specific configuration files
• Never commit secrets to version control

Prevention: Use tools like dotenv, config validators, and secret scanners

Pitfall 3: Ignoring Security Best Practices

Problem: Security vulnerabilities from not following established security patterns

Solution: Follow security guidelines:

• Input validation and sanitization
• Proper authentication and authorization
• Encrypted data transmission (TLS/SSL)
• Regular security audits and updates

Prevention: Use security linters, SAST tools, and regular dependency updates

Best Practices:

• Follow established patterns and conventions for mobile-react-native
• Keep dependencies up to date and scan for vulnerabilities
• Write comprehensive documentation and inline comments
• Use linting and formatting tools consistently
• Implement proper error handling and logging
• Regular code reviews and pair programming
• Monitor production metrics and set up alerts

Quick Links to Templates

• [Screen Component Template](./templates/screen-component.tsx)
• [Navigation Setup](./templates/navigation-setup.tsx)
• [Redux Toolkit Slice](./templates/redux-slice.ts)
• [Component Test](./templates/component.test.tsx)
• [Metro Config](./config/metro.config.js)
• [Deployment Checklist](./resources/deployment-checklist.md)