title: How to find correct values for width, height and viewBox with react-native-svg
body: <p>I have been trying to do something that seemed easy, but I have been trying for a few hours and I can't find the solution.</p>
  
  <p>I have an SVG that needs to be on top of a screen. It came from the designer with these dimensions: </p>
  
  <pre><code>&lt;Svg width="354px" height="190px" viewBox="0 0 354 190"&gt;...&lt;/Svg&gt;
  </code></pre>
  
  <p>In <strong>React Native</strong>, that would go inside of a container, and the SVG needs to take the full width of the screen, which I am taking from:</p>
  
  <pre><code>Dimensions.get("window").width
  </code></pre>
  
  <p>My problem is, I haven't found a way to scale the SVG to take 100% of the screen width, finding out the correct height (or a way for it to be set automatically), and preserve the aspect ratio. I've tried like a million things, including playing around with the container's <em>aspectRatio</em> style and its <em>height</em> (or not setting the <em>height</em> at all). Whenever I've found some "proportions" that worked, I tried in a different device with different screen width and it didn't look good at all (cropped, smaller than the screen's width, etc). </p>
  
  <p>I feel like the <em>preserveAspectRatio</em> property in the SVG (react-native-svg) is somehow conflicting with the <em>aspectRatio</em> style. And I am totally lost with the <em>preserveAspectRatio</em>, I haven't found a way to make it scale without being cropped.</p>
  
  <p>Does anyone have any idea how to achieve this?</p>
  
  <p>This is my final code, which returns a HeatMap component showing an SVG, but although it has the correct height, part of the SVG is out of the screen from the right (looks cropped because it's too wide):</p>
  
  <pre><code>const windowWidth = Dimensions.get("window").width;
  
  const getSVGRootProps = ({ width, height }) =&gt; ({
    width: "100%",
    height: "100%",
    viewBox: `0 0 ${width} ${height}`,
    preserveAspectRatio: "xMinYMin meet",
  });
  
  const FieldShape = () =&gt; {
    const width = 354; // Original width
    const height = 190; // Original height
    const aspectRatio = width / height;
    // adjusted height = &lt;screen width&gt; * original height / original width
    const calculatedHeight = (windowWidth * height) / width;
    const fieldStyles = {
      width: windowWidth,
      height: calculatedHeight,
      aspectRatio,
    };
  
    return (
      &lt;View style={fieldStyles}&gt;
        &lt;Svg {...getSVGRootProps({ windowWidth, calculatedHeight })}&gt;
        ...
        &lt;/Svg&gt;
      &lt;/View&gt;
    );
  };
  
  const HeatMap = () =&gt; {
    return &lt;FieldShape /&gt;;
  };
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/Wihw1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Wihw1.png" alt="Result picture (pixelation intended)"></a></p>