React Native Template Caracal

📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo, TypeScript, TailwindCSS, Husky, Lint-Staged, expo-router, react-query, react-hook-form, I18n.

Welcome to the Caracal's Expo / React Native Starter Kit!

🚀 Motivation

The goal of this starter kit is to streamline the process of building React Native apps. It provides a resource for creating high-quality apps faster and with less effort, while ensuring projects adhere to consistent code standards and architectural principles.

The benefits of using this starter kit are numerous. It provides a consistent foundation that makes it easy to switch between projects and focus on business logic rather than boilerplate code. Because it promotes consistency, it makes apps easier to maintain and scale.

Overall, this starter kit is designed to facilitate efficient and effective app development, helping you bring the best possible products to your users.

✍️ Philosophy

When creating this starter kit, we had several guiding principles in mind::

• 🚀 Production-ready: We wanted to ensure that this starter was ready for real-world use, providing a solid foundation for building production-grade apps.
• 🥷 Developer experience and productivity: Our focus was on creating a starter that would enhance the developer experience and increase productivity.
• 🧩 Minimal code and dependencies: We aimed to keep the codebase and dependencies as small as possible.
• 💪 Well-maintained third-party libraries: We included only well-maintained and reliable third-party libraries, to provide stability and support for our projects.

⭐ Key Features

• ✅ Latest Expo SDK with Custom Dev Client: Leverage the best of the Expo ecosystem while maintaining full control over your app.
• 🎉 TypeScript for enhanced code quality and bug prevention through static type checking.
• 💅 Minimal UI kit built with TailwindCSS, featuring common components essential for your app.
• ⚙️ Multi-environment build support (Production, Staging, Development) using Expo configuration.
• 🦊 Husky for Git Hooks: Automate your git hooks and enforce code standards.
• 💡 Clean project structure with Absolute Imports for easier code navigation and management.
• 🚫 Lint-staged: Run Eslint and TypeScript checks on Git staged files to maintain code quality.
• 🗂 VSCode recommended extensions, settings, and snippets for an enhanced developer experience.
• ☂️ Pre-installed Expo Router with examples for comprehensive app navigation.
• 💫 Auth flow implementation using Zustand for state management and react-native-mmkv for secure data storage.
• 🛠 10+ Github Actions workflows for building, releasing, testing, and distributing your app.
• 🔥 React Query and axios for efficient data fetching and state management.
• 🧵 Robust form handling with react-hook-form and zod for validation, plus keyboard handling.
• 🎯 Localization support with i18next, including Eslint for validation.
• 🧪 Unit testing setup with Jest and React Testing Library.
• 🔍 E2E testing capabilities with Maestro for comprehensive app testing.

Is this starter for me?

Yes 😀

This starter kit is designed to benefit a wide range of React Native developers, from beginners to experienced professionals. Here's why it might be a good fit for you:

1. For beginners: It provides a solid foundation with best practices and common solutions, helping you learn industry-standard approaches to React Native development.

2. For experienced developers: It offers a well-structured, production-ready setup that can save you time and effort in project initialization and configuration.

3. For teams: It ensures consistency across projects and team members, making it easier to onboard new developers and maintain code quality.

4. For explorers: Even if you prefer not to use starter kits, this project can serve as a valuable reference. You can explore the codebase, documentation, and architectural decisions to gain insights and potentially adopt specific solutions for your projects.

5. For learners: The starter kit incorporates up-to-date libraries and patterns, allowing you to familiarize yourself with current best practices in the React Native ecosystem.

6. For AI-assisted development: This starter kit works well with AI coding tools. It provides a solid structure and best practices that can guide AI-generated code. This helps ensure that AI assistance leads to high-quality, maintainable code that fits well within your project.

Remember, you don't have to use the entire starter kit as-is. Feel free to cherry-pick ideas, configurations, or code snippets that align with your project needs. Whether you're building a new app from scratch or looking to improve your existing development process, this starter kit can provide valuable insights and practical solutions.

Why Expo and not React Native CLI?

We have been using Expo as our main framework since the introduction of Continuous Native Generation (CNG) concept and we are happy with the experience.

I think this question is not valid anymore, especially after the last React conference when the core React native team recommended using Expo for new projects.

"As of today, the only recommended community framework for React Native is Expo. Folks at Expo have been investing in the React Native ecosystem since the early days of React Native and as of today, we believe the developer experience offered by Expo is best in class." React native core team

Still hesitating? Check out this article or this video, maybe this one video too.

🧑‍💻 Stay up to date

This starter kit is continually improved with new features and bug fixes.

If you want to stay up to date with the latest developments, you can either watch the repository or hit the "star" button. This will allow you to receive notifications whenever new updates are available.

Feedback and suggestions are always welcome. Feel free to open an issue or discussion to share your thoughts.

💎 Libraries used

• Expo
• Expo Router
• Uniwind
• HeroUI Native
• Flash list
• React Query
• Axios
• React Hook Form
• i18next
• zustand
• React Native MMKV
• React Native Gesture Handler
• React Native Reanimated
• React Native Svg
• React Error Boundaries
• Expo Image
• React Native Keyboard Controller
• React Native Safe Area Context
• React Native Screens
• Tailwind Variants
• Zod

⚡ Build Configuration

Caracal is tuned for build throughput out of the box:

• Prebuilt React Native. buildReactNativeFromSource is off, so the RN C++ core and Hermes are not recompiled on every build.
• Gradle daemon, parallel builds and build cache, via the plugins/with-gradle-performance.js config plugin. The daemon is disabled automatically on EAS, where a throwaway container gains nothing from it.
• arm64-only development builds. Release builds also include armeabi-v7a for legacy 32-bit handsets.

Note on Intel Macs: development builds target arm64-v8a only, so an x86/x86_64 Android emulator will not install them. On an Intel machine, add 'x86_64' to android.buildArchs in app.config.ts and re-run pnpm prebuild.

Fonts and icons are imported by subpath rather than through the package barrel, which keeps unused weights and icon families out of the native build. An ESLint rule enforces this — see the Fonts docs.

AI Configuration

This repository includes a root llms.txt file that defines canonical documentation for AI tools.

📚 Documentation

Full documentation is available at react-native-template-atlas.vercel.app (deployed on Vercel from the docs/ directory).

To run the docs locally:

cd docs
pnpm install --ignore-workspace
pnpm dev

👤 Maintainer

This starter is maintained by Tuan Anh Le.

For custom projects and consulting, visit leanhtuan1994.github.io/contact.

🙏 Credits

Caracal is built on the Obytes React Native starter, used under the MIT License. Thanks to the Obytes team for the foundation.

❓ FAQ

If you have any questions about the starter, please open an issue.

🔖 License

This project is MIT licensed.