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.

Resize path

See original GitHub issue

Example (a simple dot):

<Svg style={{width: 110, height: 110}} viewbox="0 0 22 22">
  <Path d="M11,0C4.926,0,0,4.926,0,11s4.926,11,11,11s11-4.926,11-11S17.074,0,11,0z" />
</Svg>

Same:

<Svg width={110} height={110} viewbox="0 0 22 22">
  <Path d="M11,0C4.926,0,0,4.926,0,11s4.926,11,11,11s11-4.926,11-11S17.074,0,11,0z" />
</Svg>

Only the canvas got resized - not the dot.

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:20

Top GitHub Comments

3reactions

DaKaZcommented, Feb 5, 2018

I too ran into this issue and it appears to only be on Android. We use viewBox and it just doesn’t work. The paths are NOT re-rendered when width/height props are updated. I added a console.log in there and I do see the render method being called with then new props, but either React or the android native SVG library refuses to re-render the component.

Here is what it looked like before my hacky fix which android would crop the image: screen shot 2018-02-05 at 3 25 02 pm and then after my fix: screen shot 2018-02-05 at 4 04 58 pm

So how did I do it, by tracking size of the component and using a scale transform on android like this:

import React from 'react';
import { View, Platform } from 'react-native';
import Svg, { Path, G } from 'svgs';

class FodLogo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      size: props.size
    };
  }

  render() {
    const androidProps =
      Platform.OS === 'android' ? { scale: this.props.size / this.state.size } : null;
    const otherProps =
      Platform.OS === 'android' ?
        { width: this.state.size, height: this.state.size } :
        { width: this.props.size, height: this.props.size };
    return (
      <View style={{ width: this.props.size, height: this.props.size }}>
        <Svg {...otherProps} viewBox="0 0 95 95" title="Field Operations Directorate Logo">
          <G {...androidProps}>
            <Path
              d="M67,35 L75,8.8 C67.3,3.4 58,0.2 47.8,0.2 C40,0.2 32.6,2.1 26.1,5.5 L67,35 Z"
              fill="#005288"
            />
            <Path
              d="M80.8,13.6 L66,62 L92.7,61.9 C94.2,57.3 95,52.4 95,47.3 C95,34.1 89.6,22.1 80.8,13.6 Z"
              fill="#C0C2C4"
            />
            <Path
              d="M42.1,24.9 L21,8.6 C8.8,17.1 0.7,31.3 0.7,47.3 C0.7,50.4 1,53.3 1.6,56.2 L42.1,24.9 Z"
              fill="#669900"
            />
            <Path
              d="M41,69 L47.8,94.5 C47.8,94.5 47.8,94.5 47.9,94.5 C66.1,94.5 81.9,84.2 89.8,69 L41,69 Z"
              fill="#007BB1"
            />
            <Path d="M26,46 L3.5,63.3 C9.4,79.6 24,91.7 41.7,94.1 L26,46 Z" fill="#CC3333" />
          </G>
        </Svg>
      </View>
    );
  }
}

export default FodLogo;

3reactions

EskelCzcommented, Jan 15, 2018

Just to make sure, the viewbox dimensions should be the original dimensions of the shape.