How to set the style attribution to fill the rest space?

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
  }
});