more Expo related docs updates

Author: kristerkari

docs/multiple-transformers.md

@@ -71,7 +71,7 @@ module.exports = (async () => {
 
 ---
 
-#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
+#### For React Native v0.56 or older
 
 Add more extensions to `.babelrc`:
 
@@ -103,7 +103,26 @@ module.exports = {
 };
 ```
 
-...or if you are using [Expo](https://expo.io/), to `app.json`:
+#### Expo SDK v30.0.0 or older
+
+Add more extensions to `.babelrc`:
+
+```json
+{
+ "presets": ["babel-preset-expo"],
+ "plugins": [
+ "react-native-classname-to-style",
+ [
+ "react-native-platform-specific-extensions",
+ {
+ "extensions": ["css", "scss", "sass"]
+ }
+ ]
+ ]
+}
+```
+
+Instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:
 
 ```json
 {

docs/setup-css.md

@@ -85,7 +85,7 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
 
 #### For Expo
 
-`babel.config.js`
+`babel.config.js` (older Expo versions use `.babelrc`)
 
 ```js
 module.exports = function(api) {
@@ -138,7 +138,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
 
 ---
 
-#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
+#### For React Native v0.56 or older
 
 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):
 
@@ -153,6 +153,8 @@ module.exports = {
 };
 ```
 
+#### Expo SDK v30.0.0 or older
+
 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`:
 
 ```json

docs/setup-less.md

@@ -85,7 +85,7 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
 
 #### For Expo
 
-`babel.config.js`
+`babel.config.js` (older Expo versions use `.babelrc`)
 
 ```js
 module.exports = function(api) {
@@ -138,7 +138,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
 
 ---
 
-#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
+#### For React Native v0.56 or older
 
 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):
 
@@ -153,6 +153,8 @@ module.exports = {
 };
 ```
 
+#### Expo SDK v30.0.0 or older
+
 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`:
 
 ```json

docs/setup-postcss.md

@@ -91,7 +91,7 @@ Add your PostCSS configuration to [one of the supported config formats](https://
 
 #### For Expo
 
-`babel.config.js`
+`babel.config.js` (older Expo versions use `.babelrc`)
 
 ```js
 module.exports = function(api) {
@@ -147,7 +147,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
 
 ---
 
-#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
+#### For React Native v0.56 or older
 
 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):
 
@@ -162,6 +162,8 @@ module.exports = {
 };
 ```
 
+#### Expo SDK v30.0.0 or older
+
 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`:
 
 ```json

docs/setup-responsive.md

@@ -41,10 +41,12 @@ react-native run-ios
 yarn add babel-plugin-react-native-classname-to-dynamic-style babel-plugin-react-native-platform-specific-extensions react-native-css-transformer --dev
 ```
 
-### Step 4: Setup your project's `.babelrc`
+### Step 4: Setup your project's Babel configuration
 
 #### For React Native v0.57 or newer
 
+`.babelrc`
+
 ```json
 {
  "presets": ["module:metro-react-native-babel-preset"],
@@ -64,6 +66,8 @@ yarn add babel-plugin-react-native-classname-to-dynamic-style babel-plugin-react
 
 #### For React Native v0.56 or older
 
+`.babelrc`
+
 ```json
 {
  "presets": ["react-native"],
@@ -79,9 +83,28 @@ yarn add babel-plugin-react-native-classname-to-dynamic-style babel-plugin-react
 }
 ```
 
+---
+
+#### For Expo
+
+`babel.config.js` (older Expo versions use `.babelrc`)
+
+```js
+module.exports = function(api) {
+ api.cache(true);
+ return {
+ presets: ["babel-preset-expo"],
+ plugins: [
+ "react-native-classname-to-dynamic-style",
+ ["react-native-platform-specific-extensions", { extensions: ["css"] }]
+ ]
+ };
+};
+```
+
 ### Step 5: Setup `rn-cli.config.js` in your project
 
-#### For React Native v0.57 or newer
+#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
 
 Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
 
@@ -103,11 +126,23 @@ module.exports = (async () => {
 })();
 ```
 
+If you are using [Expo](https://expo.io/), you also need to add this to `app.json`:
+
+```json
+{
+ "expo": {
+ "packagerOpts": {
+ "config": "rn-cli.config.js"
+ }
+ }
+}
+```
+
 ---
 
 #### For React Native v0.56 or older
 
-Add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):
+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):
 
 ```js
 module.exports = {
@@ -120,7 +155,9 @@ module.exports = {
 };
 ```
 
-...or if you are using [Expo](https://expo.io/), in `app.json`:
+#### Expo SDK v30.0.0 or older
+
+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`:
 
 ```json
 {

docs/setup-sass.md

@@ -85,7 +85,7 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
 
 #### For Expo
 
-`babel.config.js`
+`babel.config.js` (older Expo versions use `.babelrc`)
 
 ```js
 module.exports = function(api) {
@@ -141,7 +141,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
 
 ---
 
-#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
+#### For React Native v0.56 or older
 
 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):
 
@@ -156,6 +156,8 @@ module.exports = {
 };
 ```
 
+#### Expo SDK v30.0.0 or older
+
 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`:
 
 ```json

docs/setup-stylename.md

@@ -99,7 +99,7 @@ yarn add babel-plugin-react-native-stylename-to-style babel-plugin-react-native-
 
 #### For Expo
 
-`babel.config.js`
+`babel.config.js` (older Expo versions use `.babelrc`)
 
 ```js
 module.exports = function(api) {
@@ -162,7 +162,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
 
 ---
 
-#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
+#### For React Native v0.56 or older
 
 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):
 
@@ -177,6 +177,8 @@ module.exports = {
 };
 ```
 
+#### Expo SDK v30.0.0 or older
+
 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`:
 
 ```json

docs/setup-stylus.md

@@ -85,7 +85,7 @@ yarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-
 
 #### For Expo
 
-`babel.config.js`
+`babel.config.js` (older Expo versions use `.babelrc`)
 
 ```js
 module.exports = function(api) {
@@ -138,7 +138,7 @@ If you are using [Expo](https://expo.io/), you also need to add this to `app.jso
 
 ---
 
-#### For React Native v0.56 or older / Expo SDK v30.0.0 or older
+#### For React Native v0.56 or older
 
 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):
 
@@ -153,6 +153,8 @@ module.exports = {
 };
 ```
 
+#### Expo SDK v30.0.0 or older
+
 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`:
 
 ```json