React-native-svg: Update SVG Width and Height Dynamically

[dquilter]

Can you update the width and height of an SVG dynamically? I have a pin icon on a map which I'm trying to update when the zoom level changes:

  render() {
    return (
      <View>
        <Svg
          width={this.props.iconWidth}
          height={this.props.iconHeight}
          viewBox="0 0 51 51"
        >
          ...SVG Code...
      </View>
    );
  }
}

I can log out and see the props updating when the zoom level is changed, but the SVG itself does not change size.

I've tried a few variations on the above approach, including setting the iconWidth in the component state, using this.forceUpdate() inside of componentDidUpdate, updating the SVG using the scale prop (rather than height and width), and using the setNativeProps method to try and force the change.

In all of these attempts the SVG has the correct dimensions on the initial render, but changing the zoom level has no effect (despite the fact that I can log out the correct newly calculated values).

Can anyone shed any light on this?

[karltaylor]

@dquilter have you tried using Animated values?

[msand]

How about something like this? https://snack.expo.io/@msand/test-dimension-change

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Constants, Svg } from 'expo';

const smallState = { width: 100, height: 100, small: true };
const bigState = { width: 200, height: 200, small: false };

export default class App extends Component {
  state = { width: 100, height: 100, small: true };

  changeSize = () =>
    this.setState(({ small }) => (small ? bigState : smallState));

  render() {
    const { width, height, small } = this.state;
    return (
      <TouchableOpacity style={styles.container} onPress={this.changeSize}>
        <Svg
          height={height}
          width={width}
          key={'test' + width}
          viewBox="0 0 100 100"
          preserveAspectRatio="none">
          <Svg.Circle
            cx={50}
            cy={50}
            r={45}
            strokeWidth={2.5}
            stroke="#e74c3c"
            fill="#f1c40f"
          />
          <Svg.Rect
            x={15}
            y={15}
            width={70}
            height={70}
            strokeWidth={2}
            stroke="#9b59b6"
            fill="#3498db"
          />
        </Svg>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

[msand]

This should be fixed now and works without using key.