Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

168
Vistas
React Native: View not covering parent height

Issue

There are 2 tabs stacked horizontally and in the first tab, the view in green color isn’t able to fill the parent's height when the content is different in both the Tabs.

enter image description here

Reproducible in Expo

https://snack.expo.dev/@vinay-sharma/92706e

Code

import React from "react";
import { Text, View } from "react-native";

const Tab = ({ textNodes }) => {
  return (
    <View style={{ flex: 1, backgroundColor: "red" }}>
      <View style={{ flexDirection: "row" }}>
        <View style={{ backgroundColor: "blue", width: 10 }}></View>

        {/* the green view isn’t able to fill parent's height*/}
        <View style={{ backgroundColor: "green", flex: 1 }}>
          {textNodes.map((node) => (
            <Text>{node}</Text>
          ))}
        </View>
      </View>

      <View style={{ height: 10, backgroundColor: "black" }} />
    </View>
  );
};

export default function App() {
  return (
    <View style={{ flexDirection: "row", marginTop: 25 }}>
      <Tab textNodes={[1, 2, 3]} />
      <Tab textNodes={[1, 2, 3, 4]} />
    </View>
  );
}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Just add style property height: '100%' in the row view in your Tab() function

The first element is not taking 100% of the height because it has less Childs (default behaviour of a View, doc)

import React from 'react';
import { Text, View } from 'react-native';

const Tab = ({ textNodes }) => {
  return (
    <View style={{ flex: 1, backgroundColor: 'red' }}>
      <View style={{ flexDirection: 'row', height: '100%' }}> //here add height 100%
        <View style={{ backgroundColor: 'blue', width: 10 }}></View>

        {/* the green view isn’t able to fill parent's height*/}
        <View style={{ backgroundColor: 'green', flex: 1 }}>
          {textNodes.map((node)=><Text>{node}</Text>)}
        </View>
      </View>

      <View style={{ height: 10, backgroundColor: "black" }} />
    </View>
  )
}

export default function App() {
  return (
    <View style={{ flexDirection: 'row', marginTop: 25 }}>
      <Tab textNodes={[1, 2, 3]} />
      <Tab textNodes={[1, 2, 3, 4]} />
    </View>
  );
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda