OBJECTIVE

I need to achieve this layout:

PROBLEM

As I don't need any infinite scrolling, I have make it simple.

The boxes will be covered with images.

The main problem I am facing is that I don't know how to adapt all these images dimensions to the users device (and the layout too).

CODE

Check my snack to emulate the code.

Here is my current code:

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

const BANNER_DIMENSIONS = {
  width: 1200,
  height: 600,
};

const SQUARE_DIMENSIONS = {
  width: 1080,
  height: 1080,
};

const PORTRAIT_DIMENSIONS = {
  width: 1080,
  height: 1350,
};

const POSTER_DIMENSIONS = {
  width: 1080,
  height: 1920,
};

const URIS = {
  banner:
    'https://thumbs.dreamstime.com/b/retrato-de-adolf-hitler-pintado-por-b-jackobs-imagen-del-libro-bilder-aus-dem-leben-des-fuhrers-im%C3%A1genes-la-vida-fuhrer-publicado-183308284.jpg',
  square:
    'https://fotos.perfil.com/2021/04/27/trim/950/534/benito-mussolini-1164371.jpg',
  portrait:
    'https://zeleb.publico.es/sites/default/files/styles/news_main_image_amp/public/franco2_0.jpg?itok=3Ve-RxCd',
  poster: 'https://m.media-amazon.com/images/I/41dLCrwvZFL.jpg',
};

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View>
          <View style={styles.imageContainer}>
            <Image source={URIS.banner} style={styles.banner} />
          </View>

          <View style={styles.row}>
            <View style={styles.imageContainer}>
              <Image source={URIS.square} style={styles.square} />
            </View>

            <View style={styles.imageContainer}>
              <Image source={URIS.portrait} style={styles.portrait} />
            </View>
          </View>
        </View>

        <View style={styles.imageContainer}>
          <Image source={URIS.poster} style={styles.poster} />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  row: {
    flexDirection: 'row',
  },
  imageContainer: {
    paddingLeft: 10,
    paddingTop: 10,
  },
  banner: {
    ...BANNER_DIMENSIONS,
  },
  square: {
    ...SQUARE_DIMENSIONS,
  },
  portrait: {
    ...PORTRAIT_DIMENSIONS,
  },
  poster: {
    ...POSTER_DIMENSIONS,
  },
});