Back to Documentation

Development Guide

Learn the development workflow, best practices, and tools for building scalable React Native applications

Development Workflow

Essential commands and development setup

Starting Development

Start Metro Bundler
npm start

Starts the Metro development server

iOS Development
npm run ios

Run on iOS simulator

Android Development
npm run android

Run on Android emulator

Hot Reload & Fast Refresh

React Native Fast Refresh is enabled by default. Changes are reflected instantly:

  • • Component state is preserved during edits
  • • Only the changed components re-render
  • • Errors show helpful overlay with stack traces

Code Quality & Linting

Maintain consistent code quality with automated tools

Linting & Formatting

ESLint
npm run lint

Check for code quality issues

Prettier
npm run format

Auto-format code style

TypeScript

Type Checking
npm run type-check
Type Definition Example
// src/types/user.ts
export interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
  createdAt: Date;
}

export interface CreateUserRequest {
  name: string;
  email: string;
}

export interface AuthState {
  user: User | null;
  token: string | null;
  isLoading: boolean;
}

Testing

Unit tests, integration tests, and E2E testing setup

Testing Commands

Run All Tests
npm test
Watch Mode
npm run test:watch
Coverage Report
npm run test:coverage

Test Examples

Component Testing
// __tests__/components/Button.test.tsx
import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { Button } from '@/components/ui/Button';

describe('Button Component', () => {
  it('renders correctly', () => {
    const { getByText } = render(
      <Button title="Press me" onPress={() => {}} />
    );
    
    expect(getByText('Press me')).toBeTruthy();
  });

  it('calls onPress when pressed', () => {
    const mockOnPress = jest.fn();
    const { getByText } = render(
      <Button title="Press me" onPress={mockOnPress} />
    );
    
    fireEvent.press(getByText('Press me'));
    expect(mockOnPress).toHaveBeenCalledTimes(1);
  });
});
API Testing
// __tests__/services/api.test.ts
import { apiClient } from '@/services/api';
import { mockServer } from '../mocks/server';

describe('API Client', () => {
  beforeAll(() => mockServer.listen());
  afterEach(() => mockServer.resetHandlers());
  afterAll(() => mockServer.close());

  it('fetches user data successfully', async () => {
    const user = await apiClient.getUser('123');
    
    expect(user).toEqual({
      id: '123',
      name: 'John Doe',
      email: 'john@example.com'
    });
  });
});

Debugging

Tools and techniques for debugging React Native apps

Debug Tools

React Native Debugger

Standalone app with React DevTools, Redux DevTools, and network inspect

brew install react-native-debugger
Flipper Integration

Advanced debugging with network, layout, and crash inspection

npx react-native doctor

Debug Console

Enable Debug Mode

In development mode, shake your device or press:

  • • iOS Simulator: Cmd + D
  • • Android Emulator: Cmd + M (Mac) or Ctrl + M (Windows/Linux)
Logging Best Practices
// src/utils/logger.ts
export const logger = {
  debug: (message: string, ...args: any[]) => {
    if (__DEV__) {
      console.log('🐛 DEBUG:', message, ...args);
    }
  },
  
  info: (message: string, ...args: any[]) => {
    if (__DEV__) {
      console.info('ℹ️ INFO:', message, ...args);
    }
  },
  
  warn: (message: string, ...args: any[]) => {
    console.warn('⚠️ WARN:', message, ...args);
  },
  
  error: (message: string, error?: Error) => {
    console.error('❌ ERROR:', message, error);
    // Report to crash analytics in production
  }
};

Performance Optimization

Tips and tools for optimizing app performance

Performance Monitoring

Performance Monitor
// Enable in development
import {Settings} from 'react-native';
Settings.set({showFPS: true});
Bundle Analysis
npx react-native bundle --dev false --analyze

Optimization Tips

React Performance
  • • Use React.memo() for expensive components
  • • Implement useMemo() and useCallback() for heavy computations
  • • Optimize FlatList with getItemLayout and keyExtractor
  • • Use InteractionManager for heavy tasks
Image Optimization
// Optimize images
<Image
  source={{uri: imageUrl}}
  style={styles.image}
  resizeMode="cover"
  // Faster loading
  progressiveRenderingEnabled={true}
  // Memory optimization
  defaultSource={require('./placeholder.png')}
/>

Ready to Build?

You now have everything you need to start developing your React Native application. Explore the project structure and configuration options.

Project StructureConfiguration