Set View Height Width in Percentage Flex Dimensions in React Native

How to set root parent and child view height width in Flex Dimensions using flex style attribute in React Native Android iOS application.

Flex is used inside the component’s style . Using the Flex, the height and width can expand and fill automatically itself on the available device surface free space. Flex is used with numeric value like flex : 1 . This tell the application to fill all the available space on screen.

For example : In our this example we are creating a parent view with flex :1 . Now this tell the application to fill out the whole screen in height and width. Now we would going to create 3 children view inside the root parent view. Using the style now we are going the set all of three children views Flex. This will divide the whole screen according to given flex in width and height.

Contents in this project Set View Height Width in Flex Dimensions :

Start a fresh React Native project. If you don’t know how then read my this tutorial.
Add StyleSheet and View component in import block.
Add Singe View as parent view in render’s return block.
Set parent View Flex : 1 using style.
Add Three Views inside the Parent View.
Set all three Views Flex using style.
Complete Source Code.

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add StyleSheet and View component in import block.

<br />
import { AppRegistry, View, StyleSheet } from ‘react-native’;

1	import { AppRegistry, View, StyleSheet } from ‘react-native’;

3. Add Singe View as parent view in render’s return block.

<br />
render() {<br />
    return (</p>
<p>     <View></p>
<p>      </View></p>
<p>    );<br />
  }

render() {

return (

<View>

</View>

);

}

4. Set parent View Flex : 1 using style.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1 }}></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

5. Add Three Views inside the Parent View.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1 }}></p>
<p>        <View /></p>
<p>        <View /></p>
<p>        <View /></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

6. Set all three Views Flex using style.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1 }}></p>
<p>        <View style={{flex :1, backgroundColor: ‘#FF5722’}} /></p>
<p>        <View style={{flex :2, backgroundColor: ‘#673AB7’}} /></p>
<p>        <View style={{flex :3, backgroundColor: ‘#FFEB3B’}} /></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

7. Complete Source Code for index.android.js file :

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, View, StyleSheet } from ‘react-native’;</p>
<p>class Myproject extends Component {<br />
  render() {<br />
    return (<br />
     <View style={{flex :1 }}></p>
<p>        <View style={{flex :1, backgroundColor: ‘#FF5722’}} /></p>
<p>        <View style={{flex :2, backgroundColor: ‘#673AB7’}} /></p>
<p>        <View style={{flex :3, backgroundColor: ‘#FFEB3B’}} /></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);