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
+31Lines changed: 31 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,6 +37,7 @@ Welcome to `react-native-template` 👋, the go-to template for building mobile
37
37
8.[Finish Line](#finish-line)
38
38
39
39
<aname="quick-start"></a>
40
+
40
41
## Quick Start 🚀
41
42
42
43
To create a new project using this template, run:
@@ -48,6 +49,7 @@ yarn
48
49
```
49
50
50
51
<aname="project-structure"></a>
52
+
51
53
## Project Structure 🏗️
52
54
53
55
This template provides a well-organized directory structure with a set of pre-configured files to streamline your development process. Here's an overview of the essential components:
@@ -60,6 +62,7 @@ This template provides a well-organized directory structure with a set of pre-co
60
62
-`utils`: A place for utility functions, hooks, stores and types that can be shared across your application.
61
63
62
64
<aname="configuration-files"></a>
65
+
63
66
## Configuration Files 📑
64
67
65
68
Each configuration file is set up to ensure that your development experience is as smooth as possible:
@@ -80,10 +83,12 @@ Each configuration file is set up to ensure that your development experience is
80
83
-`yarn.lock`: Auto-generated file that ensures consistent installation of node modules across environments.
81
84
82
85
<aname="configuration-files"></a>
86
+
83
87
## Features and Benefits 🌟
84
88
85
89
This template comes equipped with a robust set of features and solutions to enhance your development workflow:
86
90
91
+
<aname="1-full-linting-and-auto-formatting"></a>
87
92
### 1. Full Linting and Auto Formatting 🛠️
88
93
89
94
Leverage full linting and auto-formatting with ESLint and Prettier, configured to help maintain a clean and consistent codebase. Auto-sorting of imports and Tailwind classes on save, alongside the enforcement of good practices, keeps your project tidy.
@@ -98,6 +103,8 @@ For linting and formatting your code, use these commands in `package.json`:
98
103
}
99
104
```
100
105
106
+
<aname="2-easy-aliases-with-typescript"></a>
107
+
101
108
### 2. Easy Aliases with TypeScript 🏷️
102
109
103
110
Clean up your imports with straightforward path aliases in `tsconfig.json`, promoting a more organized code structure.
@@ -115,6 +122,8 @@ Clean up your imports with straightforward path aliases in `tsconfig.json`, prom
115
122
}
116
123
```
117
124
125
+
<aname="3-nativewind-integration"></a>
126
+
118
127
### 3. Nativewind Integration 🎨
119
128
120
129
Hit the ground running with Nativewind's setup. Utilize the `theme` object for consistent styling and the `cn` function to conditionally apply classes.
@@ -132,6 +141,8 @@ import { cn } from '@utils/cn';
132
141
</Text>
133
142
```
134
143
144
+
<aname="4-full-localization-support"></a>
145
+
135
146
### 4. Full Localization Support 🌐
136
147
137
148
Achieve effortless internationalization with `react-i18next` and `i18next`. Translation keys are typesafe and localisation files are neatly organized.
@@ -144,6 +155,8 @@ i18n.changeLanguage('en'); // Switch languages
144
155
<Text>{t('helloWorld')}</Text>; // Typesafe keys
145
156
```
146
157
158
+
<aname="5-typed-expo-router-setup"></a>
159
+
147
160
### 5. Typed Expo Router Setup 🚦
148
161
149
162
Pre-configured routing structure for authenticated and guest users. Routes are typed for hassle-free navigation.
A pre-configured Zodius API client with Tenstack Query for managing API calls. The `./api` folder includes a fully set up example for GET and POST requests, complete with schemas, definitions, and global error handling through a custom Zodius plugin.
@@ -195,6 +210,8 @@ const api = new ZodiosHooks('exampleApi', apiClient);
195
210
export { api, apiClient };
196
211
```
197
212
213
+
<aname="7-custom-utility-hooks"></a>
214
+
198
215
### 7. Custom Utility Hooks 🔗
199
216
200
217
Two custom hooks are provided for enhanced functionality:
Incorporate environment variables securely using the Infisical service with a custom script `infisical.sh`, which is run to inject variables into your build process.
The `react-native-template` includes several packages that extend its capabilities and enrich the development experience. Here’s a brief overview of these packages and what they offer:
241
266
267
+
<aname="zod"></a>
268
+
242
269
#### Zod
243
270
[Zod](https://github.com/colinhacks/zod) is a TypeScript-first schema declaration and validation library. It allows you to build schemas using TypeScript syntax, ensuring that data conforms to the specified shapes and types at runtime. Zod is particularly useful for validating data received from external sources, such as APIs or user input, and helps enforce type safety throughout the application.
244
271
272
+
<aname="lottie-react-native"></a>
273
+
245
274
#### Lottie-React-Native
246
275
[Lottie-React-Native](https://github.com/lottie-react-native/lottie-react-native) is a mobile library for React Native that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile. This package enables developers to add high-quality animations to their React Native applications easily. Lottie animations are highly performant and can drastically enhance the user interface by providing fluid, eye-catching animations that can be controlled programmatically.
247
276
277
+
<aname="lucide-react-native"></a>
278
+
248
279
#### Lucide-React-Native
249
280
[Lucide-React-Native](https://github.com/lucide-icons/lucide-react-native) is a fork of the Feather Icons project, specifically tailored for React Native applications. It provides a collection of beautifully crafted, customizable icons which are easy to use in UI development. Using Lucide icons helps maintain consistency and clarity in the app’s design, making the interface more intuitive and visually appealing.
0 commit comments