react-native-svg: Text element wont redraw when SVG size changes
I have a Svg element with dynamic width and height, and positioning of all elements inside of it is related to this elements width and height, however, Text elements won’t change their places after width and height changes, everything else is fine. This problem occurs in 6.3.1 version of react-native-svg, in 5.5.1, it works fine.
Environment:
OS: Windows 10
Node: 8.11.2
Yarn: 1.7.0
npm: 6.1.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
View,
Button,
Alert
} from 'react-native';
import Svg, {G, Circle, Image, Text} from 'react-native-svg';
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {s:400};
}
render() {
return (
<View style={styles.container}>
<View style={{borderWidth:2}}>
<Svg width={this.state.s} height={this.state.s}>
<Circle cx="50%" cy="50%" r={this.state.s/2 - 10} stroke="red" fillOpacity="0"/>
<Text x={this.state.s/2} y={this.state.s/2} textAnchor="middle" fontWeight="bold" fontSize={this.state.s/25} fill="black">HOGWARTS</Text>
</Svg>
</View>
<Button title="test" onPress={() => {this.setState((this.state.s == 400) ? {s:200}:{s:400})}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Sorry if this is duplicate, couldn’t find anything related.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 1
- Comments: 34
You should use key={Math.random()} for text element.
<Text x={this.state.s/2} y={this.state.s/2} key={Math.random()} .................>HOGWARTS</Text>@msageryd Oj glömde svara här. Varsågod, kul att underliggande orsakerna hittades o kunde åtgärdas 😃 @jgranstrom The fixes have been published under the 7th major version. If anyone of you have experienced issues with the gesture responder system, then I would recommend testing the latest commit from the master branch, as I’ve fixed several issues there recently and help in testing would be very useful! Now onPress/In/out should work and be called the correct number of times with the correct hit target.
They released many versions after I posted this, I don’t know why they won’t fix this, not even an official response.
If you have more than one list like this, you may experience a collision every 1,000,000,000 renders or so. Best to append a list specific string with the list element index if you care to avoid this problem:
<Text x={this.state.s/2} y={this.state.s/2} key={'CollegeList' + i + Math.random()} .................>HOGWARTS</Text>