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.

Flex

See original GitHub issue

How can I get The <Svg/? element to use all the available space (or at least width) in the container <View/>?

Issue Analytics

State:
Created 6 years ago
Comments:5

Top GitHub Comments

6reactions

msandcommented, Jul 29, 2017

@awreese Sure. (btw, the last commit in the repository before the comment you refer to is this: https://github.com/msand/RNSvgTextBug/tree/3b47667fbca150857297880cb7ae27728de5fc0f which you could’ve used to find the referenced code, or just look inside the native.js file of the current commit and read the code)

Current commit: https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/src/native.js#L23 Here I get the width of the viewport window. const { width, height } = Dimensions.get("window");

Here I pass the the width on: https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/src/native.js#L34-L40

        <All
          View={View}
          width={width}
          height={height}
          native={true}
          shadow={shadow}
        />

Which I then pass on here to all the example components: https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/src/components/all.js

And then some examples of how to use it: Full width square viewbox https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/src/components/anchor.js

Full width scaled height: https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/src/components/request.js

Full width, scaled height, translated viewBox: https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/src/components/request2.js

Full size, without preserving aspect ratio (stretches if you change width or height): https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/src/components/ViewBox.js

For the spec of preserveAspectRatio and viewBox check here: https://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute https://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute

Examples https://www.w3.org/TR/SVG11/images/coords/ViewBox.svg https://www.w3.org/TR/SVG11/images/coords/PreserveAspectRatio.svg

Btw, I use the same “All” component in the web/next.js version: https://github.com/msand/RNSvgTextBug/blob/5a9f555db69b3bd22ead882479bce08653bb6415/pages/index.js

  <All
    View={props => <div {...props} />}
    width={980}
    native={false}
    shadow="/static/shadow-min.png"
  />;

1reaction

scriptfanscommented, Aug 7, 2017

@msand Thanks very much.

Top Results From Across the Web

Flex - Design, Manufacturing and Supply Chain Logistics | Flex

We're a global supply chain and manufacturing solutions provider. Flex helps customers design, build and deliver products to make the world a better...

Flex - Flex | Pay Rent On Your Own Schedule

With Flex, you choose when and how you pay rent. Each month, you pay half of your total rent and finance the other...

Flex® | Period products, reimagined

Flex was created to give those who bleed sustainable period products that prioritize comfort, support an active lifestyle, and lend a hand to...

Amazon Flex - US

Start earning. Use your own vehicle to deliver packages for Amazon as a way of earning extra money to move you closer to...

Flex Definition & Meaning - Merriam-Webster

noun (1) ; 1 · an act or instance of flexing or bending. [Trae] Young finished with 22 points, seven assists and two...