React Native Set View Width Height in Fixed Dimensions Android iOS

How to apply custom height and width in pixels in react native android iOS application using custom style sheet on both parent and child View Fixed Dimensions.

Fixed height and width gives the View to a permanent area on screen no matter what screen size is. We can define fixed height using style. All we have to do is define View’s Height using height and Width using width in style. If will cover the screen according to given size because all dimensions in React Native are unitless with density independent pixels.

Contents in this project Set View Width Height in Fixed 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.
Add Three different View inside the Parent View.
Add inline Style for all three Children View.
Add height and width in pixels in 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 (<br />
     <View></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

<View>

</View>

);

}

4. Add Three different View inside the Parent View.

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

render() {

return (

<View>

</View>

);

}

5. Add inline Style for all three Children View.

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

render() {

return (

<View>

</View>

);

}

6. Add height and width in pixels in Style.

<br />
 render() {<br />
    return (<br />
     <View></p>
<p>        <View style={{width: 50, height: 50, backgroundColor: ‘#FF5722’}} /></p>
<p>        <View style={{width: 100, height: 100, backgroundColor: ‘#673AB7’}} /></p>
<p>        <View style={{width: 150, height: 150, backgroundColor: ‘#FFEB3B’}} /></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

<View>

</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></p>
<p>        <View style={{width: 50, height: 50, backgroundColor: ‘#FF5722’}} /></p>
<p>        <View style={{width: 100, height: 100, backgroundColor: ‘#673AB7’}} /></p>
<p>        <View style={{width: 150, height: 150, backgroundColor: ‘#FFEB3B’}} /></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);