software-mansion/react-native-svg

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

Open

#1.205 aberto em 28 de nov. de 2019

Ver no GitHub
 (8 comments) (1 reaction) (0 assignees)Java (1.076 forks)batch import
bugdiscussiongood first issuehelp wanted

Métricas do repositório

Stars
 (7.107 stars)
Métricas de merge de PR
 (Mesclagem média 9d 18h) (1 fundiu PR em 30d)

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

Guia do colaborador