React Native — Dimensions, Positioning, and Buttons

Photo by Paolo Nicolello on Unsplash

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Width and Height

The width and height properties can be set to change the size of an item.

For example, we can write:

import React from 'react';
import { View } from 'react-native';
export default function App() {
  return (
    <View style={{
      flex: 1,
    }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

We set the width and height of the inner views in pixels to size the boxes.

The value can also be a percentage value or 'auto' .

Absolute and Relative Layout

In addition to flexbox layouts, we can also add absolute and relative layouts.

For example, we can write:

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