Skip to content

Commit 900f58e

Browse files
kristerkarikristerkari
committed
Update docs to be compatible with the changes from React Native 0.59
1 parent f1c7ccc commit 900f58e

8 files changed

+111
-75
lines changed

‎docs/multiple-transformers.md

+57-38
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
- [Setup React Native CSS modules with Less support](setup-less.md)
99
- [Setup React Native CSS modules with Stylus support](setup-stylus.md)
1010

11-
### Step 2: configure `.babelrc` and `rn-cli.config.js`
11+
### Step 2: Modify Babel configuration
1212

1313
In your project's root folder:
1414

@@ -49,26 +49,6 @@ module.exports = function(api) {
4949
};
5050
```
5151

52-
Configure `rn-cli.config.js` to use a custom transformer file and add more extensions:
53-
54-
```js
55-
const { getDefaultConfig } = require("metro-config");
56-
57-
module.exports = (async () => {
58-
const {
59-
resolver: { sourceExts }
60-
} = await getDefaultConfig();
61-
return {
62-
transformer: {
63-
babelTransformerPath: require.resolve("./transformer.js")
64-
},
65-
resolver: {
66-
sourceExts: [...sourceExts, "css", "scss", "sass"]
67-
}
68-
};
69-
})();
70-
```
71-
7252
---
7353

7454
#### For React Native v0.56 or older
@@ -90,20 +70,9 @@ Add more extensions to `.babelrc`:
9070
}
9171
```
9272

93-
Configure `rn-cli.config.js` to use a custom transformer file and add more extensions:
94-
95-
```js
96-
module.exports = {
97-
getTransformModulePath() {
98-
return require.resolve("./transformer.js");
99-
},
100-
getSourceExts() {
101-
return ["js", "jsx", "css", "scss", "sass"];
102-
}
103-
};
104-
```
73+
---
10574

106-
#### Expo SDK v30.0.0 or older
75+
#### For Expo SDK v30.0.0 or older
10776

10877
Add more extensions to `.babelrc`:
10978

