How to fill remaining height with View?

[b-graves]

Hi, I am struggling to create a simple header/content layout using the View utility.

I would like to have a View that fills the full screen height, then a header that is a fixed height, then the content fill the remaining space.

I thought something like this would work:

export const LayoutTestViews = () => (
  <View height="100vh">
    <ActionBar position="top">
      <Text>Header</Text>
    </ActionBar>
    <View grow backgroundColor="neutral-faded">
      <Text>Content</Text>
    </View>
  </View>
)

as the top View is 100vh then the inner content View will grow to fill the remaining height. However, the content View does not grow:

I have re-written it using divs to create the effect I was expecting, with the same flex properties I thought would be applied by the View like this:

export const LayoutTestDivs = () => (
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
    }}
  >
    <ActionBar position="top">
      <Text>Header</Text>
    </ActionBar>
    <div
      style={{
        flexGrow: 1,
        backgroundColor: 'var(--rs-color-background-neutral-faded)',
      }}
    >
      <Text>Content</Text>
    </div>
  </div>
)

and it works as expected:

So I am a little unclear on what I am doing wrong when trying to use the View?

Thanks!!

[X86-7]

Hey there, to clarify, you're trying to make the view assume the entirety of the page?

You need to use a property called View.Item grow

Try this with your original code and see if it works.

<View>
    <View.Item grow backgroundColor="neutral-faded">
      <Text>Content</Text>
    </View.Item>
</View>

[blvdmitry]

That's a good point! Right now we're only turning on flexbox behaviour if one of the flex properties are used on View. I'll see how we can improve that, but meanwhile what you can do is apply align to the parent View for example:

https://codesandbox.io/s/goofy-sun-m5mt2y?file=/src/App.tsx

[blvdmitry]

I've added auto detection for this use case as well. If you have a View that has a child View or View.Item with grow – it will automatically turn to flexbox to ensure the child grows as expected