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

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

Performance

Testing

State Management

Native Modules

Deployment

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

Development Workflow: How this skill fits into daily development
Production Deployment: Integration with production systems
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)