Support vector effect property

Is there any plans to support thenon-scaling-stroke value of vector-effect property (as described here)?

One solution would be to flatten the transformations (using for example: https://github.com/fontello/svgpath), but I wouldn’t be able to animate these transforms without changing the stroke appearance.

[scottmas]

Oh also, we should probably update the typings. I’m not quite sure how I would go about contributing to your existing branch so here’s the relevant code…

export interface VectorEffectProps {
  vectorEffect?: 'none' | 'non-scaling-stroke',
}

export interface CommonPathProps extends FillProps, StrokeProps, ClipProps, TransformProps, VectorEffectProps, ResponderProps, TouchableProps, DefinitionProps, CommonMaskProps {}

[msand]

Tested using this:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Svg, Rect, G, Line } from 'react-native-svg';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Svg width="300" height="200" viewBox="0 0 600 400">
          <Rect
            x="1"
            y="1"
            width="598"
            height="398"
            fill="none"
            stroke="black"
          />

          <G transform="scale(9,1)">
            <Line
              stroke="black"
              strokeWidth="5"
              x1="10"
              y1="50"
              x2="10"
              y2="350"
            />
            <Line
              vectorEffect="non-scaling-stroke"
              stroke="black"
              strokeWidth="5"
              x1="32"
              y1="50"
              x2="32"
              y2="350"
            />
            <Line
              vectorEffect="none"
              stroke="black"
              strokeWidth="5"
              x1="55"
              y1="50"
              x2="55"
              y2="350"
            />
          </G>
        </Svg>
      </View>
    );
  }
}

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

ios:

android: