Create React Native App Using Ignite Boilerplate

What Is Ignite?

Starting a new React Native project from scratch involves making dozens of architectural decisions, configuring build tools, selecting libraries, and establishing code conventions. This process can consume weeks of development time before writing a single line of business logic. The Ignite boilerplate eliminates this overhead by providing a battle-tested foundation that the React Native community has refined since 2016.

Ignite is best described as Infinite Red's favorite way to build React Native applications. It combines a command-line interface with a comprehensive boilerplate project that dates back to the early days of React Native in 2016. The project has evolved alongside React Native itself, incorporating lessons learned from building production applications for enterprise clients.

When you use Ignite to start your next React Native project, you're adopting a battle-tested, familiar stack that professional teams have refined over nearly a decade. The boilerplate includes carefully selected libraries that work well together, established code conventions that scale across large teams, and generators that enforce consistency throughout your codebase.

The philosophy behind Ignite emphasizes simplicity and directness. Rather than abstracting away React Native's native capabilities behind layers of custom tooling, Ignite provides sensible defaults while keeping the underlying platform fully accessible. This approach means developers can customize any aspect of their application without fighting against framework conventions.

The Ignite CLI

The Ignite command-line interface serves as your primary tool for creating and managing Ignite projects. Unlike many boilerplate solutions that require global installation, Ignite works directly through npx, ensuring you always use the latest version without managing global dependencies.

The CLI handles project initialization, prompts you through configuration options, and provides generators for creating new components, screens, and other application artifacts. This integrated approach ensures that new files conform to Ignite's conventions automatically.

Creating Your First Project

npx ignite-cli@latest new PizzaApp

This command initiates an interactive wizard that guides you through several configuration decisions including package manager selection, navigation library, and state management solutions. Each option represents a well-tested combination that the Ignite team has validated across numerous production applications.

If you prefer to skip the interactive prompts and accept all default configurations, use the --yes flag:

npx ignite-cli@latest new PizzaApp --yes

This approach creates a fully configured project ready for immediate development. The default configuration includes React Navigation for routing, TypeScript for type safety, and a set of pre-built components that demonstrate Ignite's approach to UI development.

Once the installation completes, navigate to your new project directory and start the development server. The boilerplate includes example screens that demonstrate common patterns, serving as both documentation and a starting point for customization. For debugging your React Native applications, check out our guide on debugging with Flipper to streamline your development workflow.

Understanding the Ignite Tech Stack

The libraries included in Ignite represent carefully considered choices that balance development velocity, runtime performance, and long-term maintainability. Understanding these choices helps developers make informed decisions about when to follow conventions and when to customize.

Core Dependencies

React Native serves as the foundation, providing the cross-platform framework for building native mobile applications. The boilerplate tracks React Native's stable releases closely, ensuring you have access to the latest platform features and performance improvements.

React Navigation v7 handles the application's routing and navigation structure. The navigation system is organized in a dedicated navigators directory, with the AppNavigator.tsx file serving as the primary navigation configuration. Additional utilities provide functions for tracking the active route, handling back button behavior, and persisting navigation state across app restarts.

TypeScript provides static type checking throughout the codebase. The type system catches errors at compile time rather than runtime, reducing bugs and improving code documentation. Ignite's TypeScript configuration follows modern best practices, including strict mode and precise type definitions for all included libraries. For teams working with TypeScript modules, our guide on common TypeScript module problems addresses frequent challenges and solutions.

React Native MMKV provides extremely fast key-value storage for persisting application state. The library integrates with React context to enable seamless state restoration when users return to the application. This approach handles scenarios like user authentication state, form data, and application preferences without requiring custom persistence logic.

Communication and Debugging

apisauce simplifies REST API communication by providing a clean interface for making HTTP requests. The library builds on Axios, adding React Native-specific optimizations and a more intuitive API surface. Error handling, request interceptors, and response transformation are all standardized through apisauce conventions.

For mobile applications requiring secure API interactions, implementing proper authentication with Supabase provides a robust solution that integrates well with modern React Native architectures. Additionally, understanding API permissions ensures your mobile app handles data access securely.

Reactotron integration enables powerful debugging capabilities during development. The tool provides real-time visibility into network requests, state changes, and performance metrics. Debugging with Reactotron significantly reduces the time required to diagnose issues in complex applications. For additional debugging approaches, explore our comprehensive guide on debugging React Native apps with Flipper.

Jest serves as the test runner for unit tests, while React Native Testing Library provides utilities for component-level testing. The boilerplate includes example tests demonstrating these tools' conventions. For end-to-end testing, Maestro is configured with sample flows that demonstrate UI testing patterns. When designing APIs that support efficient data fetching, implementing cursor-based pagination in GraphQL provides a scalable approach for handling large datasets in mobile applications.

Code Generation

Ignite's generators create files that conform to project conventions automatically. Instead of manually creating component files with appropriate imports and types, developers invoke generators that produce complete, correctly configured code.

Available Generators

# Create a new component
npx ignite-cli generate component Button

# Create a new screen
npx ignite-cli generate screen Home

# Create a new context
npx ignite-cli generate context Auth

# Create a new model
npx ignite-cli generate model User

The generated code includes TypeScript types, styling constants, and test file templates. This consistency reduces cognitive load when navigating unfamiliar code and simplifies code reviews. Similar generators exist for screens, contexts, models, and other common artifacts.

