[Android] textAlignVertical doesn't work on nested text

[megantracy93]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

textAlignVertical works fine when set on the top-most Text component. However, if you have any nested texts (a common use case), you can not override the alignVertical in the child Text component.

Environment

OS: macOS Sierra 10.12.6
Node: 9.3.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3.3

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.55.0 => 0.55.0

Steps to Reproduce

1. Use this expo app OR create a nested Text component with the same height as its parent & give it a textAlignVertical

Expected Behavior

The child Text's textAlignVertical should be honored.

Actual Behavior

The child Text's textAlignVertical is NOT honored. See screenshots below for two different cases:

textAlignVertical on parent Text	textAlignVertical on child Text

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[n-kumari]

This issue still exists in React Native 0.55.2

[soyanakagawa]

Version 0.56.0

Parent Component have high priority than Nested Text.
So Child component's Text style props is ignored.

I think it should reverse. Child component should have more high priority than parent.

[hoda-oz]

@megantracy93
Even if Text components are nested in other Text components,
they are merged into a single TextView of Android
So you cannot manipulate text position in nested Text components.

In this case, you can manipulate vertical position by lineHeight property.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[burkeshartsis]

Still a meaningful issue. Please fix 😘

[megantracy93]

@hoda-oz lineHeight is not the correct property for my use case as I have a multi-line string that should be center-aligned. Using lineHeight on a multi-line string results in each line having that height, rather than the combination of all the lines.

[thekevinbrown]

A coping strategy for anyone that finds this is wrapping the <Text> with another <View>, e.g.

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Whatever here</Text>
</View>

In this case even multiline text is correctly centred in the view. It'd certainly be easier if textAlignVertical worked, but this might help you in the meantime.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.