📱 A template for your next React Native project 🚀, Made with developer experience and performance first: Expo,TypeScript,tailwindcss, Husky, Lint-Staged, react-navigation, react-query, react-hook-form, I18n.
This starter is based on obytes mobile tribe best practices for building react native apps and used on a daily based by our team. The starter is battle tested with multiple projects we worked on over the past four years.
Although the starter is very opinionated, we believe that we did our best to select the best solutions for the majority of the challenges we ran into while developing mobile apps for our clients.
The idea behind the starter is that we wanted to create a starter that will help us create react native apps faster and with less effort. we want to make sure all our internal and external projects will have the same code quality and the same architecture which help us maintain and scale our apps easily as well as sharing code between projects and teams.
Using this starter help our team to switch projects easily and focus on the business logic and not on the boilerplate code.
We built this starter with the following principles in mind:
- 🚀 Production-ready
- 🥷 Developer experience + Productivity
- 🧩 Minimal code and dependencies
- 💪 well maintained third-party libraries
- ✅ Last Expo SDK + Custom Dev client
- 🎉 Type checking TypeScript
- 💅 Minimal UI kit using tailwindcss with theming.
- ⚙️ Support multiple environnement builds [Production, Staging, Development] using Expo configuration.
- 🦊 Husky for Git Hooks
- 💡 Clean project structure with Absolute Imports
- 🚫 Lint-staged for running linters + typescript checking on Git staged files
- 🗂 VSCode recommended extensions configuration, settings and snippets for a better developer experience
- ☂️ React Navigation pre-installed with examples
- 💫 Auth flow with zustand and react-native-mmkv as a storage to save sensitive data.
- 🛠 A simple workflow to build, release and distribute your application using Github action
- 🔥 React Query & axios to fetch Data
- 🧵 A good approach with example to handle forms based on react-hook-form and zod for validation
- 🎯 Localization with i18next + validation using Eslint.
- Rules and Conventions
- Project structure
- Environment vars and config
- UI and Theming
- Components
- Forms
- Data fetching
- Contribute to starter
Expo is a great tool to build react native apps, it helps you to build your app faster and with less effort. One of the most famous questions we get from the community is why we use Expo and not React Native ClI?
In the first version of the starter we used React Native CLI as back then using Expo is not the best option as we are using some native libraries and we will need to eject the app anyway. Last year Expo team introduce using Custom dev client which allow you to use Expo without ejecting the app and use native libraries.
The starter is using Expo with a Custom dev client which means we will get access to the amazing Expo ecosystem and install native libraries without ejecting the app.
Last and not least, with older version of the starter we face a lot of issues while upgrading our apps to the last version but now with Expo we can upgrade our apps easily.
Probably the right question is Why not Expo?
The short answer is yes, if you are building a react native app and you want to start with a solid foundation ,good architecture and a good developer experience then this starter is for you.
If you don't think using a starter is a good idea you can just take a look and get some inspiration for your project to find some good practices and solutions for common challenges react native developers are facing while building apps.
The starter is constantly improving and we are adding new features and fixing bugs as soon as we can. You can stay up to date by watching the repository or by hitting the start button.
- Expo
- React Navigation
- Nativewind
- Flash list
- React Query
- Axios
- React Hook Form
- i18next
- zustand
- React Native MMKV
- React Native Gesture Handler
- React Native Reanimated
- React Naive Svg
- React Error Boundaries
- React Native fast image
This starter is maintained by Obytes mobile tribe team and we are happy to welcome new contributors to the project.
We are also open to work on your project and help you build your app. You can contact us on obytes.com/contact.
First of all, thank you for your interest in contributing to this project. We are happy to have you here and here is how you can help us improve this project:
-
Give the project a 🌟 on Github if you like it. This will help us to get more visibility and attract more contributors.
-
If you have any suggestions or feedback about any approach we are using in this project, feel free to open an issue and let us know. we will be happy to hear from you and discuss it with you ASAP.
-
If you have any questions about the project, feel free to open an issue and our team will do their best to answer your questions.
-
If you found a bug while using the starter or a typo in the documentation, feel free to open an issue or even better, open a pull request with the fix.
This project is MIT licensed.