docs: update the guides for latest React Native

Author: satya164

docs/pages/2.getting-started.md

@@ -19,56 +19,53 @@ react-native link react-native-vector-icons
 
 If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.
 
-If you use CRNA or Expo, you don't need to install vector icons. But you will need to make sure that your `.babelrc` includes `babel-preset-expo`:
+If you use Expo, you don't need to install vector icons. But if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
 
-```json
-{
-  "presets": ["babel-preset-expo"]
-}
-```
-
-To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `.babelrc` for production environment. It should look like this:
+To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `babel.config.js` for production environment. It should look like this:
 
-```json
-{
-  "presets": ["babel-preset-react-native"],
-  "env": {
-    "production": {
-      "plugins": ["react-native-paper/babel"]
-    }
-  }
-}
+```js
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  env: {
+    production: {
+      plugins: ['react-native-paper/babel'],
+    },
+  },
+};
 ```
 
-If you created your project using CRNA or Expo, it'll look something like this:
+If you created your project using Expo, it'll look something like this:
 
-```json
-{
-  "presets": ["babel-preset-expo"],
-  "env": {
-    "development": {
-      "plugins": ["transform-react-jsx-source"]
+```js
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    env: {
+      production: {
+        plugins: ['react-native-paper/babel'],
+      },
     },
-    "production": {
-      "plugins": ["react-native-paper/babel"]
-    }
-  }
-}
+  };
+};
 ```
 
-**Note:** The plugin only works if you are importing the library using ES2015 import statements and not with `require`.
+The plugin only works if you are importing the library using ES2015 import statements and not with `require`.
+
+**Note:** The above examples are for the latest `react-native` using Babel 7. If you have `react-native <= 0.55`, you'll have a `.babelrc` file instead of a `babel.config.js` file and the content of the file will be different.
 
 If you're using Flow for typechecking your code, you need to add the following under the `[options]` section in your `.flowconfig`:
 
 ```ini
 module.file_ext=.js
+module.file_ext=.native.js
 module.file_ext=.android.js
 module.file_ext=.ios.js
 ```
 
 ## Usage
 
-Wrap your root component in `Provider` from `react-native-paper`. If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have a CRNA or Expo project, you can do this inside the exported component in the `App.js` file.
+Wrap your root component in `Provider` from `react-native-paper`. If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have an Expo project, you can do this inside the exported component in the `App.js` file.
 
 Example:
 

docs/pages/4.icons.md

@@ -4,7 +4,7 @@ title: Icons
 
 ## Configuring icons
 
-Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using CRNA or Expo, you don't need to do anything extra, but if it's vanilla React Native project, you need link the library as described in the getting started guide.
+Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's vanilla React Native project, you need link the library as described in the getting started guide.
 
 If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop anymore. Some components may not look correct without vector icons and might need extra configuration.