React-native-windows: Any interest in porting this to RN Windows?

[idibidiart]

I'd be happy to port this to React Native Windows if there is interest

https://github.com/idibidiart/react-native-responsive-grid

`About

You may use this grid to build 2D layouts that maintain their proportions on different screen sizes. You may also use this grid to decide what image sources to use for each screen size and orientation, using the aspectRatio prop, and have different offset of elements for each screen size, using screen-width-specific offset props. You may also hide and show elements based on screen size, screen-width-specific hidden props.

See this video: demo

The demo in the video above uses the grid's percentage-based sizing to maintain the intended proportions and it uses the grid's aspectRatio feature to pick the image with the right aspect ratio in response to a layout change that affect the given column's computed styles, which in the case of this demo is a device orientation change that affects the column's computed width. The image simply get replaced with one that is prepared by the designer during the development process so that it fits the targetted aspect ratio. Since there could be many aspect ratios that correspond to different devices we should have multiple such images prepared by the designer for the supported aspect ratios (and their rotated versions, if the app supports both portrait and landscape.)

`

Hard dependency is the Dimensions module that's part pf React Native. If that works on Windows the rest should be easy.

[ndbroadbent]

@idibidiart This looks amazing! I would love to see a port for React Native Windows.

Also react-native-web, if you have the time and motivation! The only issue with react-native-web is that CSS has no support for aspect ratio, so that might be a deal-breaker.

[idibidiart]

@ndbroadbent thank you for the kind words and your interest!!

I've improved on the aspectRatio implementation so that now it does a simple iterative search to find the nearest matching aspect ratio (I'm aware of only 5 different aspect ratios for mobile devices, so if some device out there has yet another one it will approximate to the closest known aspect ratio. What this means for the Web version (I am working on a ReactJS version) is that it will pick the image with the closest aspect ratio to the current width/height ratio of the document (window.innerWidth / window.innerHeight)

The motivation to port the grid to React Native Windows, React Native Web and plain ReactJS (web) is so that teams can use the same grid to make responsive apps on all platforms where React has been ported, starting with the obvious ones (Web and Windows.)

I'll get started on it

FYI, here is the updated portion of the Readme:

The grid can pick the image with the closest aspect ratio to the device aspect ratio, dynamically, taking into account the current device orientation. The images themselves must be cropped by the designer so that they match the common device aspect ratios (see below) while also showing the part of the image that the designer intends to show for each aspect ratio. Since there could be many aspect ratios that correspond to different devices we should have multiple such images (and, optionally, their rotated versions.)

The following table maps some common device aspect ratios to the ratio of width/height of devices known to this developer, for both landscape and portrait device orientations. The physical device aspect ratio does not change with device rotation (i.e. a device with 16:9 aspect ratio does not become one with a 9:16 aspect ratio when it's rotated, although it does mathematically), but since the width and height get flipped when changing orientation from portrait to lanscape and vice versa, we need to have two images per each physical device aspect ratio, one for portrait mode and the other for landscape. However, if our app only supports portrait or landscape mode then we need to have the one corresponding to that orientation.

| Aspect Ratio | Width | Height | Width/Height Ratio (landscape) | Devices
| :---: | :---: | :---: | :---: | :---: |
| '16:9' | 568 | 320 | 1.77 | iPhone 5
| '16:9' | 667 | 375 | 1.77 | iPhone 6 & 7
| '16:9' | 736 | 414 | 1.77 | iPhone 6 Plus & 7 Plus
| '16:10' | ? | ? | 1.6 | ?
| '3:2' | 480 | 320 | 1.5 | iPhone 4
| '4:3' | 1024 | 768 | 1.33 | iPad Mini, iPad Air and small iPad Pro
| '4:3' | 1366 | 1024 | 1.33 | Large iPad Pro
| '1:1' | 1 | ? | ? | ?

| Aspect Ratio | Width | Height | Width/Height Ratio (portrait) | Devices
| :---: | :---: | :---: | :---: | :---: |
| '16:9' | 320 | 568 | 0.56 | iPhone 5
| '16:9' | 375 | 667 | 0.56 | iPhone 6 & 7
| '16:9' | 414 | 736 | 0.56 | iPhone 6 Plus & 7 Plus
| '16:10' | ? | ? | 0.625| ?
| '3:2' | 320 | 480 | 0.66 | iPhone 4
| '4:3' | 768 | 1024 | 0.75 | iPad Mini, iPad Air and small iPad Pro
| '4:3' | 1024 | 1366 | 0.75 | Large iPad Pro
| '1:1' | 1 | ? | ? | ?

Example

    <Row>
      <Col fullWidth aspectRatio={{nearestRatio: '3:2', orientation: "portrait"}}>
          <Image source={require('./assets/homepage hero-3-2-portrait.jpg')} style={styles.homeImage}></Image>
      </Col>
    </Row>
    <Row>
      <Col fullWidth aspectRatio={{nearestRatio: '3:2', orientation: "landscape"}}>
          <Image source={require('./assets/homepage hero-3-2-landscape.jpg')} style={styles.homeImage}></Image>
      </Col>
    </Row>
    <Row>
      <Col fullWidth aspectRatio={{nearestRatio: '16:9', orientation: "portrait"}}>
          <Image source={require('./assets/homepage hero-16-9-portrait.jpg')} style={styles.homeImage}></Image>
      </Col>
    </Row>
    <Row>
      <Col fullWidth aspectRatio={{nearestRatio: '16:9', orientation: "landscape"}}
          <Image source={require('./assets/homepage hero-16-9-landscape.jpg')} style={styles.homeImage}></Image>
      </Col>
    </Row>

UPDATED/FIXED description