TextInput Alignment does not work on iOS 11

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 7.7.2 Yarn: Not Found npm: 5.4.2 Watchman: 4.7.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: Not Found

Packages: (wanted => installed) react-native: 0.49.3 => 0.49.3 react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Steps to Reproduce

1. Create a TextInput and few buttons. Set the alignment dynamically as you press buttons using textAlign.

<View style ={{marginTop: 42}}>
            <Button
            onPress={ this.setStateLeft }
            title="Left"
            color="#841584"
            />
            <Button
            onPress={ this.setStateCenter }
            title="Center"
            color="#841584"
            />
            <Button
            onPress={ this.setStateRight }
            title="Right"
            color="#841584"
            />
            <TextInput
                style={{height: 40, borderColor: 'gray', borderWidth: 1, marginTop: 112, textAlign: this.state.alignText}}
                onChangeText={(text) => this.setState({text})}
                value={this.state.text}
            />
</View>

1. Press the buttons

Expected Behavior

The alignment should work on iOS devices, irrespective of versions.

Actual Behavior

The alignment works as expected on iOS 10, but not on iOS 11 as seen below. The simulator on the left is iOS 11 and on right is iOS 10.

Reproducible Demo

https://snack.expo.io/rkX3DXphb

[fmanns]

This appears to be an IOS 11 bug. I was able to reproduce it in a simple standalone app.

class ViewController: UIViewController {

    @IBOutlet weak var alignmentSelector: UISegmentedControl!
    @IBOutlet weak var alignedTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        alignmentSelector.addTarget(self, action: #selector(alignmentSelected), for: .valueChanged)
    }
    
    @objc func alignmentSelected() {
        switch alignmentSelector.selectedSegmentIndex {
        case 0:
            alignedTextField.textAlignment = .left
        case 1:
            alignedTextField.textAlignment = .center
        default:
            alignedTextField.textAlignment = .right
        }
    }
    
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.