Open
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.1Library version: 11.0.1
Describe what you expected to happen:
- 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}