React-native: RTL languages text gets cut-off vertically on Android

[iRayan7]

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 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,
  },
});

[nadavmos]

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

[iRayan7]

Thanks, @nadavmos!
This is what solved the problem for me: in /android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 21
        compileSdkVersion = 28
        targetSdkVersion = 27
        supportLibVersion = "28.0.0"
    }
    ... 
}

Wish it get solved for targetSdkVersion = 28 ASAP.

[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.

[felixweinberger]

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.

Thanks, this solution worked for me as well!

[fukuball]

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.

Downgrade to 27 works, this hot fix commit https://github.com/facebook/react-native/issues/25297 does not work for me.

[nadav2051]

Any idea when will we see a fix for this in one of the releases? as of August 1st, Google store will stop supporting new applications with API 27, and on November 1st, it will stop supporting updating existing apps with API 27, so this workaround is not viable anymore.

[soh335]

We fork and apply patch to 0.59.10, and works. If you want to use forked react native, need to build from source.

[tarouboy]

Actually not just Arabic but many non-english text content as well.
Hope they will merge it soon.

[kelset]

hey folks - sorry for the late reply. It seems that the commit fixing this is actually in the 61 RC (https://github.com/facebook/react-native/commit/76c50c1db15a1040b185770072d960652e7974a3) so what I would suggest is to endure while we get to 0.61 (if you can! I'm not sure how far away from 0.61.0 we are atm) or do what @soh335 said and apply the patch locally.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.