Skip to content

Commit 8690499

Browse files
marklawlormarklawlor
committed
[docs]: Improve references to Expo
1 parent dd7da41 commit 8690499

File tree

3 files changed

+38
-36
lines changed

3 files changed

+38
-36
lines changed

‎apps/website/docs/getting-started/_install.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import NPM from "../_npm.mdx";
22

3-
You will need to install `nativewind@^4.0.1` and it's peer dependencies `tailwindcss` and `react-native-reanimated`.
3+
You will need to install `nativewind` and it's peer dependencies `tailwindcss` and `react-native-reanimated`.
44

5-
<NPM
6-
deps={["nativewind@^4.0.1", "react-native-reanimated", "tailwindcss"]}
7-
/>
5+
<NPM deps={["nativewind", "react-native-reanimated", "tailwindcss"]} />
86

9-
Run `pod-install` to install Reanimated pod:
7+
**Non-Expo projects**
8+
9+
Run `pod-install` to finish installation of `react-native-reanimated`
1010

1111
```bash
1212
npx pod-install

‎apps/website/docs/getting-started/expo-router.mdx

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import Tabs from "@theme/Tabs";
21
import TabItem from "@theme/TabItem";
2+
import Tabs from "@theme/Tabs";
3+
34
import Install from "./_install.mdx";
45
import Tailwind from "./_tailwind.mdx";
56

@@ -18,7 +19,7 @@ import Tailwind from "./_tailwind.mdx";
1819
### 3. Add the Babel preset
1920

2021
<Tabs>
21-
<TabItem value="SDK 49">
22+
<TabItem value="SDK 50+">
2223
```js title="babel.config.js"
2324
module.exports = function (api) {
2425
api.cache(true);
@@ -27,16 +28,11 @@ import Tailwind from "./_tailwind.mdx";
2728
["babel-preset-expo", { jsxImportSource: "nativewind" }],
2829
"nativewind/babel",
2930
],
30-
plugins: [
31-
// Required for expo-router
32-
"expo-router/babel",
33-
"react-native-reanimated/plugin",
34-
]
3531
};
3632
};
3733
```
3834
</TabItem>
39-
<TabItem value="SDK 50+">
35+
<TabItem value="SDK 49">
4036
```js title="babel.config.js"
4137
module.exports = function (api) {
4238
api.cache(true);
@@ -45,13 +41,17 @@ import Tailwind from "./_tailwind.mdx";
4541
["babel-preset-expo", { jsxImportSource: "nativewind" }],
4642
"nativewind/babel",
4743
],
44+
plugins: [
45+
// Required for expo-router
46+
"expo-router/babel",
47+
"react-native-reanimated/plugin",
48+
]
4849
};
4950
};
5051
```
5152
</TabItem>
5253
</Tabs>
5354

54-
5555
### 4. Modify your metro.config.js
5656

5757
If your project does not have a `metro.config.js` run `npx expo customize metro.config.js`
@@ -61,23 +61,23 @@ If your project does not have a `metro.config.js` run `npx expo customize metro.
6161

6262
```js title="metro.config.js"
6363
const { getDefaultConfig } = require("expo/metro-config");
64-
const { withNativeWind } = require('nativewind/metro');
64+
const { withNativeWind } = require("nativewind/metro");
6565

66-
const config = getDefaultConfig(__dirname, { isCSSEnabled: true })
66+
const config = getDefaultConfig(__dirname, { isCSSEnabled: true });
6767

68-
module.exports = withNativeWind(config, { input: './global.css' })
68+
module.exports = withNativeWind(config, { input: "./global.css" });
6969
```
7070

7171
</TabItem>
7272
<TabItem value="SDK 50+">
7373

7474
```js title="metro.config.js"
7575
const { getDefaultConfig } = require("expo/metro-config");
76-
const { withNativeWind } = require('nativewind/metro');
76+
const { withNativeWind } = require("nativewind/metro");
7777

78-
const config = getDefaultConfig(__dirname)
78+
const config = getDefaultConfig(__dirname);
7979

80-
module.exports = withNativeWind(config, { input: './global.css' })
80+
module.exports = withNativeWind(config, { input: "./global.css" });
8181
```
8282

8383
</TabItem>
@@ -87,13 +87,12 @@ module.exports = withNativeWind(config, { input: './global.css' })
8787
### 5. Import your CSS file
8888

8989
```js title="app/_layout.js"
90-
import {Slot} from "expo-router";
90+
import { Slot } from "expo-router";
9191

9292
// Import your global CSS file
93-
import "../global.css"
94-
95-
export default Slot
93+
import "../global.css";
9694

95+
export default Slot;
9796
```
9897

9998
### 6. TypeScript (optional)

‎apps/website/docs/getting-started/react-native.mdx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import Tabs from "@theme/Tabs";
21
import TabItem from "@theme/TabItem";
2+
import Tabs from "@theme/Tabs";
3+
34
import Install from "./_install.mdx";
45
import Tailwind from "./_tailwind.mdx";
56

@@ -26,7 +27,7 @@ NativeWind works with both Expo and framework-less React Native projects but Exp
2627
### 3. Add the Babel preset
2728

2829
<Tabs groupId="framework">
29-
<TabItem value="Expo SDK 49">
30+
<TabItem value="Expo SDK 50+">
3031
```js title="babel.config.js"
3132
module.exports = function (api) {
3233
api.cache(true);
@@ -35,16 +36,12 @@ NativeWind works with both Expo and framework-less React Native projects but Exp
3536
["babel-preset-expo", { jsxImportSource: "nativewind" }],
3637
"nativewind/babel",
3738
],
38-
plugins: [
39-
// Required for expo-router
40-
"expo-router/babel",
41-
"react-native-reanimated/plugin",
42-
]
4339
};
4440
};
4541
```
4642
</TabItem>
47-
<TabItem value="Expo SDK 50+">
43+
44+
<TabItem value="Expo SDK 49">
4845
```js title="babel.config.js"
4946
module.exports = function (api) {
5047
api.cache(true);
@@ -53,6 +50,11 @@ NativeWind works with both Expo and framework-less React Native projects but Exp
5350
["babel-preset-expo", { jsxImportSource: "nativewind" }],
5451
"nativewind/babel",
5552
],
53+
plugins: [
54+
// Required for expo-router
55+
"expo-router/babel",
56+
"react-native-reanimated/plugin",
57+
]
5658
};
5759
};
5860
```
@@ -83,6 +85,7 @@ module.exports = {
8385

8486
module.exports = withNativeWind(config, { input: './global.css' })
8587
```
88+
8689
</TabItem>
8790
<TabItem value="Expo SDK 50+">
8891

@@ -97,18 +100,17 @@ module.exports = {
97100

98101
</TabItem >
99102

100-
101103
<TabItem value="frameworkless" label="Framework-less">
102104

103105
```js title="metro.config.js"
104-
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
105-
const { withNativeWind } = require('nativewind/metro')
106+
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
107+
const { withNativeWind } = require("nativewind/metro");
106108

107109
const config = mergeConfig(getDefaultConfig(__dirname), {
108110
/* your config */
109111
});
110112

111-
module.exports = withNativeWind(config, { input: './global.css'})
113+
module.exports = withNativeWind(config, { input: "./global.css" });
112114
```
113115

114116
</TabItem>
@@ -127,6 +129,7 @@ export default App() {
127129
### 6. Modify your `app.json` (Expo only)
128130

129131
Switch the bundler to use the [Metro bundler](https://docs.expo.dev/guides/customizing-metro/#web-support)
132+
130133
```js
131134
{
132135
"expo": {

0 commit comments

Comments
 (0)