react-navigation / react-navigation/react-navigation
Unable to wrap labels for Drawer Items
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
Reusing example on Snack that's provided on React Navigation documentation: https://snack.expo.dev/tb2q5enN9
Only thing changed is I added an extra drawer item with a very long text as its label.
I've tried multiple ways to 'wrap' the label so that it would have multiline but to no avail. The only solution that has worked for me although not the one I was looking for is to set the labelStyle: {{ fontSize: 10 }} which lowers the font size and makes the label fit into the drawer, but this isn't particularly the solution I'm looking for.
Is there any way to make the label wrap itself?
Expected behavior
Label will wrap itself into multilines when the label itself exceeds the width of the drawer container
Reproduction
https://snack.expo.dev/tb2q5enN9
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
| package | version |
|---|---|
| @react-navigation/native | 6.0.2 |
| @react-navigation/bottom-tabs | 6.0.4 |
| @react-navigation/drawer | 6.1.3 |
| @react-navigation/material-bottom-tabs | 6.0.4 |
| @react-navigation/material-top-tabs | 6.0.2 |
| @react-navigation/stack | 6.0.6 |
| @react-navigation/native-stack | 6.0.5 |
| react-native-safe-area-context | 3.2.0 |
| react-native-screens | ~3.4.0 |
| react-native-gesture-handler | ~1.10.2 |
| react-native-reanimated | ~2.2.0 |
| react-native-tab-view | ^3.0.0 |
| react-native-pager-view | 5.0.12 |
| react-native | 0.64.2 |
| expo | ^42.0.4 |
| node | |
| npm or yarn | 6.4.15 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the long-label case in the linked Expo Snack on Android and compare it with the drawer package's existing labelStyle behavior. Done means the long drawer label wraps to multiple lines within the drawer without requiring a smaller font; the issue supplies no repository file or test to target.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100