Specifying the size of the View in FlexBox

This is a sample code to specify the size of the View with FlexBox.

react-native: 0.56.0

The purple, ochre, and light blue views are at a height of 1 : 2 : 3.

alt

	import React, {Component} from 'react';
	import {AppRegistry} from 'react-native';
	import {StyleSheet, View} from 'react-native';
	import {name as appName} from './app.json';

	export class App extends Component {
	render() {
	return (
	<View style={styles.container}>
	<View style={styles.top}>

	</View>
	<View style={styles.center}>

	</View>
	<View style={styles.bottom}>

	</View>
	</View>
	);
	}
	}

	const styles = StyleSheet.create({
	container: {
	flex: 1,
	},
	top: {
	flex: 1,
	backgroundColor: "#883496"
	},
	center: {
	flex: 2,
	backgroundColor: "goldenrod"
	},
	bottom: {
	flex: 3,
	backgroundColor: "cyan"
	},
	});

	AppRegistry.registerComponent(appName, () => App);

view raw index.js hosted with ❤ by GitHub

To make it horizontal, set flexDirection: ‘row’.

alt

	import React, {Component} from 'react';
	import {AppRegistry} from 'react-native';
	import {StyleSheet, View} from 'react-native';
	import {name as appName} from './app.json';

	export class App extends Component {
	render() {
	return (
	<View style={styles.container}>
	<View style={styles.top}>

	</View>
	<View style={styles.center}>

	</View>
	<View style={styles.bottom}>

	</View>
	</View>
	);
	}
	}

	const styles = StyleSheet.create({
	container: {
	flex: 1,
	flexDirection: 'row',
	},
	top: {
	flex: 1,
	backgroundColor: "#883496"
	},
	center: {
	flex: 2,
	backgroundColor: "goldenrod"
	},
	bottom: {
	flex: 3,
	backgroundColor: "cyan"
	},
	});

	AppRegistry.registerComponent(appName, () => App);

view raw index.js hosted with ❤ by GitHub