software-mansion/react-native-svg

InlineSize causes nativeEvent.layout to not work properly on Android

Open

#1257 aperta il 20 gen 2020

Vedi su GitHub
 (3 commenti) (2 reazioni) (0 assegnatari)Java (1076 fork)batch import
bugenhancementgood first issuehelp wantedstale

Metriche repository

Star
 (7107 star)
Metriche merge PR
 (Merge medio 9g 18h) (1 PR mergiata in 30 g)

Descrizione

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}

Guida contributor