software-mansion/react-native-svg

InlineSize causes nativeEvent.layout to not work properly on Android

Open

#1,257 创建于 2020年1月20日

在 GitHub 查看
 (3 评论) (2 反应) (0 负责人)Java (7,107 star) (1,076 fork)batch import
bugenhancementgood first issuehelp wantedstale

描述

Hello,

Thanks for the effort in improving react-native-svg. I'm getting a strange issue only on Android. iOS is Ok. When I place a TSpan with inlineSize, onLayout isn't getting correct values for dimensions and positions. In my case, it's important to know the correct dimensions and positions 'cause I'm creating a bounding "layer" over the text which will be moveable with panresponder.

Environment info

React native info output:

System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 44.71 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.3.0 - ~/.nvm/versions/node/v13.3.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.1 - ~/.nvm/versions/node/v13.3.0/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: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 11.0.1

Describe what you expected to happen:

  1. The same behavior as iOS on android, getting correct values onlayout.

Reproducible sample code

          <SvgText x={100} textAnchor={"middle"} y={50} fontSize={20} fill={"#FF0000"} onLayout={(layout)=>{console.log('TextOnLayout', layout.nativeEvent.layout);}}>
            <SvgTSpan inlineSize={"100%"}>
              Testing word-wrap... Testing word-wrap... Testing word-wrap... Testing word-wrap...
            </SvgTSpan>
          </SvgText>

Console Output (Android - With inlineSize):

 LOG  TextOnLayout {"height": 0, "width": 381.71429443359375, "x": 0, "y": 0}
 LOG  TextOnLayout {"height": 0, "width": 0, "x": 0, "y": 0}

Console Output (iOS - With inlineSize - As expected):

 LOG  TextOnLayout {"height": 0, "width": 345, "x": 0, "y": 0}
 LOG  TextOnLayout {"height": 71.6015625, "width": 345, "x": 100, "y": 30.95703125}
 LOG  TextOnLayout {"height": 309.23573369565213, "width": 1490, "x": 431.88405797101456, "y": 134.22022192029004}
 LOG  TextOnLayout {"height": 71.6015625, "width": 345, "x": 100, "y": 30.95703125}

Console Output (Android - Without inlineSize):

 LOG  TextOnLayout {"height": 0, "width": 381.71429443359375, "x": 0, "y": 0}
 LOG  TextOnLayout {"height": 19.428571701049805, "width": 732.952392578125, "x": -267.80950927734375, "y": 35.0476188659668}
 LOG  TextOnLayout {"height": 19.428571701049805, "width": 732.952392578125, "x": -267.80950927734375, "y": 35.0476188659668}

贡献者指南