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.
|
1 |
import { AppRegistry, View, StyleSheet } from 'react-native'; |
3. Add Singe View as parent view in render’s return block.
|
1 2 3 4 5 6 7 8 |
render() { return ( <View> </View> ); } |
4. Add Three different View inside the Parent View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View> <View> </View> <View> </View> <View> </View> </View> ); } |
5. Add inline Style for all three Children View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View> <View style={{ }} /> <View style={{ }} /> <View style={{ }} /> </View> ); } |
6. Add height and width in pixels in Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View> <View style={{width: 50, height: 50, backgroundColor: '#FF5722'}} /> <View style={{width: 100, height: 100, backgroundColor: '#673AB7'}} /> <View style={{width: 150, height: 150, backgroundColor: '#FFEB3B'}} /> </View> ); } |
7. Complete Source Code for index.android.js file :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { Component } from 'react'; import { AppRegistry, View, StyleSheet } from 'react-native'; class Myproject extends Component { render() { return ( <View> <View style={{width: 50, height: 50, backgroundColor: '#FF5722'}} /> <View style={{width: 100, height: 100, backgroundColor: '#673AB7'}} /> <View style={{width: 150, height: 150, backgroundColor: '#FFEB3B'}} /> </View> ); } } AppRegistry.registerComponent('Myproject', () => Myproject); |
Screenshot in iOS device :
Screenshot in Android device :
Hello,
I have created some demo apps with help of your code available on same site with my additional coding, but i facing the problem of responsiveness in different screen size devices and in orientations too, please help me to make this apps works properly or same for all devices.
Rohit to make responsive width and height you need to declare height and width in percentage format like width : ‘50%’. This would works on both orientations.
Hello,
I have created some demo apps where the tool bar is coming from android and the rest content page is in react-native, now since the tool bar is from android studio am unable to fix the content page height dynamically to each different devices (even after giving height in percentage structure because that tool bar from android takes different height in each different device). What is the workaround i could do to over come this problem?
You need to use react native’s own Toolbar using activity structure using React Navigation, we have almost every tutorial regarding to react navigation on our website so just search on the search box bro 🙂 .