How to align views with top and bottom and left and right? - react-native

Question

I am trying to create ui designs, Here is my current design:
In this, i Have two views for of rectangle shape, here is my code :
<View style={{ flexDirection: 'column', alignContent: 'space-between' }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
<View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
</View>
</View>
The expected , output is the first rectangle should be on top left ( which is looking correct by below image ) and the second rectangle should be at bottom right. But its placing next to the first rectangle.
How to move, the rectangle to bottom right corner ? I tried all, like justify content , with flex end but nothing changing. Please help

Answer 1

<View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
<View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
</View>
</View>
First you have to set flex: 1 so it can grow. And second step is to add justifyContent: 'space-between' instead of alignContent: 'space-between'

Answer 2

You need to add flex:1 property to the parents style.
Also the property is called justifyContent and not alignContent
Here is your code corrected
<View style={{ flex:1, flexDirection: 'column', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
<View style={{ width: 100 * 2, height: 100, backgroundColor: 'red'}}/>
</View>
</View>
You can view an example here: https://snack.expo.io/#clemband/funny-cereal

Answer 3

Using Dimensions will do the trick for you.
Modify your code as below
import React, { Component } from 'react';
import { AppRegistry, View , Dimensions} from 'react-native';
const width = Dimensions.get('window').width
export default class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{ flex:1,flexDirection: 'column', alignContent: 'space-between' }}>
<View style={{ flex: 1,flexDirection: 'row' }}>
<View style={{ width: width/2, height: 100, backgroundColor: 'red'}}/>
</View>
<View style={{flexDirection: 'row' , justifyContent: 'flex-end'}}>
<View style={{ width: width/2 , height:100 ,backgroundColor: 'red'}}/>
</View>
</View>
);
}
};
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
Output: