question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question/feature : control of textAlignVertical for TextInput (multiline)

See original GitHub issue

Hi, I’m currently working with react-native-paper for both classical TextInput and multiline TextInput. Currently i have a style problem : Capture d’écran 2020-01-13 à 13 29 21 Capture d’écran 2020-01-13 à 13 29 33

The distance between the label and the first line of TextInput value is different for multiline and !multiline TextInput. This is due to the property textAlignVertical which is set as “top” for !multiline fields and “center” for multiline. It is partially related to https://github.com/callstack/react-native-paper/pull/1020

Here is the code responsible of this behaviour : https://github.com/callstack/react-native-paper/blob/master/src/components/TextInput/TextInputFlat.tsx Line 267

textAlignVertical: multiline ? 'top' : 'center',

(and of course same for TextInputOutlined https://github.com/callstack/react-native-paper/blob/master/src/components/TextInput/TextInputOutlined.tsx

Is there a way to customize this style ? It seems there is not a lot of style going that far from style props to TextInput, they are intercepted by the line76 in TextInputFlat

    const {
      fontSize: fontSizeStyle,
      fontWeight,
      height,
      paddingHorizontal,
      ...viewStyle
    } = (StyleSheet.flatten(style) || {}) as TextStyle;

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
AwabIjazcommented, Jul 25, 2020
3reactions
MaxInMooncommented, Jan 16, 2020

Same problem here for me, I’ve already passed 1/2 day on it, with no way to make something clean. It would be great to have more control on style with optional style props.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to align text input correctly in react native? - Stack Overflow
I have found the solution that in Android, TextInput style textAlignVertical: 'top' works. but in ios, TextInput prop multiline={true} works.
Read more >
How to align text to the top multiline TextInput in React Native
Hi Guys, In this article, we are going to learn about How to align text to the top multiline TextInput in React Native....
Read more >
how to align text input correctly in react native? - splunktool
How to align text input correctly in react native? I have found the solution that in Android, TextInput style textAlignVertical: 'top' works.
Read more >
react-native-paper - السؤال / الميزة: التحكم في textAlignVertical لإدخال ...
تختلف المسافة بين التسمية والسطر الأول من قيمة TextInput في إدخال النص ... حقول متعددة الأسطر و "مركز" لـ multiline. ... textAlignVertical :...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found