@@ -122,7 +91,54 @@ Add more extensions to `.babelrc`:
12291
}
12392
```
12493

125-
Instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:
94+
### Step 3: Modify Metro bundler configuration
95+
96+
In your project's root folder:
97+
98+
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
99+
100+
Configure `metro.config.js` to use a custom transformer file and add more extensions:
101+
102+
```js
103+
const { getDefaultConfig } = require("metro-config");
104+
105+
module.exports = (async () => {
106+
const {
107+
resolver: { sourceExts }
108+
} = await getDefaultConfig();
109+
return {
110+
transformer: {
111+
babelTransformerPath: require.resolve("./transformer.js")
112+
},
113+
resolver: {
114+
sourceExts: [...sourceExts, "css", "scss", "sass"]
115+
}
116+
};
117+
})();
118+
```
119+
120+
---
121+
122+
#### For React Native v0.56 or older
123+
124+
Configure `rn-cli.config.js` to use a custom transformer file and add more extensions:
125+
126+
```js
127+
module.exports = {
128+
getTransformModulePath() {
129+
return require.resolve("./transformer.js");
130+
},
131+
getSourceExts() {
132+
return ["js", "jsx", "css", "scss", "sass"];
133+
}
134+
};
135+
```
136+
137+
---
138+
139+
#### For Expo SDK v30.0.0 or older
140+
141+
Configure `app.json` to use a custom transformer file and add more extensions:
126142

127143
```json
128144
{
@@ -135,13 +151,16 @@ Instead of adding the `rn-cli.config.js` file, you need to add this to `app.json
135151
}
136152
```
137153

138-
### Step 3: configure transformer
154+
### Step 4: configure transformer
139155

140156
Create a `transformer.js` file:
141157

142158
```js
143-
// For React Native version 0.56 or later
144-
var upstreamTransformer = require("metro/src/reactNativeTransformer");
159+
// For React Native version 0.59 or later
160+
var upstreamTransformer = require("metro-react-native-babel-transformer");
161+
162+
// For React Native version 0.56-0.58
163+
// var upstreamTransformer = require("metro/src/reactNativeTransformer");
145164

146165
// For React Native version 0.52-0.55
147166
// var upstreamTransformer = require("metro/src/transformer");

‎docs/setup-css.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ 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 Babel configuration
42+
### Step 4: Setup Babel configuration
4343

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

@@ -100,11 +100,11 @@ module.exports = function(api) {
100100
};
101101
```
102102

103-
### Step 5: Setup `rn-cli.config.js` in your project
103+
### Step 5: Setup Metro bundler configuration
104104

105105
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
106106

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

109109
```js
110110
const { getDefaultConfig } = require("metro-config");
@@ -130,7 +130,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
130130
{
131131
"expo": {
132132
"packagerOpts": {
133-
"config": "rn-cli.config.js"
133+
"config": "metro.config.js"
134134
}
135135
}
136136
}
@@ -153,7 +153,9 @@ module.exports = {
153153
};
154154
```
155155

156-
#### Expo SDK v30.0.0 or older
156+
---
157+
158+
#### For Expo SDK v30.0.0 or older
157159

158160
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`:
159161

‎docs/setup-less.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ 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 Babel configuration
42+
### Step 4: Setup Babel configuration
4343

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

@@ -100,11 +100,11 @@ module.exports = function(api) {
100100
};
101101
```
102102

103-
### Step 5: Setup `rn-cli.config.js` in your project
103+
### Step 5: Setup Metro bundler configuration
104104

105105
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
106106

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

109109
```js
110110
const { getDefaultConfig } = require("metro-config");
@@ -130,7 +130,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
130130
{
131131
"expo": {
132132
"packagerOpts": {
133-
"config": "rn-cli.config.js"
133+
"config": "metro.config.js"
134134
}
135135
}
136136
}
@@ -153,7 +153,9 @@ module.exports = {
153153
};
154154
```
155155

156-
#### Expo SDK v30.0.0 or older
156+
---
157+
158+
#### For Expo SDK v30.0.0 or older
157159

158160
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`:
159161

‎docs/setup-postcss.md

+12-7
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ 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 Babel configuration
46+
### Step 5: Setup Babel configuration
4747

4848
> Remember to add additional extensions if needed.
4949
@@ -109,11 +109,11 @@ module.exports = function(api) {
109109
};
110110
```
111111

112-
### Step 6: Setup `rn-cli.config.js` in your project
112+
### Step 6: Setup Metro bundler configuration
113113

114114
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
115115

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

118118
```js
119119
const { getDefaultConfig } = require("metro-config");
@@ -139,7 +139,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
139139
{
140140
"expo": {
141141
"packagerOpts": {
142-
"config": "rn-cli.config.js"
142+
"config": "metro.config.js"
143143
}
144144
}
145145
}
@@ -162,7 +162,9 @@ module.exports = {
162162
};
163163
```
164164

165-
#### Expo SDK v30.0.0 or older
165+
---
166+
167+
#### For Expo SDK v30.0.0 or older
166168

167169
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`:
168170

@@ -180,8 +182,11 @@ If you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.
180182
Create `postcss-transformer.js` file to your project's root and specify supported extensions:
181183

182184
```js
183-
// For React Native version 0.56 or later
184-
var upstreamTransformer = require("metro/src/reactNativeTransformer");
185+
// For React Native version 0.59 or later
186+
var upstreamTransformer = require("metro-react-native-babel-transformer");
187+
188+
// For React Native version 0.56-0.58
189+
// var upstreamTransformer = require("metro/src/reactNativeTransformer");
185190

186191
// For React Native version 0.52-0.55
187192
// var upstreamTransformer = require("metro/src/transformer");

‎docs/setup-responsive.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ react-native run-ios
4141
yarn add babel-plugin-react-native-classname-to-dynamic-style babel-plugin-react-native-platform-specific-extensions react-native-css-transformer --dev
4242
```
4343

44-
### Step 4: Setup your project's Babel configuration
44+
### Step 4: Setup Babel configuration
4545

4646
#### For React Native v0.57 or newer
4747

@@ -102,11 +102,11 @@ module.exports = function(api) {
102102
};
103103
```
104104

105-
### Step 5: Setup `rn-cli.config.js` in your project
105+
### Step 5: Setup Metro bundler configuration
106106

107107
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
108108

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

111111
```js
112112
const { getDefaultConfig } = require("metro-config");
@@ -132,7 +132,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
132132
{
133133
"expo": {
134134
"packagerOpts": {
135-
"config": "rn-cli.config.js"
135+
"config": "metro.config.js"
136136
}
137137
}
138138
}
@@ -155,7 +155,9 @@ module.exports = {
155155
};
156156
```
157157

158-
#### Expo SDK v30.0.0 or older
158+
---
159+
160+
#### For Expo SDK v30.0.0 or older
159161

160162
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`:
161163

‎docs/setup-sass.md

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

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

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

@@ -103,11 +103,11 @@ module.exports = function(api) {
103103
};
104104
```
105105

106-
### Step 5: Setup `rn-cli.config.js` in your project
106+
### Step 5: Setup Metro bundler configuration
107107

108108
#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
109109

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

112112
```js
113113
const { getDefaultConfig } = require("metro-config");
@@ -133,7 +133,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
133133
{
134134
"expo": {
135135
"packagerOpts": {
136-
"config": "rn-cli.config.js"
136+
"config": "metro.config.js"
137137
}
138138
}
139139
}
@@ -156,7 +156,9 @@ module.exports = {
156156
};
157157
```
158158

159-
#### Expo SDK v30.0.0 or older
159+
---
160+
161+
#### For Expo SDK v30.0.0 or older
160162

161163
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`:
162164

0 commit comments

Comments
 (0)