Searchbar component ignores numberoflines prop on iOS

[alesdvorakcz]

Current behaviour

When setting numberoflines={1} to Searchbar component, it still shows multiple lines on ios.

Expected behaviour

Only one line is visible

Code sample

https://snack.expo.io/mM73lZ7cL

Screenshots (if applicable)

Your Environment

on snack:
expo: 39.0.0

and locally:
react-native-paper: 4.1.0
react-native: 0.63.2
ios 14.2

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• expo (found: 39.0.0, latest: 39.0.5)
• react-native-paper (found: 4.1.0, latest: 4.4.1)
• react-native (found: 0.63.2, latest: 0.63.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[jaworek]

Props are case sensitive and I see that you provided in your example numberoflines, instead of numberOfLines

It is only supported on Android:
https://reactnative.dev/docs/textinput#numberoflines

I'll let you know when I find solution for iOS.

[jaworek]

For iOS you can specify inputStyle with height. E.g. inputStyle={{height: 40, alignSelf: "center"}}

Here's an example:
https://snack.expo.io/HOZiyJZyX

[alesdvorakcz]

I did the mistake with sensitivity in snack only, but it does not work even with correct name.

Thank you for this workaround and for info its currently not supported. I usually set this to component so I didn't realize its different here.

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[IKTANIM]

For iOS inputStyle={{textAlign: "auto"}} fixed my issue

[LVExMachina]

In the current version of react-native-paper, none of these solutions work. Any suggestions to fix it?

[Saly-X]

In the current version of react-native-paper, none of these solutions work. Any suggestions to fix it?

I've tested and played with the code of the Searchbar and TextInput in react-native-paper. The main affecting aspects are these styles of the TextInput inside the Searchbar: lineHeight in font and textAlign: I18nManager.getConstants().isRTL ? 'right' : 'left' in input style. Also, for TextInput with a label, we have only one line as expected.

I know, it's not a fix, this is a workaround hack, because we are resetting the library styles, but adding these lines to inputStyle helped for me:

textAlign: undefined,
lineHeight: undefined,

Also you can add these props just in case:

numberOfLines={1}
multiline={false}