Text cut-off on iPhone X

[nicemanis]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.5.0
Yarn: Not Found
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Target Platform: iOS (10.3)

Steps to Reproduce

1. Create new react native project
2. Add these lines to the App.js:

import {
  ...
  Dimension
} from 'react-native';
...
const SCREEN_WIDTH = Dimensions.get('window').width;
...
export default class App extends Component<Props> {
  render() {
    return(
      ...
      <Text style={{
        paddingLeft: SCREEN_WIDTH / 20,
        fontSize: SCREEN_WIDTH / 25,
      }}>
        Change PIN
      </Text>
    );
  }
}

3. Run the project on iPhone X

Expected Behavior

Actual Behavior

Reproducible Demo

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  TouchableHighlight,
  Text,
  View,
  Dimensions
} from 'react-native';


const SCREEN_WIDTH = Dimensions.get('window').width;
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <Text style={{
          paddingLeft: SCREEN_WIDTH / 20, // if this is changed to SCREEN_WIDTH / 21 everything works
          fontSize: SCREEN_WIDTH / 25,
        }}>
          Change PIN
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

[bohdanbirdie]

Adding paddingRight: SCREEN_WIDTH / 20 for text will fix the problem, and will center it as well.

I played a bit with it, and my guess is that your text happened to be in size range that is not wrapping and does not show as well, so probably this might be considered as an issue.

[nicemanis]

I know how to fix the problem - just add the paddingLeft to the container view instead of the Text element. The question is not how to fix this, but why doesn't it render certain words with certain paddingLeft and fontSize combinations.

As I commented in the sample code, if you set paddingLeft: SCREEN_WIDTH / 21 then the all of the text renders as expected. I have also tested a scenario where e.g. word "Policy" would render normally, word "Poolicy" would not bet rendered and word "Pooolicy" would again render normally. Also, I haven't seen this issue on Android.

[bohdanbirdie]

@nicemanis yea, seems like there is some range in which text is wrapping, but it doesn't affect geometry of element

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[paour]

This happens to me on v0.53.4. The text is correctly wrapped on a different iPhone model, but not on iPhone X.

[rpavlovs]

RN: 0.55.4

[jacklj]

Having the same problem on v55.3