RTL languages text gets cut-off vertically on Android

RTL languages text gets cut-off vertically on Android (Pixel 2 and OnePlus 6). This is a new app just initialized to reproduce the issue.

Arabic text, last line vertically cut off: Where it should be rendered like this:

Persian text, last line vertically cut off: Where it should be rendered like this:

English text is rendered fine:

Emulator: Pixel 2 Device: OnePlus 6 React Native version: 0.59.8

React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 422.23 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.1 - /usr/local/bin/node
      Yarn: 1.13.0 - ~/n/bin/yarn
      npm: 6.4.1 - ~/n/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 26, 27, 28
        Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.0
        System Images: android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Android TV Intel x86 Atom, android-28 | China version of Wear OS Intel x86 Atom, android-28 | Wear OS Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
    IDEs:
      Android Studio: 3.4 AI-183.5429.30.34.5452501
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.8 => 0.59.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Steps To Reproduce

1. init a new app
2. type a long text in Arabic inside a <Text> component, where the text has to wrap into multiple lines.

Describe what you expected to happen: Text rendered normally.

Snack, code example, or link to a repository:

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

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


type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في قبل الميلاد، مما يجعله</Text>
      </View>
    );
  }
}

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

[nadav2051]

Same issue, downgrading from 28 to 27 has indeed solved it, but I’ve worked around that by providing the ‘lineHeight’ style property in the Text component and had it set to the same value of fontSize, seems to be working properly.

[nadavmos]

same issue with hebrew when the targetSdkVersion is 28. you can change targetSdkVersion to 27 as a workaround