[iOS] Long text in `<Searcbar/>` wraps on a new line and breaks layout

[fabriziocucci]

Current behaviour

Long text in a <Searchbar/> wraps on a new line and breaks the vertical alignment (see text wrt the icons).

Expected behaviour

Ideally, the long text in the <Searchbar/> should stay on the same line and show ellipses by default. Optionally, there could be an easy way to change the behaviour.

How to reproduce?

See expo snack.

Preview

See <Searchbar/> current behaviour on the top and plain <TextInput/> from react-native on the bottom.

What have you tried so far?

Tried to use the inputStyle prop of the <Searchbar/> component without too much success.

Your Environment

software	version
ios	x
android	x
react-native	0.74.5
react-native-paper	5.12.5
node	x.x.x
npm or yarn	x.x.x
expo sdk	x.x.x

[tibbe]

Android also breaks layout for long strings, but in a different way: the search bar becomes taller:

[tibbe]

The Android issue can be fixed by setting style={{height: 56}}. Looking at the implementation of the component I can't see the height being set anywhere, which seems wrong. The TextInput has minHeight: 56 set but that's a minimum, not a maximum.

Adding

lineBreakModeIOS="tail"
lineBreakStrategyIOS="push-out"

fixes the iOS issue. We actually set that on all our react-native-paper TextInputs as they all suffer from incorrect linebreaking on iOS.