textAlign does not work for components wrapped in a View inside Text

Description

textAlign style prop does not work when the components nested in a Text are wrapped in a View.

This happens only on iOS and looks like it broke in 0.54.2 version.

Environment

OS: macOS Sierra 10.12.6 Node: 8.9.1 Yarn: 1.3.2 npm: 5.6.0 Watchman: 4.7.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: Not Found

Packages: (wanted => installed) react: ^16.3.0-alpha.1 => 16.3.0-alpha.2 react-native: 0.54.2 => 0.54.2

Steps to Reproduce

[Could not use snack to reproduce this issue since it happens only on React Native 0.54.2]

Use following code in your render function

  render() {
    if (Platform.OS === 'ios') {
      return (
        <Text style={{textAlign: 'right'}}>
          <View style={{paddingTop: 50}}>
            <Text>
            {'I should be aligned right'}
            </Text>
          </View>
          </Text>
      );
    }
      return (
        <Text style={{textAlign: 'right'}}>
          <Text>
          {'I should be aligned right'}
          </Text>
        </Text>
      );
  }

Note: View is not supported inside Text on Android. Hence, this code does a platform check and does not nest View inside Text on Android. The issue is seen only when View is nested inside Text i.e., only on iOS.

Expected Behavior

The text should be aligned to the right

Actual Behavior

For iOS, in React Native 0.54.2, the text is aligned to the left.

Android (RN 0.54.2) ✅	iOS (RN 0.54.2) ❌

As seen from screenshots below, it works correctly in React Native 0.53.3

Android (RN 0.53.3) ✅	iOS (RN 0.53.3) ✅

[steveccable]

It doesn’t have to be an empty space. It appears that if the first child node of a Text which has textAlign set is a String or Text, then it respects the alignment, and if it is instead a View or Image, it doesn’t.

I’m not super familiar with the iOS flow for this (or Objective C/Swift in general), but this makes it seem like there may be some sort of inspection going on in the child nodes that is causing this bug. Just a hunch based on the behavior.

Note that because this happens not just with Views but also Images (which are allowed on both platforms, do not display the broken behavior on Android, and will continue to be supported inside of text even after https://github.com/facebook/react-native/commit/6a1b41643a5f5035c61a96263220d11d3462e8f2 ) that this is still a problem going forward.

[stale[bot]]

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.