Padding and alignment on compose field for iOS looks misaligned

[kadiealexander]

Platform - version:
iOS 14
iPhone X

Action Performed (reproducible steps):
Open expensify.cash and login. Observe the Compose box. The text inside of the compose box is misaligned. It is not vertically centered.

Expected Result:
I would expect the text to be vertically aligned within the compose area. See below, it is sitting too low in the box.

Actual Result:

Notes/Photos/Videos:

Logs - JS/Android/iOS (if applicable):

[kadiealexander]

Upwork listing: https://www.upwork.com/jobs/~01c80596a92bad7845

[aliabbasmalik8]

Please remove alignSelf: 'center', from this style object textInputCompose that located in src/styles/styles.js it's on line # 661 in the below

Latest screen after fix this

[shawnborton]

@aliabbasmalik8 can you confirm that your proposed change will not break other platforms as well?

[aliabbasmalik8]

Here is an updated solution that tested on web app as well as mobile devices
We need to import
import { Platform } from 'react-native'; at the top of src/styles/styles
and add this code in textInputCompose style Object
...Platform.select({ web: { alignSelf: 'center', } }),
Actually, we need this property only for web alignSelf: 'center'

https://reactnative.dev/docs/platform-specific-code

[shawnborton]

@marcaaron curious for your thoughts on the above... I know we try to avoid platform-specific instances like the above proposal, but I'm not sure how else to solve for this one.

[marcaaron]

Yes, well there is nothing wrong with having a platform specific implementation. It just needs to follow the guidance here as we have decided to avoid using Platform in the code. Instead we'd add something like this:

.
└── textInputAlignSelf/
    ├── index.js
    └── index.native.js

[aliabbasmalik8]

Got it. so updated solution according to guidance is here
Added textInputAlignSelf utility like this

and import at top
import textInputAlignSelf from './utilities/textInputAlignSelf';
and updated textInputCompose style object like this

[marcaaron]

yep, you got it

[aliabbasmalik8]

@kadiealexander can I do this Ticket?

[kadiealexander]

@aliabbasmalik8 Hey! Thanks for sharing this fix. My colleague wanted to confirm if this will also fix the issue for Android, as we discovered the issue exists here too. Thanks in advance!

[aliabbasmalik8]

@kadiealexander I tested it on all platforms and it's working well and also attached a screenshot for the android platform.
Please let me know the device name if you still face this issue
Thanks