react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Android Text lineWrap and letterSpacing causes incorrect line break

Open jsonxr opened this issue 3 years ago • 0 comments

Description

On an Android Pixel 6 pro device, discovered a text measuring bug when setting both lineHeight and letterSpacing.

This specific combination reproduces no matter the lineHeight, just the fact that you set it with letterSpacing of 1.6 causes it to line wrap when it should not.

<View style={{flexDirection: 'row'}}>
  <Text
    style={{
      letterSpacing: 1.6,
      lineHeight: 21,
    }}>
    0123456789
  </Text>
</View>
bug

Version

0.70.3

Output of npx react-native info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
    Memory: 923.13 MB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/Library/Caches/fnm_multishells/1361_1666232181169/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/Library/Caches/fnm_multishells/1361_1666232181169/bin/npm
    Watchman: 2022.09.26.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 26, 28, 29, 30, 31, 32, 33
      Build Tools: 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0
      System Images: android-29 | ARM 64 v8a, android-29 | Google APIs ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.12 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.3 => 0.70.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Create new react-native app npx react-native init AwesomeProject

Copy App.js in description or at gist https://gist.github.com/jsonxr/073a1f08ab3f99554035707233423811

Run on an Android Pixel 6 Pro emulator (or real device).

Snack, code example, screenshot, or link to a repository

This only shows up for me on a Pixel6 Pro emulator or device.

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

export default () => (
  <View style={{flexDirection: 'row'}}>
    <Text
      style={{
        letterSpacing: 1.6,
        lineHeight: 21,
      }}>
      0123456789
    </Text>
  </View>
);

jsonxr avatar Oct 20 '22 17:10 jsonxr