fix(CLNP-1538): adjust lineHeight of iOS TextInput #148
Conversation
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## main #148 +/- ##
==========================================
- Coverage 13.00% 12.99% -0.02%
==========================================
Files 328 328
Lines 7252 7258 +6
Branches 2005 2007 +2
==========================================
Hits 943 943
- Misses 6239 6245 +6
Partials 70 70 ☔ View full report in Codecov by Sentry. |
bang9
force-pushed
the
fix/ios-input-valign
branch
from
e53e22d to
0f95666
Compare
| paddingVertical: 8, | ||
| paddingHorizontal: 16, |
There was a problem hiding this comment.
paddingVertical / paddingHorizontal is not working due to bug in React-Native
facebook/react-native#33564
| @@ -15,6 +15,10 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput( | |||
| const variantStyle = colors['ui']['input'][variant]; | |||
| const inputStyle = editable ? variantStyle.active : variantStyle.disabled; | |||
| const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight }; | |||
| const fontStyle = { | |||
| ...typography.body3, | |||
| lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined, | |||
There was a problem hiding this comment.
While vertical alignment is supported on Android, it is not supported on iOS.
For this reason, if the lineHeight is not adjusted proportionally based on fontSize in TextInput, there may be an issue with misalignment
| minHeight: 36, | ||
| // Android - padding area is hidden | ||
| // iOS - padding area is visible | ||
| maxHeight: Platform.select({ ios: 36 * 2 + 16, android: 36 * 2 }), |
There was a problem hiding this comment.
When padding is applied to the top/bottom of TextInput, on Android, the text may be obscured by the padding area, whereas on iOS, it remains visible.
This results in a discrepancy in the number of visible text lines on the UI (e.g., three lines displayed on Android versus only two on iOS).
To address this, add an additional offset equal to the padding vertical.
bang9
force-pushed
the
fix/ios-input-valign
branch
from
0f95666 to
a7da54d
Compare
| const fontStyle = useMemo(() => { | ||
| if (!typography.body3.fontSize) return typography.body3; | ||
| // NOTE: iOS does not support textAlignVertical, so we should adjust lineHeight to center the text in multiline TextInput. | ||
| return { ...typography.body3, lineHeight: typography.body3.fontSize * 1.275, textAlignVertical: 'center' }; |
There was a problem hiding this comment.
Generally, to obtain accurate height on iOS, a specific formula is required. However, since it's not executable in JavaScript, the magic number 1.2 is used(0.075 is offset for custom input height).
This number aligns reasonably well with the default system font.
However, if the customer employs a different font, the lineHeight must be adjusted.
For this case, a style prop has been added to ChannelInputProps.
bang9
force-pushed
the
fix/ios-input-valign
branch
from
a7da54d to
c9c253e
Compare
External Contributions
This project is not yet set up to accept pull requests from external contributors.
If you have a pull request that you believe should be accepted, please contact
the Developer Relations team [email protected] with details
and we'll evaluate if we can setup a CLA to allow for the contribution.
For Internal Contributors
CLNP-1538
Description Of Changes
AS-IS
iPhone14
iPhone11
iPhoneSE
TO-BE
iPhone14
iPhone11
iPhoneSE
Types Of Changes
What types of changes does your code introduce to this project?
Put an
xin the boxes that apply_