Update tab navigator reference

Author: brentvatne

docs/tab-navigator.md

@@ -4,10 +4,10 @@ title: createTabNavigator
 sidebar_label: createTabNavigator
 ---
 
-> Note: `createTabNavigator` is deprecated. Please use `createBottomTabNavigator` and/or `createTopTabNavigator` instead.
+> Note: `createTabNavigator` is deprecated. Please use `createBottomTabNavigator` and/or `createMaterialTopTabNavigator` instead.
 
 ```js
-createTabNavigator(RouteConfigs, TabNavigatorConfig)
+createTabNavigator(RouteConfigs, TabNavigatorConfig);
 ```
 
 ## RouteConfigs
@@ -16,36 +16,34 @@ The route configs object is a mapping from route name to a route config, which t
 
 ## TabNavigatorConfig
 
-- `tabBarComponent` - Component to use as the tab bar, e.g. `TabBarBottom`
-(this is the default on iOS), `TabBarTop`
-(this is the default on Android).
-- `tabBarPosition` - Position of the tab bar, can be `'top'` or `'bottom'`.
-- `swipeEnabled` - Whether to allow swiping between tabs.
-- `animationEnabled` - Whether to animate when changing tabs.
-- `lazy` - Defaults to `true`. If `false`, all tabs are rendered immediately. When `true`, tabs are rendered only when they are made active.
-- `removeClippedSubviews` - Defaults to `true`. An optimization to reduce memory usage by freeing resources used by inactive tabs.
-- `configureTransition` - a function that, given `currentTransitionProps` and `nextTransitionProps`, returns a configuration object that describes the animation between tabs.
-- `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.
-- `tabBarOptions` - Configure the tab bar, see below.
+* `tabBarComponent` - Component to use as the tab bar, e.g. `TabBarBottom` (this is the default on iOS), `TabBarTop` (this is the default on Android).
+* `tabBarPosition` - Position of the tab bar, can be `'top'` or `'bottom'`.
+* `swipeEnabled` - Whether to allow swiping between tabs.
+* `animationEnabled` - Whether to animate when changing tabs.
+* `lazy` - Defaults to `true`. If `false`, all tabs are rendered immediately. When `true`, tabs are rendered only when they are made active.
+* `removeClippedSubviews` - Defaults to `true`. An optimization to reduce memory usage by freeing resources used by inactive tabs.
+* `configureTransition` - a function that, given `currentTransitionProps` and `nextTransitionProps`, returns a configuration object that describes the animation between tabs.
+* `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.
+* `tabBarOptions` - Configure the tab bar, see below.
 
 Several options get passed to the underlying router to modify navigation logic:
 
-- `initialRouteName` - The routeName for the initial tab route when first loading.
-- `order` - Array of routeNames which defines the order of the tabs.
-- `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
-- `backBehavior` - Should the back button cause a tab switch to the initial tab? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
+* `initialRouteName` - The routeName for the initial tab route when first loading.
+* `order` - Array of routeNames which defines the order of the tabs.
+* `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
+* `backBehavior` - Should the back button cause a tab switch to the initial tab? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
 
 ### `tabBarOptions` for `TabBarBottom` (default tab bar on iOS)
 
-- `activeTintColor` - Label and icon color of the active tab.
-- `activeBackgroundColor` - Background color of the active tab.
-- `inactiveTintColor` - Label and icon color of the inactive tab.
-- `inactiveBackgroundColor` - Background color of the inactive tab.
-- `showLabel` - Whether to show label for tab, default is true.
-- `style` - Style object for the tab bar.
-- `labelStyle` - Style object for the tab label.
-- `tabStyle` - Style object for the tab.
-- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
+* `activeTintColor` - Label and icon color of the active tab.
+* `activeBackgroundColor` - Background color of the active tab.
+* `inactiveTintColor` - Label and icon color of the inactive tab.
+* `inactiveBackgroundColor` - Background color of the inactive tab.
+* `showLabel` - Whether to show label for tab, default is true.
+* `style` - Style object for the tab bar.
+* `labelStyle` - Style object for the tab label.
+* `tabStyle` - Style object for the tab.
+* `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
 
 Example:
 
@@ -63,20 +61,20 @@ tabBarOptions: {
 
 ### `tabBarOptions` for `TabBarTop` (default tab bar on Android)
 
-- `activeTintColor` - Label and icon color of the active tab.
-- `inactiveTintColor` - Label and icon color of the inactive tab.
-- `showIcon` - Whether to show icon for tab, default is false.
-- `showLabel` - Whether to show label for tab, default is true.
-- `upperCaseLabel` - Whether to make label uppercase, default is true.
-- `pressColor` - Color for material ripple (Android >= 5.0 only).
-- `pressOpacity` - Opacity for pressed tab (iOS and Android < 5.0 only).
-- `scrollEnabled` - Whether to enable scrollable tabs.
-- `tabStyle` - Style object for the tab.
-- `indicatorStyle` - Style object for the tab indicator (line at the bottom of the tab).
-- `labelStyle` - Style object for the tab label.
-- `iconStyle` - Style object for the tab icon.
-- `style` - Style object for the tab bar.
-- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
+* `activeTintColor` - Label and icon color of the active tab.
+* `inactiveTintColor` - Label and icon color of the inactive tab.
+* `showIcon` - Whether to show icon for tab, default is false.
+* `showLabel` - Whether to show label for tab, default is true.
+* `upperCaseLabel` - Whether to make label uppercase, default is true.
+* `pressColor` - Color for material ripple (Android >= 5.0 only).
+* `pressOpacity` - Opacity for pressed tab (iOS and Android < 5.0 only).
+* `scrollEnabled` - Whether to enable scrollable tabs.
+* `tabStyle` - Style object for the tab.
+* `indicatorStyle` - Style object for the tab indicator (line at the bottom of the tab).
+* `labelStyle` - Style object for the tab label.
+* `iconStyle` - Style object for the tab icon.
+* `style` - Style object for the tab bar.
+* `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
 
 Example:
 
@@ -86,7 +84,7 @@ tabBarOptions: {
     fontSize: 12,
   },
   tabStyle: {
-    width: 100,    
+    width: 100,
   },
   style: {
     backgroundColor: 'blue',
@@ -130,15 +128,15 @@ Useful for adding a custom logic before the transition to the next scene (the ta
 
 The navigator component created by `createTabNavigator(...)` takes the following props:
 
-- `screenProps` - Pass down extra options to child screens and navigation options, for example:
+* `screenProps` - Pass down extra options to child screens and navigation options, for example:
 
 
- ```js
- const TabNavigator = createTabNavigator({
-   // config
- });
+```js
+const TabNavigator = createTabNavigator({
+  // config
+});
 
- <TabNavigator
-   screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
- />
- ```
+<TabNavigator
+  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
+/>
+```