React Native: View not covering parent height

Question

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.

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

Does this solves your problem? https://stackoverflow.com/questions/15381172/how-can-i-make-flexbox-children-100-height-of-their-parent?rq=1 — Tramonta, Oct 28 '21 at 15:44

GregMit · Answer 1 · 2021-10-29T13:28:14.400

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

Using `height: '100%'` makes the tabs stretch till the bottom, in other words, each tab's height becomes that of the screen. — Vinay Sharma, Oct 29 '21 at 17:31

React Native: View not covering parent height

Issue

Reproducible in Expo

Code

1 Answers1