Skip to content
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

Replace removed labelVisible with displayMode. #1384

Merged
merged 4 commits into from
Nov 15, 2024
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
10 changes: 8 additions & 2 deletions versioned_docs/version-7.x/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,10 @@ It receives an object containing following properties:
- `tintColor`: The color of the icon and label.
- `pressColor`: The color of the material ripple (Android >= 5.0 only).
- `pressOpacity`: The opacity of the button when it's pressed (Android < 5.0, and iOS).
- `labelVisible`: Whether the label text is visible. Defaults to `true` on iOS and `false` on Android.
- `displayMode`: How the element displays icon and title. Defaults to `default` on iOS and `minimal` on Android. Possible values:
- `default`: Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon).
- `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon). iOS >= 14 only, falls back to "default" on older iOS versions.
- `minimal`: Always displays only the icon without a title.
- `href`: The URL to open when the button is pressed on the Web.

You can use it to implement your custom left button, for example:
Expand Down Expand Up @@ -637,7 +640,10 @@ A component used to show the back button header. It's the default for [`headerLe
- `tintColor` - Tint color for the header.
- `label` - Label text for the button. Usually the title of the previous screen. By default, this is only shown on iOS.
- `truncatedLabel` - Label text to show when there isn't enough space for the full label.
- `labelVisible` - Whether the label text is visible. Defaults to `true` on iOS and `false` on Android.
- `displayMode`: How the back button displays icon and title. Defaults to `default` on iOS and `minimal` on Android. Possible values:
- `default`: Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon).
- `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon). iOS >= 14 only, falls back to "default" on older iOS versions.
- `minimal`: Always displays only the icon without a title.
- `labelStyle` - Style object for the label.
- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings.
- `onLabelLayout` - Callback to trigger when the size of the label changes.
Expand Down
21 changes: 21 additions & 0 deletions versioned_docs/version-7.x/upgrading-from-6.x.md
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,27 @@ If you're using Drawer Navigator on the Web, it'll now use CSS transitions inste

See [Drawer Navigator](drawer-navigator.md) for usage.

### Changes to elements

#### `labelVisible` is removed in favor of `displayMode` in `headerLeft` and `HeaderBackButton` elements

Previously, `labelVisible` could be used to control whether the back button title is shown in the header. It's now removed in favor of `displayMode` which provides more flexibility.

The new possible values are:

- `default`: Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon).
- `generic`: Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon). iOS >= 14 only, falls back to "default" on older iOS versions.
- `minimal`: Always displays only the icon without a title.

The previous behavior can be achieved by setting `displayMode` to `default` or `generic` for showing and `minimal` for hiding the back button title respectively:

```diff lang=js
<HeaderBackButton
- labelVisible={false}
+ displayMode="minimal"
/>
```

### Deprecations and removals

#### Material Bottom Tab Navigator now lives in `react-native-paper` package
Expand Down
Loading