software-mansion/react-native-svg

Text anchoring is not calculated correctly if the line contains multiple TSpans

Open

#1 205 ouverte le 28 nov. 2019

Voir sur GitHub
 (8 commentaires) (1 réaction) (0 assignés)Java (1 076 forks)batch import
bugdiscussiongood first issuehelp wanted

Métriques du dépôt

Stars
 (7 107 stars)
Métriques de merge PR
 (Merge moyen 9j 18h) (1 PR mergée en 30 j)

Description

Bug

If a line of text with textAnchor="middle" comprises multiple <TSpan>s, each span is centred on itself (from the position it would have been in with textAnchor="start"), rather than as a whole line of text.

Probably easier to explain with a screenshot:

I'll push up a PR in a minute that solves this particular issue, however not being much of a Native Android/Java developer it's likely there's a better way to do this, and I can't be sure this hasn't broken something else.

Environment info

React native info output:

System:
    OS: macOS Mojave 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz
    Memory: 57.91 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3
      System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom_64
      Android NDK: 19.2.5345600
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 11.2/11B52 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

Library version: 9.13.3

Steps To Reproduce

  1. Add a <Text textAnchor="middle"> element containing multiple <TSpan>s
  2. See only the first span on each line is aligned to the middle of the screen.

Describe what you expected to happen:

  1. The entire line should be aligned correctly

Reproducible sample code

https://github.com/mjmasn/TSpanIssue

Guide contributeur