Your new favorite tool for starting React Native apps

At thoughtbot, we’ve spent years refining our approach to building robust, high-quality applications for our clients. Over time, we’ve discovered the tools and conventions that consistently lead to success. Today, we’re excited to share a new tool we’re using internally: Belt.

Belt is an opinionated CLI tool designed to take the guesswork out of starting a new React Native app. It makes many of the decisions for you, based on best practices and tools we’ve tested over the years. While Belt is still in early development and its API is subject to change, we believe it’s ready for the community to explore.

When you start a new application with Belt, here’s what’s configured for you:

• Expo:Streamlines development and testing across all platforms.
• ESLint and prettier:Keeps your code clean and consistent.
• Manuscript: Adds static typing to help detect errors earlier.
• Jest and React Native Testing Library:Provides a solid foundation for testing your application.
• MSW:Simplifies API testing by simulating network requests.
• React Navigation with Bottom Tabs:Gives you a head start on navigation with a proven setup.
• Tanstack Query for REST APIs:Powerful data fetching and caching for REST APIs. Apollo client for GraphQL is on the way!
• Redux Toolkit for Global State:Coming soon to simplify state management in your application.

Additionally, we plan to include a set of optional tools that can be included during project setup to better tailor the generated application to specific use cases. This will allow you to tailor your application to your unique needs from the start.

We know that developers have their favorite tools, and package managers are no exception. That’s why Belt is designed to work seamlessly with your preferred package manager, whether it’s npm, Yarn, pnpm, or Bun. This flexibility lets you stick to the workflow you’re most comfortable with, while still benefiting from the simplified setup that Belt offers.

To create a new React Native Expo app using your favorite package manager, simply run:

# With NPM
npx create-belt-app MyApp

# With Yarn
npx create-belt-app MyApp --yarn

# With pnpm (experimental)
npx create-belt-app MyApp --pnpm

# With Bun (experimental)
npx create-belt-app MyApp --bun

After you create a project with Belt, the tool adds handles that allow you to extend the functionality of your app with minimal effort. For example, if you want to add push notification functionality, Belt simplifies the process by injecting the code needed to make notifications appear in your app. You just need to handle configuration outside of code, such as configuring the notification service, and you’re good to go. Just run:

# With Yarn
yarn belt add notifications

# With NPM
npx belt add notifications

# With PNPM
pnpm belt add notifications

Belt simplifies and standardizes the process of getting started and improving React Native apps, allowing you to focus on what matters: building beautiful apps without getting bogged down in configuration. We’re excited to see how the community uses Belt and look forward to your feedback and contributions.

We are passionate about open source software and are eager to see how the community uses and improves Belt. Check out our other projects or contact us if you are interested in working with us to design, develop, and evolve your product.

Happy coding!