callstack / callstack/react-native-paper

Allow Drawer.Item to wrap across multiple lines

Open
#4,423 0 comments 0 reactions 0 assignees View on GitHub
feature request
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

Our application supports multiple languages and the Drawer.Item currently always truncates with an ellipsis rather than allowing wrapping across multiple lines. The Drawer.Item component is hard-coded to only allow one line of text. This results in our menu items always being cut off when long translated text is used if there is insufficient width.

It would be great if the `numberOfLines` property on the text element of the Drawer.Item was a property so that constraint could be overwritten.

I have tried using patch-package and confirmed it works in debug mode, but the pre-compiled version with numberOfLines set to 1 is always used in release builds. Adjusting the width of the side navigation isn't an optimal solution as languages like Russian are often overly verbose and would still be cut off.

![image](https://github.com/callstack/react-native-paper/assets/58454516/92d926bc-43c8-427b-a69d-2f98f8573b50)

Contributor guide

Open the contributing guide

Research direction

Start at the Drawer.Item component and inspect the text element where numberOfLines is fixed to 1. Confirm how the property is exposed and verify that translated labels can wrap across multiple lines in release builds; done means the existing truncation constraint can be overridden without breaking the default behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.