Skip to content

Commit 5700111

Browse files
committed
Update upgrade guide for tab view
1 parent 92ebfe5 commit 5700111

File tree

1 file changed

+28
-9
lines changed

1 file changed

+28
-9
lines changed

versioned_docs/version-7.x/upgrading-from-6.x.md

+28-9
Original file line numberDiff line numberDiff line change
@@ -494,17 +494,36 @@ Previously, the UI elements in React Navigation such as the header on platforms
494494

495495
#### React Native Tab View now has a new API to specify various options
496496

497-
The API for the `TabView` and `TabBar` component in `react-native-tab-view` has been revamped. Previously, the `TabBar` took the following props:
497+
The API for the `TabView` and `TabBar` component in `react-native-tab-view` has been revamped.
498498

499-
- `getLabelText`
500-
- `getAccessible`
501-
- `getAccessibilityLabel`
502-
- `getTestID`
503-
- `renderIcon`
504-
- `renderLabel`
505-
- `renderBadge`
499+
Some of props accepted by the `TabBar` have now been replaced with `commonOptions` and `options` props on `TabView`:
506500

507-
These props have been replaced with `commonOptions` and `options` props on `TabView`:
501+
- `getLabelText` -> `labelText`
502+
- `getAccessible` -> `accessible`
503+
- `getAccessibilityLabel` -> `accessibilityLabel`
504+
- `getTestID` -> `testID`
505+
- `renderIcon` -> `icon`
506+
- `renderLabel` -> `label`
507+
- `renderBadge` -> `badge`
508+
- `labelStyle`
509+
- `sceneContainerStyle` -> `sceneStyle`
510+
511+
To keep the same behavior when updating your existing code, move these props to `commonOptions` prop on `TabView`:
512+
513+
```diff lang=js
514+
<TabView
515+
renderTabBar={(props) => (
516+
- <TabBar {...props} renderLabel={renderLabel} labelStyle={labelStyle} />
517+
+ <TabBar {...props} />
518+
)}
519+
+ commonOptions={{
520+
+ label: renderLabel,
521+
+ labelStyle,
522+
+ }}
523+
/>
524+
```
525+
526+
The options can also be customized individually for each tab by passing an object to the `options` prop with the `route.key` as the key and the options as the value:
508527

509528
```js
510529
<TabView

0 commit comments

Comments
 (0)