You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+44-43Lines changed: 44 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,17 +10,11 @@
10
10
11
11
📱 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.
12
12
13
-
# Overview
14
-
15
-
As a team of experienced developers at Obytes Mobile Tribe, we have spent years refining our approach to building high-quality React Native applications. Our starter kit is based on the best practices and tools that we have found to be most effective in our projects.
16
-
17
-
This starter kit has been thoroughly tested and proven successful in multiple projects over the past four years. It is regularly used by our team on a daily basis and has helped us deliver great results for our clients.
18
-
19
-
While our starter kit is heavily influenced by our own opinions and experiences, we have carefully selected the included solutions to address common challenges and meet the needs of the majority of use cases. We believe it offers a streamlined and efficient approach to building React Native apps, and we are confident that it can help others achieve their project goals as well.
13
+
> Welcome to the Obytes Mobile Tribe's Expo / React Native Starter Kit!
20
14
21
15
## 🚀 Motivation
22
16
23
-
Our goal with this starter kit was to streamline the process of building React Native apps, both for our team and for our clients. We wanted to create a resource that would allow us to create high-quality apps faster and with less effort; while ensuring that all of our projects adhere to the same code standards and architectural principles.
17
+
Our goal with this starter kit was to streamline the process of building React Native apps, both for our own team and for our clients. We wanted to create a resource that would allow us to create high-quality apps faster and with less effort, while ensuring that all of our projects adhere to the same code standards and architectural principles.
24
18
25
19
The benefits of using this starter kit are numerous. It helps our team easily switch between projects, as we can rely on a consistent foundation of code. It also allows us to focus on the business logic of each project rather than getting bogged down in boilerplate code. And, because it promotes consistency across projects, it makes it easier to maintain and scale our apps, as well as share code between teams.
26
20
@@ -37,51 +31,52 @@ When creating this starter kit, we had several guiding principles in mind::
37
31
38
32
## ⭐ Key Features
39
33
40
-
- ✅ The latest version of Expo SDK, Along with the Custom Dev client, you can leverage the best of the Expo ecosystem and maintain full control over your app.
41
-
- 🎉 [TypeScript](https://www.typescriptlang.org/) for type checking, to help you catch bugs and improve code quality.
42
-
- 💅 A minimal UI kit built with [TailwindCSS](https://www.nativewind.dev/), With the most common components you should have in your app.
43
-
- ⚙️ Support for multiple environments builds, including Production, Staging, and Development, using Expo configuration.
44
-
- 🦊 Husky for Git Hooks, to automate your git hooks and enforce code standards.
45
-
- 💡 A clean project structure with Absolute Imports, to make it easier to navigate and manage your code.
46
-
- 🚫 Lint-staged for running Eslint and TypeScript checks on Git staged files, to ensure that your code is always up to standards.
47
-
- 🗂 VSCode recommended extensions, settings, and snippets to enhance the developer experience.
48
-
- ☂️ Pre-installed [Expo Router](https://docs.expo.dev/router/introduction/) with examples, to provide a comprehensive navigation solution for your app.
49
-
- 💫 An auth flow with [Zustand](https://github.com/pmndrs/zustand) and [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) as a storage solution to save sensitive data.
50
-
- 🛠 +10 workflows for building, releasing, testing and distributing your app using [Github action](https://github.com/features/actions).
51
-
- 🔥 [React Query](https://react-query.tanstack.com/) and [axios](https://github.com/axios/axios) for fetching data, to help you build efficient and performant apps.
52
-
- 🧵 A good approach for handling forms with [react-hook-form](https://react-hook-form.com/) and [zod](https://github.com/colinhacks/zod) for validation + keyboard handling.
53
-
- 🎯 Localization with [i18next](https://www.i18next.com/), along with Eslint for validation.
54
-
- Unit testing with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) setup to help you write tests for your app.
34
+
- ✅ Latest Expo SDK with Custom Dev Client: Leverage the best of the Expo ecosystem while maintaining full control over your app.
35
+
- 🎉 [TypeScript](https://www.typescriptlang.org/) for enhanced code quality and bug prevention through static type checking.
36
+
- 💅 Minimal UI kit built with [TailwindCSS](https://www.nativewind.dev/), featuring common components essential for your app.
37
+
- ⚙️ Multi-environment build support (Production, Staging, Development) using Expo configuration.
38
+
- 🦊 Husky for Git Hooks: Automate your git hooks and enforce code standards.
39
+
- 💡 Clean project structure with Absolute Imports for easier code navigation and management.
40
+
- 🚫 Lint-staged: Run Eslint and TypeScript checks on Git staged files to maintain code quality.
41
+
- 🗂 VSCode recommended extensions, settings, and snippets for an enhanced developer experience.
42
+
- ☂️ Pre-installed [Expo Router](https://docs.expo.dev/router/introduction/) with examples for comprehensive app navigation.
43
+
- 💫 Auth flow implementation using [Zustand](https://github.com/pmndrs/zustand) for state management and [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) for secure data storage.
44
+
- 🛠 10+ [Github Actions](https://github.com/features/actions) workflows for building, releasing, testing, and distributing your app.
45
+
- 🔥 [React Query](https://react-query.tanstack.com/) and [axios](https://github.com/axios/axios) for efficient data fetching and state management.
46
+
- 🧵 Robust form handling with [react-hook-form](https://react-hook-form.com/) and [zod](https://github.com/colinhacks/zod) for validation, plus keyboard handling.
47
+
- 🎯 Localization support with [i18next](https://www.i18next.com/), including Eslint for validation.
48
+
- 🧪 Unit testing setup with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
49
+
- 🔍 E2E testing capabilities with [Maestro](https://maestro.mobile.dev/) for comprehensive app testing.
50
+
51
+
## 🤔 Is this starter for me?
52
+
53
+
Yes 😀
54
+
55
+
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:
56
+
57
+
1.**For beginners:** It provides a solid foundation with best practices and common solutions, helping you learn industry-standard approaches to React Native development.
55
58
56
-
## ✍️ Documentation
59
+
2.**For experienced developers:** It offers a well-structured, production-ready setup that can save you time and effort in project initialization and configuration.
57
60
58
-
-[Create new project ](https://starter.obytes.com/getting-started/create-new-app/)
59
-
-[Rules and Conventions](https://starter.obytes.com/getting-started/rules-and-conventions/)
-[Contribute to starter](https://starter.obytes.com/how-to-contribute/)
61
+
3.**For teams:** It ensures consistency across projects and team members, making it easier to onboard new developers and maintain code quality.
67
62
68
-
## 😉 Why Expo?
63
+
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 own projects.
69
64
70
-
Expo is a powerful tool for building React Native apps, offering a range of features and benefits that can help developers create high-quality apps more efficiently. One question we often receive from the community is why we choose to use Expo instead of the React Native CLI.
65
+
5.**For learners:** The starter kit incorporates up-to-date libraries and patterns, offering an opportunity to familiarize yourself with current best practices in the React Native ecosystem.
71
66
72
-
In the past, our team used the React Native CLI for our starter kit. However, we found that using Expo presented several advantages. In particular, the introduction of the Custom dev client feature allowed us to take advantage of the Expo ecosystem and utilize native libraries without the need for ejecting the app. This has greatly simplified our development process and enabled us to focus on the business logic of our projects.
67
+
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.
73
68
74
-
Additionally, we have found that using Expo has made it easier to upgrade our apps to new versions, eliminating the issues we previously encountered when using the React Native CLI.
69
+
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.
75
70
76
-
Overall, we believe that Expo offers numerous benefits for building React Native apps and is a valuable tool for any developer. The real question may be, **why not use Expo?**
71
+
## 😉 Why Expo and not React Native CLI?
77
72
78
-
## 🤔 Is this starter for you?
73
+
We have been using Expo as our main framework since the introduction of [Continuous Native Generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/) concept and we are happy with the experience.
79
74
80
-
If you are planning to build a React Native app and are looking for a strong foundation, well-designed architecture, and a positive developer experience, then this starter kit is an excellent resource to consider. It offers a comprehensive set of best practices and tools that have been tested and proven effective in multiple projects.
75
+
I think this question is not valid anymore specially after the last React conference when the core react native team recommended using Expo for new projects.
81
76
82
-
Even if you are not sure that using a starter kit is the right choice for your project, you can still benefit from this resource. You can explore the starter kit and draw inspiration from the solutions it provides for common challenges faced by React Native developers. This can be a helpful way to discover good practices and find effective solutions for your own app development process.
77
+
> "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
83
78
84
-
Overall, whether you choose to use this starter kit as is or simply take some ideas from it, we believe it offers valuable insights and resources for anyone looking to build a high-quality React Native app.
79
+
Still hesitating? Check out this [article](https://reactnative.dev/blog/2024/06/25/use-a-framework-to-build-react-native-apps)or this [video](https://www.youtube.com/watch?v=lifGTznLBcw), maybe this one [video](https://www.youtube.com/watch?v=ek_IdGC0G80) too.
85
80
86
81
## 🧑💻 Stay up to date
87
82
@@ -108,8 +103,14 @@ We value the feedback and contributions of our users, and we encourage you to le
0 commit comments