Fixed View at bottom (variable height) and fill remaining height with other View

Question

I want to build a chat. In the view for the messages are the messages and the input field for the message. The Inputbox should be at the bottom and should use the height it needs. The height of the Inputbox can change if the user enters multi-line text. The msgs-View should fill the rest of the height (above). I don't want to position the Input absolute because the message's FlatList should be always in the "visible" area.

<View style={styles.wrapper}>
 <View style={styles.msgs}>Messages (FlatList)</View>
 <View style={styles.input}>Inputbox</View>
</View>

I have all Views with flex: 1 and wrapper with space-between and I see nothing any more.. — rakete, Feb 23 '18 at 20:41
Probably the views are being pushed of the screen by flex:1; try to use flex: 1 with the parent view only — Isaac Sekamatte, Feb 23 '18 at 20:45

score 2 · Accepted Answer · answered Feb 23 '18 at 20:45

2

Don't give flex style to your input.

Give your wrapper and list a flex: 1 style. Wrapper will take up all the space in its parent (which I assume is the screen). And list will take all the space in wrapper. And input will sit in the bottom.

answered Feb 23 '18 at 20:45

Hunaid Hassan

732
5
13

Fixed View at bottom (variable height) and fill remaining height with other View

1 Answers1