React Native Tutorial About Height and width with Expo

On this occasion I will share my experience learning react native with expo for width, height and flex material, if no one knows how to install and what are the preparations for learning react native with expo, you can read the tutorial here.

Ok can’t wait, let’s start learning….

width and height are components of react native which are useful for determining/setting the size of the dimensions of an object that will be displayed on the screen, their use is almost the same as CSS, there are 3 kinds of dimensions used in react native to set width and height, namely Fixed Dimensions, Flex Dimensions ​and Percentage Dimensions​.

1. Fixed Dimensions

In general, to set the dimensions of a component is to add a fixed width and height or Fix the style. All dimensions in React Native have no units, and represent pixels. an example of its use as shown below,

============================================================================
import React from ‘react’;
import { StyleSheet, Text, View, ScrollView } from ‘react-native’;


const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#edf2f9’,
},
welcome: {
marginTop:50,
textAlign:’center’,
fontSize:20,
},
item: {
textAlign:’center’,
fontSize:15,
marginBottom:40,
},

});


const FixedDimensionsBasics = () => {
return (
<ScrollView
style={{ backgroundColor: ‘#edf2f9’}}
contentContainerStyle={styles.container}
>



<View>
<Text style={[styles.welcome]}>Welcome to Web Bali Seo!</Text>


<Text style={[styles.item]}>
This tutorial about height and width in framework React Native.
</Text>


<View style={{
width: 50, height: 50, backgroundColor: ‘powderblue’, paddingTop:9,
}} />
<View style={{
width: 100, height: 100, backgroundColor: ‘skyblue’
}} />
<View style={{
width: 150, height: 150, backgroundColor: ‘steelblue’
}} />
</View>


</ScrollView>
);
};


export default FixedDimensionsBasics;

============================================================================

 

Setting dimensions in this way is common for components whose size must always be set to a number of points and not calculated based on screen size.

There is no universal mapping from points to physical units of measurement. This means that components with fixed dimensions may not be the same physical size, across different devices and screen sizes. However, this difference is not very noticeable for most use cases.

2. Flex Dimensions​

Flex Dimensions​ are used to style components so that the component expands and shrinks dynamically based on the available space.

Usually we’ll use flex:1, which tells the component to fill all available space, distributed evenly among other components with the same parent. The greater the given flex, the higher the ratio of space that a component will take up compared to its parent. an example of its use as shown below :

=======================================================================
import React from ‘react’;
import { StyleSheet, Text, View, ScrollView } from ‘react-native’;


const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#edf2f9’,
},
welcome: {
marginTop:50,
textAlign:’center’,
fontSize:20,
},
item: {
textAlign:’center’,
fontSize:15,
marginBottom:40,
},

});


const FlexDimensionsBasics = () => {
return (
<ScrollView
style={{ backgroundColor: ‘#edf2f9’}}
contentContainerStyle={styles.container}
>



<View>
<Text style={[styles.welcome]}>Welcome to Web Bali Seo!</Text>


<Text style={[styles.item]}>
This tutorial about height and width in framework React Native.
</Text>
<Text style={[styles.item]}>
Flex Dimensions
</Text>


<View style={{ flex: 1, backgroundColor: ‘powderblue’ }} />
<View style={{ flex: 2, backgroundColor: ‘skyblue’ }} />
<View style={{ flex: 3, backgroundColor: ‘steelblue’ }} />
</View>


</ScrollView>
);
};


export default FlexDimensionsBasics;

=======================================================================

 

A component can only be expanded to fill available space if its parent has dimensions greater than 0. If the parent does not have a fixed width and height or flex, the parent will have dimensions 0 and the child’s flex will not be visible.

3. Percentage Dimensions​

Percentage Dimensions​ are pretty much the same as Flex Dimensions​, If you want to fill a specific part of the screen, but you don’t want to use the Flex layout, you can use Percentage Dimensions in component styles. Similar to flex dimensions, Percentage requires a parent of a defined size. an example of its use as shown below, the one on the left of the coding and the one on the right of the result.

 

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

const styles = StyleSheet.create({
  container: {
   flex: 3,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#edf2f9',
  },
  welcome: {
    marginTop:50,
    textAlign:'center',
    fontSize:20,
   },
  item: {
    textAlign:'center',
    fontSize:15,
    marginBottom:40,
  },
  
});

const PercenDimensionsBasics = () => {
  return (
    <ScrollView
        style={{ backgroundColor: '#edf2f9',}}
        contentContainerStyle={styles.container}
      >

      
    <View style={{ height: '100%' }}>
      <Text style={[styles.welcome]}>Welcome to Web Bali Seo!</Text>

      <Text style={[styles.item]}>
      This tutorial about height and width in framework React Native.
      </Text>
      <Text style={[styles.item]}>
      Percen Dimensions
      </Text>

      <View style={{ height: '100%' }}>
        <View style={{
          height: '15%', backgroundColor: 'powderblue'
        }} />
        <View style={{
          width: '66%', height: '35%', backgroundColor: 'skyblue'
        }} />
        <View style={{
          width: '33%', height: '50%', backgroundColor: 'steelblue'
        }} />
      </View>
    </View>

    </ScrollView>
  );
};

export default PercenDimensionsBasics; 

That’s the react native tutorial about height and width with expo, hopefully it’s useful