From b3be9f9c675b71003c53abf2a0cf4597d0497c2f Mon Sep 17 00:00:00 2001 From: Ryan Gilbert Date: Fri, 21 Dec 2018 15:13:19 -0500 Subject: [PATCH 1/5] Update tab-navigator.md Clarify `lazy` renders tabs upon first visit only --- docs/tab-navigator.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tab-navigator.md b/docs/tab-navigator.md index 98cb13f13de..de7a7afc754 100644 --- a/docs/tab-navigator.md +++ b/docs/tab-navigator.md @@ -20,7 +20,7 @@ The route configs object is a mapping from route name to a route config, which t * `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. +* `lazy` - Defaults to `true`. If `false`, all tabs are rendered immediately. When `true`, tabs are rendered only when they are made active for the first time. Note: tabs are **not** re-rendered upon subsequent visits. * `removeClippedSubviews` - Defaults to `true`. An optimization to reduce memory usage by freeing resources used by inactive 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. From 1505665123d2335848bee1b19e469d1f8c352621 Mon Sep 17 00:00:00 2001 From: Ryan Gilbert Date: Fri, 21 Dec 2018 15:57:01 -0500 Subject: [PATCH 2/5] Update bottom-tab-navigator.md --- docs/bottom-tab-navigator.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/bottom-tab-navigator.md b/docs/bottom-tab-navigator.md index 260abed697e..0d5ca1c8a7e 100644 --- a/docs/bottom-tab-navigator.md +++ b/docs/bottom-tab-navigator.md @@ -23,6 +23,7 @@ The route configs object is a mapping from route name to a route config, which t * `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. +* `lazy` - Defaults to `true`. If `false`, all tabs are rendered immediately. When `true`, tabs are rendered only when they are made active for the first time. Note: tabs are **not** re-rendered upon subsequent visits. * `tabBarComponent` - Optional, override component to use as the tab bar. * `tabBarOptions` - An object with the following properties: * `activeTintColor` - Label and icon color of the active tab. From 901af166232025c4e5f1098f3f6e42754ac62d26 Mon Sep 17 00:00:00 2001 From: Ryan Gilbert Date: Fri, 21 Dec 2018 16:24:32 -0500 Subject: [PATCH 3/5] Update bottom-tab-navigator.md --- website/versioned_docs/version-3.x/bottom-tab-navigator.md | 1 + 1 file changed, 1 insertion(+) diff --git a/website/versioned_docs/version-3.x/bottom-tab-navigator.md b/website/versioned_docs/version-3.x/bottom-tab-navigator.md index a9521a88168..c403b0ce6d8 100644 --- a/website/versioned_docs/version-3.x/bottom-tab-navigator.md +++ b/website/versioned_docs/version-3.x/bottom-tab-navigator.md @@ -24,6 +24,7 @@ The route configs object is a mapping from route name to a route config, which t * `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. +* `lazy` - Defaults to `true`. If `false`, all tabs are rendered immediately. When `true`, tabs are rendered only when they are made active for the first time. Note: tabs are **not** re-rendered upon subsequent visits. * `tabBarComponent` - Optional, override component to use as the tab bar. * `tabBarOptions` - An object with the following properties: * `activeTintColor` - Label and icon color of the active tab. From 0ae9b7fd18f5fa0d060737b479896d34f8d14ede Mon Sep 17 00:00:00 2001 From: Ryan Date: Fri, 21 Dec 2018 22:29:19 -0500 Subject: [PATCH 4/5] Add tab-navigator.md to versioned docs --- .../version-3.x/tab-navigator.md | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 website/versioned_docs/version-3.x/tab-navigator.md diff --git a/website/versioned_docs/version-3.x/tab-navigator.md b/website/versioned_docs/version-3.x/tab-navigator.md new file mode 100644 index 00000000000..b6f74f2d4d3 --- /dev/null +++ b/website/versioned_docs/version-3.x/tab-navigator.md @@ -0,0 +1,126 @@ +--- +id: version-3.x-tab-navigator +title: createTabNavigator +sidebar_label: createTabNavigator +original_id: tab-navigator +--- + +> Note: `createTabNavigator` is deprecated. Please use `createBottomTabNavigator` and/or `createMaterialTopTabNavigator` instead. + +```js +createTabNavigator(RouteConfigs, TabNavigatorConfig); +``` + +## RouteConfigs + +The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](stack-navigator.html#routeconfigs) from stack navigator. + +## 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 for the first time. Note: tabs are **not** re-rendered upon subsequent visits. +* `removeClippedSubviews` - Defaults to `true`. An optimization to reduce memory usage by freeing resources used by inactive 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. + +### `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. +* `safeAreaInset` - Override the `forceInset` prop for ``. Defaults to `{ bottom: 'always', top: 'never' }`. Available keys are `top | bottom | left | right` provided with the values `'always' | 'never'`. + +Example: + +```js +tabBarOptions: { + activeTintColor: '#e91e63', + labelStyle: { + fontSize: 12, + }, + style: { + backgroundColor: 'blue', + }, +} +``` + +### `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. + +Example: + +```js +tabBarOptions: { + labelStyle: { + fontSize: 12, + }, + tabStyle: { + width: 100, + }, + style: { + backgroundColor: 'blue', + }, +} +``` + +## `navigationOptions` for screens inside of the navigator + +#### `title` + +Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`. + +#### `tabBarVisible` + +True or false to show or hide the tab bar, if not set then defaults to true. + +#### `swipeEnabled` + +True or false to enable or disable swiping between tabs, if not set then defaults to TabNavigatorConfig option swipeEnabled. + +#### `tabBarIcon` + +React Element or a function that given `{ focused: boolean, horizontal: boolean, tintColor: string }` returns a React.Node, to display in the tab bar. `horizontal` is `true` when the device is in landscape and `false` when portrait. The icon is re-rendered whenever the device orientation changes. + +#### `tabBarLabel` + +Title string of a tab displayed in the tab bar or React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Node, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarOptions.showLabel` in the previous section. + +#### `tabBarOnPress` + +Callback to handle tap events; the argument is an object containing: + +* the `previousScene: { route, index }` which is the scene we are leaving +* the `scene: { route, index }` that was tapped +* the `jumpToIndex` method that can perform the navigation for you + +Useful for adding a custom logic before the transition to the next scene (the tapped one) starts. From 747190fddb894eee7f5bc90600c64ba4c6f06e3c Mon Sep 17 00:00:00 2001 From: Ryan Gilbert Date: Sat, 22 Dec 2018 21:54:23 -0500 Subject: [PATCH 5/5] Delete tab-navigator.md --- .../version-3.x/tab-navigator.md | 126 ------------------ 1 file changed, 126 deletions(-) delete mode 100644 website/versioned_docs/version-3.x/tab-navigator.md diff --git a/website/versioned_docs/version-3.x/tab-navigator.md b/website/versioned_docs/version-3.x/tab-navigator.md deleted file mode 100644 index b6f74f2d4d3..00000000000 --- a/website/versioned_docs/version-3.x/tab-navigator.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: version-3.x-tab-navigator -title: createTabNavigator -sidebar_label: createTabNavigator -original_id: tab-navigator ---- - -> Note: `createTabNavigator` is deprecated. Please use `createBottomTabNavigator` and/or `createMaterialTopTabNavigator` instead. - -```js -createTabNavigator(RouteConfigs, TabNavigatorConfig); -``` - -## RouteConfigs - -The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](stack-navigator.html#routeconfigs) from stack navigator. - -## 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 for the first time. Note: tabs are **not** re-rendered upon subsequent visits. -* `removeClippedSubviews` - Defaults to `true`. An optimization to reduce memory usage by freeing resources used by inactive 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. - -### `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. -* `safeAreaInset` - Override the `forceInset` prop for ``. Defaults to `{ bottom: 'always', top: 'never' }`. Available keys are `top | bottom | left | right` provided with the values `'always' | 'never'`. - -Example: - -```js -tabBarOptions: { - activeTintColor: '#e91e63', - labelStyle: { - fontSize: 12, - }, - style: { - backgroundColor: 'blue', - }, -} -``` - -### `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. - -Example: - -```js -tabBarOptions: { - labelStyle: { - fontSize: 12, - }, - tabStyle: { - width: 100, - }, - style: { - backgroundColor: 'blue', - }, -} -``` - -## `navigationOptions` for screens inside of the navigator - -#### `title` - -Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`. - -#### `tabBarVisible` - -True or false to show or hide the tab bar, if not set then defaults to true. - -#### `swipeEnabled` - -True or false to enable or disable swiping between tabs, if not set then defaults to TabNavigatorConfig option swipeEnabled. - -#### `tabBarIcon` - -React Element or a function that given `{ focused: boolean, horizontal: boolean, tintColor: string }` returns a React.Node, to display in the tab bar. `horizontal` is `true` when the device is in landscape and `false` when portrait. The icon is re-rendered whenever the device orientation changes. - -#### `tabBarLabel` - -Title string of a tab displayed in the tab bar or React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Node, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarOptions.showLabel` in the previous section. - -#### `tabBarOnPress` - -Callback to handle tap events; the argument is an object containing: - -* the `previousScene: { route, index }` which is the scene we are leaving -* the `scene: { route, index }` that was tapped -* the `jumpToIndex` method that can perform the navigation for you - -Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.