OBJETIVO

Necesito lograr este diseño:

PROBLEMA

Como no necesito ningún desplazamiento infinito, lo tengo que simplificar.

Las cajas estarán cubiertas con imágenes.

El principal problema al que me enfrento es que no sé cómo adaptar todas estas dimensiones de imágenes al dispositivo de los usuarios (y el diseño también).

CÓDIGO

Revisa mi snack para emular el código.

Aquí está mi código actual:

 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, }, });