Set textarea height to occupy rest of the screen

Question

I am new to react-native. Building a Hello World app to make myself well versed with react-native. On a screen, I want to have a textbox, below it a button and below the button a textarea that will occupy the rest of the screen. I am not sure how shall I do it.

Answer 1

You have to understand about Flex Box to set layout as per your need.

Layout with flexbox

A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

Flex Direction

Adding flexDirection to a component's style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

Justify Content

Adding justifyContent to a component's style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, space-between and space-evenly.

Align Items

Adding alignItems to a component's style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are flex-start, center, flex-end, and stretch.

Please check this link to understand flexbox:

1. Understading flexbox in react native
2. Layout with flexbox