Estoy trabajando en un proyecto nativo de React y me encontré con problemas al configurar el width y la height usando valores porcentuales en una View . He intentado establecer width: 100% y height: 100% pero esto no funciona.

 function CalendarPage() { return ( <MainWrapper> <SafeAreaView style={styles.container}> <ScrollView> <StyleContentWrapper> <Paragraph> Hello World! </Paragraph> </StyleContentWrapper> </ScrollView> </SafeAreaView> </MainWrapper> ); }

 const MainWrapper = styled.View` flex: 1; justify-content: center; align-items: center; background-color: lightgray; color: white; ` const StyleContentWrapper = styled.View` height: 100%; // this does not work width: 100%; // this does not work background-color: red; padding-top: 40px; padding-horizontal: 20px; `

Una breve explicación de los componentes: MainWrapper cubre toda la pantalla y es la capa base. La razón por la que anida SafeAreaView es porque esto me permite establecer un color de fondo en el "área segura".

También he anidado otra vista llamada StyleContentWrapper dentro de ScrollView , porque quiero que todo el interior sea desplazable.

Estos son los resultados

StyledContentWrapper o El cuadro rojo no cubre toda la pantalla, a pesar de tener los estilos de width: 100% y height: 100% . ¿Por qué es esto? Establecer ancho y alto fijo funciona, pero este no es el enfoque que quiero, porque diferentes dispositivos tienen diferentes anchos y altos, y quiero que funcione para múltiples pantallas con diferentes anchos y altos, de ahí el uso del porcentaje.

¿Como puedo resolver esto?