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: docs/src/content/docs/ci-cd/app-releasing-process.mdx
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -75,15 +75,15 @@ To setup the release process to your app, you need to follow these steps:
75
75
76
76
First, make sure to create an [Expo](expo.dev) account then create a new organization for your project.
77
77
78
-
When then name of your organization is ready, you need to update the `EXPO_ACCOUNT_OWNER` variable in `env.js` file with the name of your organization.
78
+
When then name of your organization is ready, you need to update the `EXPO_ACCOUNT_OWNER` variable in `env.ts` file with the name of your organization.
79
79
80
80
**For QA release:**
81
81
82
82
```bash
83
-
pnpm run prebuild:staging
83
+
pnpm run prebuild:preview
84
84
```
85
85
86
-
The above command will regenerate the iOS and Android folders based on the `staging` configuration.
86
+
The above command will regenerate the iOS and Android folders based on the `preview` configuration.
87
87
88
88
Then run the following command to build the app using EAS:
89
89
@@ -92,8 +92,8 @@ You need to be logged in to EAS using `eas login` command before running this co
92
92
:::
93
93
94
94
```bash
95
-
pnpm run build:staging:ios
96
-
pnpm run build:staging:android
95
+
pnpm run build:preview:ios
96
+
pnpm run build:preview:android
97
97
```
98
98
99
99
The above commands will generate the required credentials for the build and store them in EAS servers so that we can use them later to trigger the build from GitHub actions.
@@ -118,9 +118,9 @@ All github workflows are already ready to be used in the starter. You just need
118
118
119
119
### Github action and env variables
120
120
121
-
For simplicity, we assume that all your environment variables are already added to your env files and have been pushed to your repository.
121
+
For simplicity, we assume that all your environment variables are already added to your `.env` file and have been pushed to your repository.
122
122
123
-
If you prefer not to push env files (recommended), you need to add all your environment variables to GitHub secrets. Then, use `create-envfile` action to create the env file on the fly before the prebuild script.
123
+
If you prefer not to push the `.env` file (recommended), you need to add all your environment variables to GitHub secrets. Then, use `create-envfile` action to create the env file on the fly before the prebuild script.
124
124
125
125
```yaml
126
126
## .github/workflows/eas-build-prod.yml
@@ -130,16 +130,16 @@ If you prefer not to push env files (recommended), you need to add all your envi
This action will create a new env file `.env.production` with the `DEBUG` and `SECRET_KEY` variables you added to the action. so make sure to include all your env variables to the action.
142
+
This action will create a new `.env` file with the `DEBUG` and `SECRET_KEY` variables you added to the action. so make sure to include all your env variables to the action.
Copy file name to clipboardExpand all lines: docs/src/content/docs/getting-started/create-new-app.md
-2Lines changed: 0 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -63,14 +63,12 @@ When you open the project on Cursor you will see a popup asking you to install t
63
63
To ensure that your code is properly validated and formatted, we highly recommend installing all of the recommended extensions. However, if you're hesitant to install them all, we suggest at least installing the following extensions, as they are essential to our code validation and formatting on file save:
Copy file name to clipboardExpand all lines: docs/src/content/docs/getting-started/customize-app.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,7 +25,7 @@ We included TODO comments in the project to guide you to the areas requiring upd
25
25
26
26
As we are using expo to create the starter, updating the app icon and splash screen is straightforward. You only need to update the app icon and splash screen images inside the `assets` folder and run `expo prebuild` to update the app icon and splash screen.
27
27
28
-
As we are supporting multiple variants for development, staging and production environments you need 3 different icons but the right solution is to use the same icon with badges for each environment.
28
+
As we are supporting multiple variants for development, preview and production environments you need 3 different icons but the right solution is to use the same icon with badges for each environment.
29
29
30
30
For more details about the app icon and splash screen, please refer to the expo documentation.
Copy file name to clipboardExpand all lines: docs/src/content/docs/getting-started/rules-and-conventions.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,11 +28,11 @@ For naming variables, functions, classes, interfaces, and enums, we follow camel
28
28
29
29
## Linting
30
30
31
-
Using a linter is a must in any JavaScript project. For starters, we are using ESLint with the React Native community config and some custom rules to ensure that we are following the rules and conventions related to file naming, Tailwind CSS classes, TypeScript types, import order, internationalization files, and more.
31
+
Using a linter is a must in any JavaScript project. For starters, we are using ESLint with [@antfu/eslint-config](https://github.com/antfu/eslint-config) and some custom rules to ensure that we are following the rules and conventions related to file naming, Tailwind CSS classes, TypeScript types, import order, internationalization files, and more. This config also handles code formatting, so Prettier is no longer needed.
Copy file name to clipboardExpand all lines: docs/src/content/docs/recipes/sentry-setup.mdx
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,14 +39,14 @@ The starter kit did not come with Sentry pre-configured, but it's very easy to s
39
39
```
40
40
41
41
:::note
42
-
You can use the same Sentry configuration for all app variants (development, staging, production) as Sentry allows you to filter errors by app ID or package name in the dashboard. This simplifies setup and management while still providing the ability to distinguish between different environments.
42
+
You can use the same Sentry configuration for all app variants (development, preview, production) as Sentry allows you to filter errors by app ID or package name in the dashboard. This simplifies setup and management while still providing the ability to distinguish between different environments.
43
43
:::
44
44
45
-
It's crucial to add these variables to `env.js` for validation. `SENTRY_ORG` and `SENTRY_PROJECT` should be added as build-time variables, while `SENTRY_DSN` should be added as a client variable.
45
+
It's crucial to add these variables to `env.ts` for validation. `SENTRY_ORG` and `SENTRY_PROJECT` should be added as build-time variables, while `SENTRY_DSN` should be added as a client variable.
46
46
47
-
Update your `env.js` file as follows:
47
+
Update your `env.ts` file as follows:
48
48
49
-
```js title='env.js'
49
+
```ts title='env.ts'
50
50
// ... existing imports and configurations
51
51
52
52
const client =z.object({
@@ -124,11 +124,11 @@ The starter kit did not come with Sentry pre-configured, but it's very easy to s
124
124
/* eslint-env node */
125
125
// this replaces `const { getDefaultConfig } = require('expo/metro-config');`
The starter comes with a set of basic components and a simple design system based on Nativewind to help you get started and save you time.
12
+
The starter comes with a set of basic components and a simple design system based on Uniwind to help you get started and save you time.
13
13
14
14
All those components can be found in the `src/components/ui` folder. Our philosophy is to keep the components as simple as possible and to avoid adding too much logic to them. This way, they are easier to reuse and customize.
15
15
@@ -72,8 +72,8 @@ const MyComponent = () => {
72
72
73
73
## Image
74
74
75
-
For the `Image` component, we use the `expo-image` library to provide a fast and performant image component. The `Image` component is a wrapper around the `Image` component from `expo-image` package with additional styling provided by `nativewind`.
76
-
The `cssInterop` function from `nativewind` is used to apply styling and, in this way, the `className` property is applied to the `style` property of the `Image` component.
75
+
For the `Image` component, we use the `expo-image` library to provide a fast and performant image component. The `Image` component is a wrapper around the `Image` component from `expo-image` package with additional styling provided by `uniwind`.
76
+
The `cssInterop` function from `uniwind` is used to apply styling and, in this way, the `className` property is applied to the `style` property of the `Image` component.
77
77
78
78
<CodeBlockfile="src/components/ui/image.tsx" />
79
79
@@ -156,7 +156,7 @@ Each variant should include styles for the `container`, `indicator`, and `label`
Copy file name to clipboardExpand all lines: docs/src/content/docs/ui-and-theme/ui-theming.mdx
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ How we manage the UI and theming of the application.
14
14
15
15
For the past few years, we have tried multiple approaches to style our React Native apps: Stylesheet API, styled-components, restyle, and more.
16
16
17
-
Right now, we are confident that using Tailwind CSS with React Native is the right solution, especially after trying [Nativewind](https://www.nativewind.dev/v4/overview).
17
+
Right now, we are confident that using Tailwind CSS with React Native is the right solution, especially after trying [Uniwind](https://github.com/huozhi/uniwind).
18
18
19
19
If you are familiar with Tailwind CSS on the web you will find it very easy to use and you can even copy past your styling from a web application and should work without issues with react native too with some minor adjustments of course.
20
20
@@ -28,23 +28,23 @@ We would also recommend playing with the [Tailwind CSS playground](https://play.
28
28
29
29
:::
30
30
31
-
## About Nativewind
31
+
## About Uniwind
32
32
33
-
Nativewind is a library that allows you to use Tailwind CSS with react native. Nativewind achieves this by pre-compiling the Tailwind CSS classes into react native stylesheets with a minimal runtime to selectively apply the styles.
33
+
Uniwind is a library that allows you to use Tailwind CSS with React Native. Uniwind achieves this by pre-compiling Tailwind CSS classes into React Native stylesheets with a minimal runtime to selectively apply the styles.
34
34
35
-
NativeWind version 4 introduces several improvements and enhancements and provides a more efficient development experience. The transition to version 4 introduces a different approach that eliminates the need for creating and wrapping our own components with the `styled` component. Thereby, this utility-first approach simplifies the styling process by using classes and applying styles directly within JSX elements.
35
+
Uniwind provides an efficient development experience with a utility-first approach that simplifies the styling process by using classes and applying styles directly within JSX elements.
36
36
37
-
For more details about Nativewind you can check their [documentation](https://www.nativewind.dev/v4/overview/).
37
+
For more details about Uniwind you can check their [documentation](https://github.com/huozhi/uniwind).
38
38
39
39
Here is an example of how your component should look like:
Nativewind is the same as Tailwind CSS, it comes with a default theme and colors that you can override by creating your own theme and colors.
45
+
Uniwind is the same as Tailwind CSS, it comes with a default theme and colors that you can override by creating your own theme and colors.
46
46
47
-
You need to understand that Nativewind is a library that is built on top of Tailwind CSS. Feel free to add any Tailwind CSS config that you want to use in your application such as updating colors, spacing, typography, etc.
47
+
You need to understand that Uniwind is a library that is built on top of Tailwind CSS. Feel free to add any Tailwind CSS config that you want to use in your application such as updating colors, spacing, typography, etc.
48
48
49
49
We have created a `ui/theme` folder where you can find our custom colors that have been imported into `tailwind.config.js` and used as a theme for our demo application. You can add your own color palette and use them in your components with Tailwind class names.
50
50
@@ -69,7 +69,7 @@ This template comes with dark mode support out of the box, and it's very easy to
69
69
70
70
### Implementation
71
71
72
-
Since we're using [nativewind](https://www.nativewind.dev/) (which uses Tailwind CSS under the hood) and expo-router we let them handle the application of theme, and we just take care of the colors we want.
72
+
Since we're using [uniwind](https://github.com/huozhi/uniwind) (which uses Tailwind CSS under the hood) and expo-router we let them handle the application of theme, and we just take care of the colors we want.
73
73
We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeConfig.tsx` to get the theme object that we pass to ThemeProvider directly. For more information check out [expo-router](https://docs.expo.dev/router/appearance/)
@@ -78,7 +78,7 @@ We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeC
78
78
79
79
### How do we handle theme changes?
80
80
81
-
We use the `loadSelectedTheme` function to load the theme from the storage if there's a theme saved in the storage, otherwise, we let nativwind use the default theme (system).
81
+
We use the `loadSelectedTheme` function to load the theme from the storage if there's a theme saved in the storage, otherwise, we let uniwind use the default theme (system).
82
82
To set the selected theme, we use the `useSelectedTheme` hook, which sets the theme in the storage and updates the color scheme of the app.
@@ -94,7 +94,7 @@ To add the values for the light mode, you can simply write them directly in your
94
94
If you want to use the style prop, you can use the `useColorScheme` hook to get the current color scheme and use it to apply the desired style. However, **in most cases, you won't need it** as the dark: variant will do the job.
95
95
96
96
```tsx
97
-
import { useColorScheme } from'nativewind';
97
+
import { useColorScheme } from'uniwind';
98
98
99
99
const colorScheme =useColorScheme();
100
100
const style =
@@ -103,4 +103,4 @@ const style =
103
103
: { backgroundColor: 'white' };
104
104
```
105
105
106
-
For more details about dark mode, you can check [tailwind](https://tailwindcss.com/docs/dark-mode) and [nativewind](https://www.nativewind.dev/core-concepts/dark-mode)
106
+
For more details about dark mode, you can check [tailwind](https://tailwindcss.com/docs/dark-mode) and [uniwind](https://github.com/huozhi/uniwind)
0 commit comments