Ignite React Native Boilerplate

Theming in Ignite provides a consistent look and feel by centralizing style attributes. Theming is managed through several building blocks located in the app/theme directory:

• Colors & Palettes: Defined in app/theme/colors.ts (and colorsDark.ts for dark mode). Ignite uses a palette-based approach where a set of base colors is defined, which are then mapped to semantic color names. This allows for easy palette swaps while maintaining semantic consistency.
• Fonts & Typography: Defined in app/theme/fonts.ts. Similar to colors, base fonts are defined and then mapped to semantic font names.
• Timings: Defined in app/theme/timing.ts for consistent animation durations.
• Spacing: Managed via a spacing scale in app/theme/spacing.ts. It is highly recommended to use this scale for all layout spacing to ensure consistency.

For individual component styling (rather than global theme attributes), refer to the Styling documentation.

An ErrorBoundary is a React Class Component used to catch JavaScript errors anywhere in their child component tree, unmounting the whole tree instead of the error breaking the entire app.

In Ignite, you use ErrorBoundary to:

1. Render Fallback UI: Instead of a blank screen or a crash, you can show a user-friendly ErrorMessage component.
2. Report Errors: Use the componentDidCatch lifecycle method to send error details to monitoring services (like BugSnag, Sentry, or Honeybadger).

Ignite provides built-in utilities for crash reporting in app/utils/crashReporting.ts to help integrate these services.

class ErrorBoundary extends Component<Props, State> {
  state = { error: null, errorInfo: null }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    this.setState({
      error,
      errorInfo,
    })
  }

  render() {
    return this.state.error ? <ErrorMessage /> : this.props.children
  }
}

Ignite is an opinionated React Native boilerplate. Most of your application logic resides within the ./app directory, while the root directory contains native project files, configuration, and testing infrastructure.

Project Layout Overview

your-project
├── .maestro          # Maestro e2e tests
├── android          # Native Android project files
├── app              # Main application source code
│   ├── components   # Reusable UI building blocks
│   ├── config       # Environment-specific configurations
│   ├── context      # React Context providers
│   ├── devtools     # Devtools setup (e.g., Reactotron)
│   ├── i18n         # Internationalization/translations
│   ├── navigators  # React Navigation configurations
│   ├── screens      # Full-screen React components
│   ├── services     # External interfaces (APIs, Push Notifications)
│   ├── theme       # Spacing, colors, and typography
│   ├── utils        # Shared helpers and utilities
│   └── app.tsx     # Main application entry point
├── assets           # Icons and images
├── ignite           # Ignite generator templates
├── ios              # Native iOS project files
├── test             # Jest configurations and mocks
├── app.config.ts   # Dynamic Expo configuration
├── app.json         # Static Expo configuration
├── eas.json         # Expo EAS build configurations
└── index.tsx        # App entry point

your-project
├── .maestro
├── android
├── app
│   ├── components
│   ├── config
│   ├── devtools
│   ├── i18n
│   ├── context
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   └── app.tsx
├── assets
├── ignite
│   └── templates
├── ios
├── test
│   ├── i18n.test.ts
│   ├── mockFile.ts
│   ├── setup.ts
│   └── test-tsconfig.json
├── app.config.ts
├── app.json
├── eas.json
├── index.tsx
└── package.json