Skip to content

Updated tab navigator docs #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 5, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions docs/bottom-tab-navigator.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,9 @@ ID to locate this tab button in tests.

#### `tabBarOnPress`

Callback to handle tap events; the argument is an object containing:
Callback to handle press 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
* `navigation`: navigation prop for the screen
* `defaultHandler`: the default handler for tab press

Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.
7 changes: 3 additions & 4 deletions docs/material-bottom-tab-navigator.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,9 @@ ID to locate this tab button in tests.

#### `tabBarOnPress`

Callback to handle tap events; the argument is an object containing:
Callback to handle press 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
* `navigation`: navigation prop for the screen
* `defaultHandler`: the default handler for tab press

Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.
8 changes: 3 additions & 5 deletions docs/material-top-tab-navigator.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ The route configs object is a mapping from route name to a route config.
* `backBehavior` - Should the back button cause a tab switch to the initial tab? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
* `swipeEnabled` - Whether to allow swiping between tabs.
* `animationEnabled` - Whether to animate when changing 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.
* `tabBarComponent` - Optional, override the component to use as the tab bar.
* `tabBarOptions` - An object with the following properties:
Expand Down Expand Up @@ -85,10 +84,9 @@ ID to locate this tab button in tests.

#### `tabBarOnPress`

Callback to handle tap events; the argument is an object containing:
Callback to handle press 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
* `navigation`: navigation prop for the screen
* `defaultHandler`: the default handler for tab press

Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.
5 changes: 2 additions & 3 deletions docs/tab-based-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,9 @@ export default createBottomTabNavigator(

Let's dissect this:

* `tabBarIcon` is a property on `navigationOptions`, so we know we can use it on our screen components, but in this case chose to put it in the `TabNavigator` configuration in order to centralize the icon configuration for convenience.
* `tabBarIcon` is a property on `navigationOptions`, so we know we can use it on our screen components, but in this case chose to put it in the `createBottomTabNavigator` configuration in order to centralize the icon configuration for convenience.
* `tabBarIcon` is a function that is given the `focused` state and `tintColor`. If you take a peek further down in the configuration you will see `tabBarOptions` and `activeTintColor` and `inactiveTintColor`. These default to the the iOS platform defaults, but you can change them here. The `tintColor` that is passed through to the `tabBarIcon` is either the active or inactive one, depending on the `focused` state (focused is active).
* In order to make the behavior the same on iOS and Android, we have explicitly provided `tabBarComponent`, `tabBarPosition`, `animationEnabled`, and `swipeEnabled`. The default behavior of `TabNavigator` is to show a tab bar on the top of the screen on Android and on the bottom on iOS, but here we force it to be on the bottom on both platforms.
* Read the [full API reference](bottom-tab-navigator.html) for further information on `TabNavigator` configuration options.
* Read the [full API reference](bottom-tab-navigator.html) for further information on `createBottomTabNavigator` configuration options.

## Jumping between tabs

Expand Down