At thoughtbot, we’ve spent years refining our approach to building robust, high-quality apps for our clients. Along the way, we’ve discovered the tools and conventions that consistently lead to success. Now, we’re excited to share a new tool we’ve been using internally: Belt.
What is Belt?
Belt is an opinionated CLI tool designed to take the guesswork out of starting a new React Native app. It makes a lot of the decisions for you, relying on the best practices and tooling we’ve battle-tested over the years. While Belt is still in the early stages of development and its API is subject to change, we think it’s ready for the community to start exploring.
What Does Belt Configure?
When you start a new app with Belt, here’s what gets set up for you:
- Expo: Streamlines development and testing across platforms.
- ESLint & Prettier: Keeps your code clean and consistent.
- TypeScript: Adds static typing to help catch errors early.
- Jest & React Native Testing Library: Provides a solid foundation for testing your app.
- MSW: Simplifies API testing by mocking 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 across your app.
Additionally, we plan to include a set of optional tools that can be included during the project setup to better adapt the generated app to specific use cases. This will allow you to tailor your app to your unique needs right from the start.
How to Use Belt
We know developers have their favorite tools, and package managers are no exception. That’s why Belt is designed to work seamlessly with whichever package manager you prefer—whether it’s npm, Yarn, pnpm, or Bun. This flexibility ensures you can stick to the workflow you’re most comfortable with, while still benefiting from the streamlined setup Belt offers.
To create a new React Native Expo app using your preferred 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 creating a project with Belt, the tool adds handles that allow you to extend your app’s functionality with minimal effort. For instance, if you want to add Push Notification capability, Belt simplifies the process by injecting the necessary code to get notifications displaying in your app. All you need to do is handle the setup outside of the code, like 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 starting and enhancing React Native apps, letting you focus on what matters: building great apps without getting bogged down in setup. We’re excited to see how the community uses Belt and look forward to your feedback and contributions.
About thoughtbot
We’re passionate about open-source software, and we’re excited to see how the community uses and improves Belt. Check out our other projects, or get in touch if you’re interested in working with us to design, develop, and grow your product.
Happy coding!
