React Native Basics

React Native Basics Skill

Learn production-ready React Native fundamentals including core components, StyleSheet, Flexbox, and Expo SDK.

Prerequisites

• JavaScript/TypeScript fundamentals
• React basics (components, props, state, hooks)
• Node.js and npm/yarn installed
• Xcode (iOS) or Android Studio (Android)

Learning Objectives

After completing this skill, you will be able to:

• [ ] Create and compose React Native components
• [ ] Apply styles using StyleSheet API
• [ ] Build responsive layouts with Flexbox
• [ ] Use platform-specific code (iOS/Android)
• [ ] Set up and use Expo for development

---

Topics Covered

1. Core Components

View          - Container component (like div)
Text          - Text display (required for strings)
Image         - Image rendering
ScrollView    - Scrollable container
FlatList      - Optimized list rendering
TextInput     - User input
Pressable     - Touch handling

2. Styling System

// StyleSheet.create for performance
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1a1a1a',
  },
});

3. Flexbox Layout

// Common patterns
flexDirection: 'row' | 'column'     // Main axis
justifyContent: 'center' | 'space-between'  // Main axis alignment
alignItems: 'center' | 'stretch'    // Cross axis alignment
flex: 1                              // Grow to fill

4. Platform-Specific Code

import { Platform } from 'react-native';

// Method 1: Platform.select
const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowColor: '#000', shadowOpacity: 0.1 },
    android: { elevation: 4 },
  }),
});

// Method 2: Platform.OS
if (Platform.OS === 'ios') {
  // iOS specific code
}

5. Expo Setup

# Create new project
npx create-expo-app MyApp
cd MyApp

# Start development
npx expo start

# Build for production
eas build --platform all

---

Quick Start Example

import React from 'react';
import { View, Text, StyleSheet, FlatList, Pressable } from 'react-native';

interface Item {
  id: string;
  title: string;
}

export default function App() {
  const [items, setItems] = React.useState<Item[]>([
    { id: '1', title: 'Learn React Native' },
    { id: '2', title: 'Build first app' },
  ]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My Tasks</Text>
      <FlatList
        data={items}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Pressable style={styles.item}>
            <Text>{item.title}</Text>
          </Pressable>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, backgroundColor: '#f5f5f5' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 16 },
  item: { backgroundColor: '#fff', padding: 16, marginBottom: 8, borderRadius: 8 },
});

---

Common Errors & Solutions

---

Validation Checklist

• [ ] Components render without errors
• [ ] Styles apply correctly on both platforms
• [ ] FlatList handles large lists efficiently
• [ ] Platform-specific code works correctly
• [ ] Expo build succeeds

---

Related Resources

• React Native Docs
• Expo Docs

---

Usage

Skill("react-native-basics")

Bonded Agent: 01-react-native-fundamentals

React Native Basics Guide

Overview

This guide provides comprehensive documentation for the react-native-basics skill in the custom-plugin-react-native plugin.

Category: General

Quick Start

Prerequisites

• Familiarity with general concepts
• Development environment set up
• Plugin installed and configured

Basic Usage

# Invoke the skill
claude "react-native-basics - [your task description]"

# Example
claude "react-native-basics - analyze the current implementation"

Core Concepts

Key Principles

1. Consistency - Follow established patterns 2. Clarity - Write readable, maintainable code 3. Quality - Validate before deployment

Best Practices

• Always validate input data
• Handle edge cases explicitly
• Document your decisions
• Write tests for critical paths

Common Tasks

Task 1: Basic Implementation

# Example implementation pattern
def implement_react_native_basics(input_data):
    """
    Implement react-native-basics functionality.

    Args:
        input_data: Input to process

    Returns:
        Processed result
    """
    # Validate input
    if not input_data:
        raise ValueError("Input required")

    # Process
    result = process(input_data)

    # Return
    return result

Task 2: Advanced Usage

For advanced scenarios, consider:

• Configuration customization via assets/config.yaml
• Validation using scripts/validate.py
• Integration with other skills

Troubleshooting

Common Issues

Related Resources

• SKILL.md - Skill specification
• config.yaml - Configuration options
• validate.py - Validation script

---

Last updated: 2025-12-30

React Native Basics Patterns

Design Patterns

Pattern 1: Input Validation

Always validate input before processing:

def validate_input(data):
    if data is None:
        raise ValueError("Data cannot be None")
    if not isinstance(data, dict):
        raise TypeError("Data must be a dictionary")
    return True

Pattern 2: Error Handling

Use consistent error handling:

try:
    result = risky_operation()
except SpecificError as e:
    logger.error(f"Operation failed: {e}")
    handle_error(e)
except Exception as e:
    logger.exception("Unexpected error")
    raise

Pattern 3: Configuration Loading

Load and validate configuration:

import yaml

def load_config(config_path):
    with open(config_path) as f:
        config = yaml.safe_load(f)
    validate_config(config)
    return config

Anti-Patterns to Avoid

❌ Don't: Swallow Exceptions

# BAD
try:
    do_something()
except:
    pass

✅ Do: Handle Explicitly

# GOOD
try:
    do_something()
except SpecificError as e:
    logger.warning(f"Expected error: {e}")
    return default_value

Category-Specific Patterns: General

Recommended Approach

1. Start with the simplest implementation 2. Add complexity only when needed 3. Test each addition 4. Document decisions

Common Integration Points

• Configuration: assets/config.yaml
• Validation: scripts/validate.py
• Documentation: references/GUIDE.md

---

Pattern library for react-native-basics skill