Generators significantly accelerate development velocity while enforcing consistency across the codebase. When team members create components using generators, all components share the same structure, import patterns, and testing approach. For React Native projects requiring device capabilities like accessing contacts, our guide on accessing device contact lists demonstrates how to implement native features within the Ignite framework.

Generated Component Structure

When you generate a component, Ignite creates a complete file with TypeScript types, a styling object, and an associated test file. The component is designed as a building block for custom designs rather than a drop-in UI element. Each component includes documentation explaining its intended usage and conventions being followed.

Styling Approach in Ignite

Ignite's styling philosophy emphasizes simplicity and type safety over abstraction. The approach uses plain JavaScript objects for styles, typed with TypeScript to provide editor support and catch errors early.

Theme-Based Styling

The styling system distinguishes between themed styles and static styles. Themed styles reference the application's color palette and typography, enabling consistent theming across the application including dark mode support. Static styles define fixed values that don't change based on the current theme.

Themed styles use a TypeScript type called ThemedStyle, which ensures that all style properties reference valid theme values. The useAppTheme hook provides access to the current theme configuration, including colors, spacing, and typography scales. This approach enables features like dark mode without requiring style changes throughout the application.

Static styles are defined as plain objects typed with the appropriate React Native style type. These styles work exactly like traditional StyleSheet.create definitions but avoid the unnecessary indirection that StyleSheet provides.

Component Presets

Ignite components support presets, which are pre-configured combinations of styles that address common use cases. A button component might include presets for primary, secondary, and disabled states, each applying appropriate style values automatically. Components accept a preset prop that determines which configuration to use.

This pattern provides flexibility while maintaining consistency. Developers can use presets for common cases and apply custom styles when designs require deviation. The preset system documents expected usage patterns while allowing customization when necessary. When building more complex interactive elements, the React Transition Group guide shows how to animate components effectively within this styling system.

Getting Help and Troubleshooting

Even with comprehensive tooling, issues arise during development. Ignite provides several resources for resolving problems and learning best practices.

Community Support

The Infinite Red community Slack hosts active discussions about Ignite usage, troubleshooting, and best practices. Developers can search archived discussions for solutions or post new questions for community assistance. The Slack community includes Ignite's core maintainers, who regularly respond to user questions.

The Ignite Cookbook provides practical recipes for common tasks and integrations. Topics include setting up end-to-end testing with Maestro, configuring continuous integration pipelines, and integrating third-party services. These recipes reflect real-world experience from Infinite Red's consulting practice.

Bug Reporting

For bug reports, the Ignite CLI includes a command that generates detailed diagnostic information:

npx ignite-cli issue "Description of your problem"

This command collects system information, dependency versions, and configuration details that help maintainers diagnose issues quickly. The generated report includes all relevant context without requiring manual documentation gathering.

Common Setup Issues

When starting with Ignite, ensure your development environment meets the requirements for React Native. This includes having Node.js installed, along with platform-specific tools for iOS development (Xcode) or Android development (Android Studio). The React Native environment setup documentation provides platform-specific instructions for configuring these dependencies.

Best Practices for Ignite Projects

Embrace the Boilerplate Structure

Resist the temptation to restructure the boilerplate immediately. The directory organization, naming conventions, and tooling configuration all reflect accumulated experience from professional React Native development. Deviating from these conventions costs time in the short term and creates friction when seeking help from the community or onboarding new team members.

When customization is necessary, extend rather than replace. The component library provides building blocks that combine into custom designs. The navigation system supports complex routing requirements through composition rather than configuration. These extensibility points allow customization while preserving the benefits of convention.

Use Generators Consistently

Generate all new components, screens, and other artifacts using Ignite's generators. Even when the generated code requires modification, starting from a consistent foundation reduces errors and accelerates development. The generator patterns establish expectations that code reviewers can rely on.

When generators don't support specific needs, consider whether a generator enhancement would benefit the community. The Ignite project welcomes contributions that improve the generator system for all users. Filing feature requests with use cases helps maintainers prioritize improvements.

Test from the Start

The boilerplate includes testing infrastructure from project creation. Write tests as you develop new features rather than treating testing as a later phase. The testing tools are already configured, and the generated components include test file templates that demonstrate expected patterns.

Unit tests verify business logic and utility functions. Component tests verify UI behavior without depending on native rendering. End-to-end tests verify user flows through the application. Each test type catches different categories of bugs, and the boilerplate supports all three approaches.

Why Ignite Matters

The React Native ecosystem offers tremendous flexibility, but this flexibility creates challenges at scale. Every architectural decision that seems minor during initial development becomes significant when a team of developers works on an application over multiple years. Ignite eliminates these decisions by providing proven defaults that work across diverse project requirements.

Starting with Ignite means starting with nearly a decade of accumulated wisdom from professional React Native development. The boilerplate encodes patterns that work in production, not theoretical best practices. The generators enforce conventions that simplify collaboration. The community provides support for challenges that other teams have already solved.

Sources

1. Infinite Red Ignite CLI Documentation - Official documentation for the battle-tested React Native boilerplate maintained since 2016
2. Infinite Red Getting Started Guide - Step-by-step onboarding documentation for Ignite projects
3. LogRocket: Create a React Native app using Ignite boilerplate - Comprehensive tutorial with practical implementation examples