textAlignVertical is not working in Input

[mamkkl]

Describe the bug
I want to make a multiple-line text input with placeholder at the top of the input area. However, textAlignVertical is not able to use since styles of the TextInput can't be override

To Reproduce
<Input multiline style={{textAlignVertical:'top', height: 200}} />

Expected behavior
The placeholder displays at the top of the input area

Current behavior

Additional context
I can fix the issue by adding a new overrideInputStyles property of Input, however, it seems the framework is not expecting to override the style of the TextInput.

[palingheorghe]

Hi @mamkkl ! Yes you're right, this should pe fixed. There is a prop for overriding the container's style called inputViewStyle so the new prop name should be something similar.

[mamkkl]

Hi @mamkkl ! Yes you're right, this should pe fixed. There is a prop for overriding the container's style called inputViewStyle so the new prop name should be something similar.

I can help on this, need a hand :)?

[mamkkl]

Hi @mamkkl ! Yes you're right, this should pe fixed. There is a prop for overriding the container's style called inputViewStyle so the new prop name should be something similar.

I found that we can use styles.* for the style overriding but in withGalio the styles in props were not actually being used. Merging the styles in props into styles which will be passed to the component can fix the issue.

styles={{...(styles ? styles({ ...GalioTheme, ...theme }) : {}), ...props.styles}}

[mamkkl]

Hi @mamkkl ! Yes you're right, this should pe fixed. There is a prop for overriding the container's style called inputViewStyle so the new prop name should be something similar.

I found that we can use styles.* for the style overriding but in withGalio the styles in props were not actually being used. Merging the styles in props into styles which will be passed to the component can fix the issue.

styles={{...(styles ? styles({ ...GalioTheme, ...theme }) : {}), ...props.styles}}

add array check can make the styles input even nicer
styles={{...(styles ? styles({ ...GalioTheme, ...theme }) : {}), ...(Array.isArray(props.styles) ? props.styles.reduce((a,c) => ({...a, ...c})) : props.styles)}}

[palingheorghe]

You could always give us a hand! Write a PR for this issue with detailed explanation because I think this could really level up our library.

Thanks!

[AndyOsei]

@palingheorghe I looked into this issue and realized that what is causing the placeholder to be centered is styles.inputContainer inputContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }been applied to inputViewStyle. Hence overriding them by passing { justifyContent: "flex-start", alignItems: "flex-start" } should fix the issue.

Also I would open a PR to introduce a prop named textInputStyle on Input which allows TextInput styles to be overridden...

[palingheorghe]

Closed because we've merged the PR into the dev branch. Thank you!