Set Height and Width in React Native

In react native application, to set the dimensions of a component, we use width and height properties. Remember, all the values of dimensions are unitless like we can't use height: 20px to set the height of a component instead of we just use height: 20 and react-native automatically set the pixels.

In react native, we can set the width and height in two ways.

1. fixed width/height
2. dynamically width/height

Fixed Width and Height of React Native App

import React from 'react';
import { View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={{width: 100, height: 100, backgroundColor: 'blue'}}></View>
      <View style={{width: 200, height: 200, backgroundColor: 'green', marginTop: 30 }}>
      </View>
    </View>
  );
}

export default App;


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
});

Here in the above example, we define two child View components inside a parent View component. and then we set width and height 100 to the first child View and 200 to the second child View. Here, both child View has fixed width and height that can't be changed.

Also Read: Image Component in React Native

Dynamic width and height in React Native Application

In react-native, to set the dynamic width and height to a component, we use built-in interface Dimensions. it takes the dimension of a given component and then sets the width and height to its equivalent. let's see an example to understand it.

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<View style={{width: Dimensions.get('window').width , height: 100, backgroundColor: 'blue'}}>
</View>
<View 
    style={{
     width: Dimensions.get('window').width, 
     height: 200, backgroundColor: 'green', 
     marginTop: 30 }}>
</View>
</View>
);
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e0cecc',
alignItems: 'center',
justifyContent: 'center',
},
});

Here in both child View components, we set the width equal to the window's width. Here, we use the get() method to get the object of the window, and then we set the width equal to it. this feature is useful when we have different aspect screen ratio devices to run our application.

We can also use the flex attribute to set the component's style to have the component expand and shrink dynamically based on available space. flex: 1 means fill all available space. let's see an example to better understand it.

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
const App = () => {
return (
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'blue'}}></View>
<View style={{flex: 1, backgroundColor: 'green' }}>
</View>
</View>
);
}
export default App;

Here, in the above example, we set the parent View component to flex: 1, which means it expands to all the available space. It is a parent View so it will expand to the whole screen because the whole screen is available to the component and then in the parent View, we define two View components and set to flex: 1. So, all the available space will divide equally into both components.