software-mansion/react-native-svg

InlineSize causes nativeEvent.layout to not work properly on Android

Open

#1,257 opened on Jan 20, 2020

View on GitHub
 (3 comments) (2 reactions) (0 assignees)Java (7,107 stars) (1,076 forks)batch import
bugenhancementgood first issuehelp wantedstale

Description

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}

Contributor guide