Skip to content

Commit 9cf3256

Browse files
kristerkarikristerkari
committedJan 26, 2019
Updated docs for using Expo
1 parent 53e9f80 commit 9cf3256

7 files changed

+289
-32
lines changed
 

‎docs/multiple-transformers.md

+33-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
In your project's root folder:
1414

15-
#### For React Native v0.57 or newer
15+
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
1616

1717
Add more extensions to `.babelrc`:
1818

@@ -31,6 +31,24 @@ Add more extensions to `.babelrc`:
3131
}
3232
```
3333

34+
... or if you are using [Expo](https://expo.io/), to `babel.config.js`
35+
36+
```js
37+
module.exports = function(api) {
38+
api.cache(true);
39+
return {
40+
presets: ["babel-preset-expo"],
41+
plugins: [
42+
"react-native-classname-to-style",
43+
[
44+
"react-native-platform-specific-extensions",
45+
{ extensions: ["css", "scss", "sass"] }
46+
]
47+
]
48+
};
49+
};
50+
```
51+
3452
Configure `rn-cli.config.js` to use a custom transformer file and add more extensions:
3553

3654
```js
@@ -53,7 +71,7 @@ module.exports = (async () => {
5371

5472
---
5573

56-
#### For React Native v0.56 or older
74+
#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
5775

5876
Add more extensions to `.babelrc`:
5977

@@ -85,6 +103,19 @@ module.exports = {
85103
};
86104
```
87105

106+
...or if you are using [Expo](https://expo.io/), to `app.json`:
107+
108+
```json
109+
{
110+
"expo": {
111+
"packagerOpts": {
112+
"sourceExts": ["js", "jsx", "css", "scss", "sass"],
113+
"transformer": "./transformer.js"
114+
}
115+
}
116+
}
117+
```
118+
88119
### Step 3: configure transformer
89120

90121
Create a `transformer.js` file:

‎docs/setup-css.md

+40-5
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,12 @@ react-native run-ios
3939
yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-css-transformer --dev
4040
```
4141

42-
### Step 4: Setup your project's `.babelrc`
42+
### Step 4: Setup your project's Babel configuration
4343

4444
#### For React Native v0.57 or newer
4545

46+
`.babelrc`
47+
4648
```json
4749
{
4850
"presets": ["module:metro-react-native-babel-preset"],
@@ -62,6 +64,8 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
6264

6365
#### For React Native v0.56 or older
6466

67+
`.babelrc`
68+
6569
```json
6670
{
6771
"presets": ["react-native"],
@@ -77,9 +81,28 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
7781
}
7882
```
7983

84+
---
85+
86+
#### For Expo
87+
88+
`babel.config.js`
89+
90+
```js
91+
module.exports = function(api) {
92+
api.cache(true);
93+
return {
94+
presets: ["babel-preset-expo"],
95+
plugins: [
96+
"react-native-classname-to-style",
97+
["react-native-platform-specific-extensions", { extensions: ["css"] }]
98+
]
99+
};
100+
};
101+
```
102+
80103
### Step 5: Setup `rn-cli.config.js` in your project
81104

82-
#### For React Native v0.57 or newer
105+
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
83106

84107
Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
85108

@@ -101,11 +124,23 @@ module.exports = (async () => {
101124
})();
102125
```
103126

127+
If you are using [Expo](https://expo.io/), you also need to add this to `app.json`:
128+
129+
```json
130+
{
131+
"expo": {
132+
"packagerOpts": {
133+
"config": "rn-cli.config.js"
134+
}
135+
}
136+
}
137+
```
138+
104139
---
105140

106-
#### For React Native v0.56 or older
141+
#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
107142

108-
Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
143+
If you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
109144

110145
```js
111146
module.exports = {
@@ -118,7 +153,7 @@ module.exports = {
118153
};
119154
```
120155

121-
...or if you are using [Expo](https://expo.io/), in `app.json`:
156+
If you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:
122157

123158
```json
124159
{

‎docs/setup-less.md

+40-5
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,12 @@ react-native run-ios
3939
yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-less-transformer less --dev
4040
```
4141

42-
### Step 4: Setup your project's `.babelrc`
42+
### Step 4: Setup your project's Babel configuration
4343

4444
#### For React Native v0.57 or newer
4545

46+
`.babelrc`
47+
4648
```json
4749
{
4850
"presets": ["module:metro-react-native-babel-preset"],
@@ -62,6 +64,8 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
6264

6365
#### For React Native v0.56 or older
6466

67+
`.babelrc`
68+
6569
```json
6670
{
6771
"presets": ["react-native"],
@@ -77,9 +81,28 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
7781
}
7882
```
7983

84+
---
85+
86+
#### For Expo
87+
88+
`babel.config.js`
89+
90+
```js
91+
module.exports = function(api) {
92+
api.cache(true);
93+
return {
94+
presets: ["babel-preset-expo"],
95+
plugins: [
96+
"react-native-classname-to-style",
97+
["react-native-platform-specific-extensions", { extensions: ["less"] }]
98+
]
99+
};
100+
};
101+
```
102+
80103
### Step 5: Setup `rn-cli.config.js` in your project
81104

82-
#### For React Native v0.57 or newer
105+
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
83106

84107
Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
85108

@@ -101,11 +124,23 @@ module.exports = (async () => {
101124
})();
102125
```
103126

127+
If you are using [Expo](https://expo.io/), you also need to add this to `app.json`:
128+
129+
```json
130+
{
131+
"expo": {
132+
"packagerOpts": {
133+
"config": "rn-cli.config.js"
134+
}
135+
}
136+
}
137+
```
138+
104139
---
105140

106-
#### For React Native v0.56 or older
141+
#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
107142

108-
Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
143+
If you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
109144

110145
```js
111146
module.exports = {
@@ -118,7 +153,7 @@ module.exports = {
118153
};
119154
```
120155

121-
...or if you are using [Expo](https://expo.io/), in `app.json`:
156+
If you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:
122157

123158
```json
124159
{

‎docs/setup-postcss.md

+43-5
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,14 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
4343

4444
Add your PostCSS configuration to [one of the supported config formats](https://github.com/michael-ciniawsky/postcss-load-config), e.g. `package.json`, `.postcssrc`, `postcss.config.js`, etc.
4545

46-
### Step 5: Setup your project's `.babelrc`
46+
### Step 5: Setup your project's Babel configuration
4747

4848
> Remember to add additional extensions if needed.
4949
5050
#### For React Native v0.57 or newer
5151

52+
`.babelrc`
53+
5254
```json
5355
{
5456
"presets": ["module:metro-react-native-babel-preset"],
@@ -68,6 +70,8 @@ Add your PostCSS configuration to [one of the supported config formats](https://
6870

6971
#### For React Native v0.56 or older
7072

73+
`.babelrc`
74+
7175
```json
7276
{
7377
"presets": ["react-native"],
@@ -83,9 +87,31 @@ Add your PostCSS configuration to [one of the supported config formats](https://
8387
}
8488
```
8589

90+
---
91+
92+
#### For Expo
93+
94+
`babel.config.js`
95+
96+
```js
97+
module.exports = function(api) {
98+
api.cache(true);
99+
return {
100+
presets: ["babel-preset-expo"],
101+
plugins: [
102+
"react-native-classname-to-style",
103+
[
104+
"react-native-platform-specific-extensions",
105+
{ extensions: ["css", "pcss"] }
106+
]
107+
]
108+
};
109+
};
110+
```
111+
86112
### Step 6: Setup `rn-cli.config.js` in your project
87113

88-
#### For React Native v0.57 or newer
114+
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
89115

90116
Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
91117

@@ -107,11 +133,23 @@ module.exports = (async () => {
107133
})();
108134
```
109135

136+
If you are using [Expo](https://expo.io/), you also need to add this to `app.json`:
137+
138+
```json
139+
{
140+
"expo": {
141+
"packagerOpts": {
142+
"config": "rn-cli.config.js"
143+
}
144+
}
145+
}
146+
```
147+
110148
---
111149

112-
#### For React Native v0.56 or older
150+
#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
113151

114-
Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
152+
If you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
115153

116154
```js
117155
module.exports = {
@@ -124,7 +162,7 @@ module.exports = {
124162
};
125163
```
126164

127-
...or if you are using [Expo](https://expo.io/), in `app.json`:
165+
If you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:
128166

129167
```json
130168
{

0 commit comments

Comments
 (0)