How to set the style attribution to fill the rest space? - react-native

Question

As you see the image, if the three red views are already added on the parent view. Now I want to add another blue view which can fill the rest space. How can I set the style?

Answer 1

You can try this;
<View style={{flex:1,backgroundColor:'white'}}>
<View style={{justifyContent:'space-around'}}>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',marginHorizontal:5}}/>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>
</View>
<View style={{flex:1,alignItems:'center',justifyContent:'center',alignSelf:'stretch',backgroundColor:'blue',margin:5}}>
<Text style={{color:'white',fontWeight:'bold'}}>
View
</Text>
</View>
</View>

Answer 2

A much easier solution is to use the attribute flexGrow: 1 on the View you want to fill the remaining space.
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the child’s flex grow value.
https://facebook.github.io/react-native/docs/flexbox
DEMO
Code
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.flexContainer}>
<View style={styles.box1}></View>
<View style={styles.box2}></View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 8,
},
flexContainer: {
backgroundColor: 'black',
height: 100,
flexDirection: 'row'
},
box1: {
backgroundColor: 'blue',
width: 100,
height: '100%'
},
box2: {
backgroundColor: 'red',
height: '100%',
flexGrow: 1
}
});