[0.54] <Text> rendering last line truncated (sometimes)

Environment

Environment:
  OS: macOS Sierra 10.12.6
  Node: 9.7.1
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: Not Found

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

Expected Behavior

<Text> views render without truncation where it shouldn’t happen.

Actual Behavior

See these screenshots of my app. Pay attention to the 1st and 3rd Text views.

With numberOfLines={50} ellipsizeMode="middle" in <Text>: Without numberOfLines={50} ellipsizeMode="middle" in <Text>:

I included 2 screenshots, with or without ellipsizeMode to show how it renders differently, but truncated in each case (in the 1st and 3rd Text views). The enclosing View wrapping the Text view preserve correct height if the Text view wasn’t truncated, leaving an empty line on the bottom. Truncation happens on the second last line, as if numberOfLines is set to rendered lines - 1.

Notice that the unintended truncation doesn’t happen with every Text view, only some. And the truncation happens with various lengths on what should have been the last line, so I’m not sure what’s the condition for triggering it.

This unwanted truncation started on RN 0.54, not 0.53 and below. Obviously something about rendering calculation with the Text view rewrite/revamp in 0.54.

Steps to Reproduce

The views are rendered with a structure like

<Flatlist renderItem={({ item }) => !item || (
  <View style={{ margin: 10, padding: 8 }} key={'summary' + item.rowID}>
    <Text numberOfLines={50} ellipsizeMode="middle">.....</Text>
  </View>
)} />

For the 2 truncated Text views, these are the text contained within on array index 9 and 11:

Array(23)
0: "President Donald Trump’s new tariff orders on steel and aluminum perfectly illustrate Trump’s feral genius for playing to popular resentment of foreigners ― and the high costs of his"
1: "And the knee-jerk reaction to Trump’s orders shows how orthodox economists and the mainstream press refuse to grasp how trade really works, or what’s at stake."
2: "But if you want to appreciate true protectionism, take a good look at China’s entire economic system."
3: "What’s the nature of this trade war?"
4: "By comparison, the U.S., once the world’s leader, produces just over 70 million metric tons."
5: "In response to past complaints that resulted in tariffs against particular categories of dumped Chinese steel, China simply increased its exports of steel to other nations, such as South Korea, for re-export."
6: "But Trump did not just pull these tariffs out his ear."
7: "The second was a targeted tariff increase complemented by targeted quotas aimed at nations that were the source of the problem, most notably China."
8: "This was hardly a surprise."
9: "Trump ended the meeting by declaring to White House Chief of Staff John Kelly: “I know there are some people in the room right now that are upset."
10: "Trump adviser Peter Navarro was right on Fox News on Sunday when he referred to China as the deeper source of these gluts."
11: "Intermittently, the West has imposed selective anti-dumping duties against the Chinese, but has not challenged the predatory logic of the entire Chinese mercantilist system."
12: "(Like climate change, that long run has arrived abruptly.) Apple loves the fact that it can make its products in China, using a well-trained, cheap and docile work force one cut above slave labor."
13: "Usually, the influence of these players is sufficient to keep American presidents from taking too hard a line against Beijing."
14: "Under Trump, however, the internal White House politics changed."
15: "But the sheer simple-mindedness of Trump’s move to impose flat tariffs on all steel exporters stunned even the trade hawks."
16: "If the main problem is China, why retaliate against Canada, which actually buys more steel from the U.S. than it sells?"
17: "But Trump, in a stroke, managed to get Canada, the EU and China all on the same side."
18: "He goes for the most simplistic, vivid and demagogic remedy."
19: "But in the quest for a drastically different trade policy, Trump is about the last leader who would change course competently or constructively."
20: "A serious trade policy would go after the root of China’s state capitalism, enlisting every possible ally rather than alienating them."
21: "Raising tariffs on state-subsidized steel is a good and necessary part of the right policy."
22: "Robert Kuttner is co-editor of The American Prospect and professor at Brandeis University’s Heller School."

Screenshots above are on the iPhone X simulator. On physical device, it has different reproducibility but also occurs on different text. Screen width and number of words rendered per line is slightly different between simulator and on an actual iPhone X.

And for reference, my app package.json:

  "dependencies": {
    "babel-plugin-idx": "^2",
    "he": "^1.1.0",
    "lodash": "^4.17.2",
    "moment": "^2.19.0",
    "moment-timezone": "^0.5.10",
    "node-summary": "../node-summary",
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.0",
    "react-native-blur": "^3.2.0",
    "react-native-code-push": "^5.2.1",
    "react-native-easy-toast": "^1.0.9",
    "react-native-firebase": "^3.0",
    "react-native-fit-image": "^1.4.8",
    "react-native-highlight-words": "^1.0.1",
    "react-native-keep-awake": "^3.0.1",
    "react-native-linear-gradient": "^2.0.0",
    "react-native-modalbox": "^1.3.8",
    "react-native-orientation": "^3.1.3",
    "react-native-parallax-scroll-view": "../react-native-parallax-scroll-view",
    "react-native-safari-view": "^2.0.0",
    "react-native-sentry": "^0.34",
    "react-native-sha256": "^1.1.1",
    "react-native-status-bar-size": "^0.3.2",
    "react-native-swiper": "^1.5.10",
    "react-native-tooltip": "^5.2.0",
    "react-native-tts": "../react-native-tts",
    "react-native-vector-icons": "^4.1.1",
    "react-native-webview-bridge": "../react-native-webview-bridge-RN0.51",
    "react-redux": "^5.0.1",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "redux-logger": "^3.0.6"
  }

[fungilation]

As much as I don’t want to… bump for how much we care about this.

[fungilation]

@grabbou or anyone else, this issue is dangling and a pretty important one to us who target the iPhone X (and Plus models too I’m guessing, which shares a device pixel of 3). Can correct tags/labels be added to this issue for more attention please?