Skip to content

TextInput Alignment does not work on iOS 11 #16341

Closed
@n-kumari

Description

@n-kumari

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.

align_demo

Reproducible Demo

https://snack.expo.io/rkX3DXphb

Metadata

Metadata

Assignees

No one assigned

    Labels

    StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions