question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text element wont redraw when SVG size changes

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:34

github_iconTop GitHub Comments

5reactions
mcihancommented, Jul 17, 2018

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>

2reactions
msandcommented, Sep 25, 2018

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Text element wont redraw when SVG size changes · Issue #709
I have a Svg element with dynamic width and height, and positioning of all elements ... Text element wont redraw when SVG size...
Read more >
Redrawing SVG on resize - javascript - Stack Overflow
The ultimate problem is the svg element not resizing (i.e. the width and height never get updated). However I think it's related to...
Read more >
Text — SVG 2
When a different font (or change in font size) is specified in the middle of a run of text, the dominant baseline determines...
Read more >
SVGSVGElement - Web APIs | MDN
Chrome Edge SVGSVGElement Full support. Chrome1. Toggle history Full support. Edge12. Toggle hist... animationsPaused Full support. Chrome1. Toggle history Full support. Edge79. Toggle hist... checkEnclosure Full...
Read more >
Resizing an SVG When the Window is Resized in d3.js - Chartio
When developing with SVG, it can often be difficult to scale SVG objects when the containing frame or even the entire browser window...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found