CODEWITHSUNDEEP
react-nativeflexboxreact-native-flexbox
rakete
rakete

Reputation: 3041

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

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>

Upvotes: 1

Views: 2630

Answers (1)

Hunaid Hassan
Hunaid Hassan

Reputation: 732

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.

Upvotes: 2

Related Questions