Search code examples
reactjscssreact-nativereact-native-flexbox

React Native - What is the aspectRatio property used for in layout?

I am new to react native. I am exploring the layout properties here but i was stuck to understand the aspectRatio property because it isn't exist in CSS. But after doing a bit of research i understand this property a little bit. But i want to learn the steps that are documented here and are totally out of my mind and cant get them. Can anyone explain each step in simple words

  • On a node (what is node here?) with a set width/height aspect ratio control the size of the unset dimension (what is unset dimension here?)
  • On a node (what is node here?) with a set flex basis aspect ratio controls the size of the node in the cross axis if unset
  • On a node (what is node here?) with a measure function aspect ratio works as though the measure function (what is function here?) measures the flex basis
  • On a node (what is node here?) with flex grow/shrink aspect ratio controls the size of the node in the cross axis if unset
  • Aspect ratio takes min/max dimensions into account (what is account here?)

I will be glad to all the contributors. Thanks !!!

Solution

  • Unless otherwise specified, "node" in React native specs refers to any element implementing the Node Interface, and sometimes to its shadow DOM counterpart.

    As you'll notice in the documentation, there are plenty of objects implementing the Node interface, like Attr, Comment, CDATASection or Character. However, when referring to a web page, the term "node" typically denominates the two most common type of nodes:

    They are called nodes because the DOM is typically associated with a tree model in which each child element is represented as a ramification (a node) which can have subsequent children.

    The aspect-ratio is a CSS @media specification defined as the ratio between width and height. In media queries it refers to the width and height of the viewport but it's also commonly used when refering to any media element (images, videos,...).

    With regard to aspect ratio the general accepted terms are:

    • landscape an element with a width greater than height
    • portrait an element with a height greater than width
    • square an element with equal height and width

    React native implements aspectRatio as a non-standard property of "nodes" (not of viewport), defined as a number, allowing locking the ratio between width and height in place.

    When you set aspectRatio and one of width and height it will calculate the other one based on the aspectRatio value.
    An aspectRatio value of 2 will attempt to size the node with having a height two times smaller than the width and a value of .2 will result in a node having a height 5 times bigger than the width.

    For future reference, whenever you find the existing React Native documentation ambiguous or simply too scarce, the best places to look for clarifications are:

    • MDN - a friendly yet comprehensive library on all things web, curated through the joined effort of both large teams (Mozilla, Google, Microsoft, Facebook and W3C) as well as individual web developers.
    • the W3C standards. That's what is commonly named "official standard" or "standard specification".

    Because web is made up of multiple different technologies, W3C can quickly become overwhelming. However, MDN pages always contain links to the relevant standards, where applicable.

    Note: do not mistake W3C (the World Wide Web Consortium) for w3schools. The latter is a private website trying to monetize traffic made by developers in search of the "official standard". A somewhat harmless tick.