How to set SVG width and height in percents? about react-native-svg HOT 10 CLOSED

Cant do that in react-native. SVG like other components in react-native. It cant set dimensions style in percent.

from react-native-svg.

I have a new PR, with support for nesting svg, percentages in width&height, and correctly re/rendering when changing dimensions: #596
Needs more testing though, just a fast first attempt.

from react-native-svg.

I hit this problem too. And FWIW, I've had no problem specifying height and width using percents in other React Native components. The problem with the Svg element here is that it deliberately sanitizes the height and width parameters, with this code in render():

        const {opacity, width, height, viewBox, preserveAspectRatio, style, ...props} = this.props;
        let dimensions;

        if (width && height) {
            dimensions = {
                width: +width,
                height: +height,
                flex: 0
            };
        }

I'm guessing that the + coerces the value to a number, making percent values into NaN. I found that if I removed the + everything worked as expected. I expect RN to have standardized sanitization for width and height values, and I'm not sure why the Svg element feels the need to do anything additional.

from react-native-svg.

Apparently, support came about a year ago: facebook/react-native@3f49e74
Feel free to make a PR, otherwise I'll come around to changing this after testing it out.

from react-native-svg.

@msand This give man a cookie!

from react-native-svg.

@msand percentages in width & height work on iOS, but on Android I'm seeing this error:
SurfaceView should have explicit width and height set
Any ideas?

from react-native-svg.

@mlazari Are you using Expo? I think they have an earlier version, from before the percent support was merged.

from react-native-svg.

@msand No, I don't use Expo. I had version 6.2.2 and updated now to 6.3.1, but still seeing the error. I tried to reproduce it in a new sample project, but there it works, so it must be something in my project.

from react-native-svg.

Have you tried cleaning the android build?
cd android
gradlew clean

from react-native-svg.

@msand Cleaning the project doesn't change anything. I can reproduce the error message in a new project with something like this:

render() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <View style={{ flex: 1 }}>
        <MySVGComponent style={{ width: '50%', height: '100%' }} />
      </View>
    </View>
  );
}

On iOS it's simply not visible (because the inner View has width 0), but doesn't show any errors. On Android it's showing "SurfaceView should have explicit width and height set" error.
In my project the width / height of the container is not zero, but I get the same error on Android. On iOS it works fine and the svg component is visible and has correct size.

from react-native-svg.