Update tab navigator docs to use react-navigation-tabs

Author: satya164

docs/bottom-tab-navigator.md

@@ -6,12 +6,22 @@ sidebar_label: createBottomTabNavigator
 
 A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.
 
-> For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/en/tab-based-navigation.html)
+To use this navigator, you need to install [`react-navigation-tabs`](https://github.com/react-navigation/react-navigation-tabs) and its peer dependencies:
+
+```sh
+npm install react-navigation-tabs react-native-reanimated react-native-gesture-handler
+```
+
+To use this tab navigator, import it from `react-navigation-tabs`:
 
 ```js
-createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+
+createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);
 ```
 
+> For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/en/tab-based-navigation.html)
+
 ## RouteConfigs
 
 

docs/common-mistakes.md

@@ -114,10 +114,12 @@ In previous version of React Navigation, the library used to dig through your co
 ## Wrapping AppContainer in a View without flex
 
 If you wrap the `AppContainer` in a `View`, make sure the `View` is using flex.
+
 ```javascript
 import React from 'react';
 import { Text, View } from 'react-native';
-import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
+import { createAppContainer } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 
 class HomeScreen extends React.Component {
   render() {

docs/material-bottom-tab-navigator.md

@@ -8,9 +8,10 @@ A material-design themed tab bar on the bottom of the screen that lets you switc
 
 <img src="/docs/assets/navigators/bottom-navigation.gif" style="width: 420px; max-width: 100%">
 
-To use this navigator, you need to install `react-navigation-material-bottom-tabs`
+To use this navigator, you need to install [`react-navigation-material-bottom-tabs`](https://github.com/react-navigation/react-navigation-material-bottom-tabs):
 
-```
+
+```sh
 npm install react-navigation-material-bottom-tabs react-native-paper
 ```
 
@@ -27,7 +28,7 @@ createMaterialBottomTabNavigator(
 );
 ```
 
-This library uses the [`BottomNavigation` component from `react-native-paper`](https://callstack.github.io/react-native-paper/bottom-navigation.html). It doesn't include the whole `react-native-paper` library in your bundle, so you don't need to worry about it.
+This library uses the [`BottomNavigation` component from `react-native-paper`](https://callstack.github.io/react-native-paper/bottom-navigation.html). If you [configure the Babel plugin](https://callstack.github.io/react-native-paper/getting-started.html), it won't include the whole `react-native-paper` library in your bundle.
 
 ## RouteConfigs
 

docs/material-top-tab-navigator.md

@@ -6,7 +6,27 @@ sidebar_label: createMaterialTopTabNavigator
 
 A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the route or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.
 
+To use this navigator, you need to install [`react-navigation-tabs`](https://github.com/react-navigation/react-navigation-tabs):
+
+```sh
+npm install react-navigation-tabs
+```
+
+If you are not using Expo, you also need to install and link [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated). To install and link them, run:
+
+```sh
+npm install react-native-reanimated react-native-gesture-handler
+react-native link react-native-reanimated
+react-native link react-native-gesture-handler
+```
+
+**IMPORTANT:** There are additional steps required for `react-native-gesture-handler` on Android after running `react-native link react-native-gesture-handler`. Check the [this guide](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) to complete the installation.
+
+To use this tab navigator, import it from `react-navigation-tabs`:
+
 ```js
+import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
+
 createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);
 ```
 
@@ -24,9 +44,8 @@ The route configs object is a mapping from route name to a route config.
 * `backBehavior` - `initialRoute` to return to initial tab, `order` to return to previous tab, `history` to return to last visited tab, or `none`.
 * `tabBarPosition` - Position of the tab bar, can be `'top'` or `'bottom'`, default is `top`.
 * `swipeEnabled` - Whether to allow swiping between tabs.
-* `animationEnabled` - Whether to animate when changing tabs.
 * `lazy` - Defaults to `false`. If `true`, tabs are rendered only when they are made active or on peek swipe. When `false`, all tabs are rendered immediately.
-* `optimizationsEnabled` - Whether to wrap scenes into [`<ResourceSavingScene />`](https://github.com/react-navigation/react-navigation-tabs/blob/master/src/views/ResourceSavingScene.js) to move the scene out of the screen once it's unfocused, it improves memory usage.
+* `lazyPlaceholderComponent` - React component to render for routes that haven't been rendered yet. Receives an object containing the route as the argument. The `lazy` prop also needs to be enabled.
 * `initialLayout` - Optional object containing the initial `height` and `width`, can be passed to prevent the one frame delay in [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view#avoid-one-frame-delay) rendering.
 * `tabBarComponent` - Optional, override the component to use as the tab bar.
 * `tabBarOptions` - An object with the following properties:

docs/scrollables.md

@@ -7,10 +7,12 @@ sidebar_label: Scrollables
 React Navigation exports its own `ScrollView`, `FlatList`, and `SectionList`. The built-in components are wrapped in order to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.
 
 Example
+
 ```jsx harmony
 import React from 'react';
 import { Text, View } from 'react-native';
-import { createBottomTabNavigator, createAppContainer, FlatList } from 'react-navigation';
+import { createAppContainer, FlatList } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 
 const data = new Array(150).fill(0);
 

docs/tab-based-navigation.md

@@ -13,7 +13,8 @@ This guide covers [createBottomTabNavigator](bottom-tab-navigator.html). You may
 ```js
 import React from 'react';
 import { Text, View } from 'react-native';
-import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
+import { createAppContainer } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 
 class HomeScreen extends React.Component {
   render() {
@@ -53,7 +54,8 @@ This is similar to how you would customize a stack navigator — there are s
 // You can import Ionicons from @expo/vector-icons if you use Expo or
 // react-native-vector-icons/Ionicons otherwise.
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
+import { createAppContainer } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 
 export default createBottomTabNavigator(
   {
@@ -183,10 +185,10 @@ Usually tabs don't just display one screen — for example, on your Twitter
 
 ```js
 import {
-  createBottomTabNavigator,
   createStackNavigator,
   createAppContainer,
 } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 
 class DetailsScreen extends React.Component {
   render() {

docs/themes.md

@@ -171,9 +171,11 @@ Some navigators may have their styles configured in the navigator configuration
 import {
   createAppContainer,
   createStackNavigator,
+} from 'react-navigation';
+import {
   createBottomTabNavigator,
   BottomTabBar,
-} from 'react-navigation';
+} from 'react-navigation-tabs';
 
 const ThemeConstants = {
   light: {