React Native — Dimensions, Positioning, and Buttons

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';

export default function App() {
  return (
    <View style={{
      flex: 1,
    }}>
      <View style={{
        position: 'absolute',
        top: 10,
        width: 50,
        height: 50,
        backgroundColor: 'powderblue'
      }} />
      <View style={{
        position: 'relative',
        top: 80,
        left: 80,
        width: 50,
        height: 50,
        backgroundColor: 'skyblue'
      }} />
    </View>
  );
}

We set the position , top and left properties as we do with CSS.

Colors

We can set the color values with a color name, hex string, an rgb() value, an rgba() value, a hsl() value, or a hsla() value.

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: '#8a2be2' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'rgb(255, 4, 65)' }} />
    </View>
  );
}

We set the backgroundColor of the view with various color values.

Handling Touches

We can add a Button component to add a component into our app.

For example, we can write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        onPress={() => {
          alert('You tapped the button!');
        }}
        title="Press Me"
      />
    </View>
  );
}

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

to add a Button component.

The onPress prop takes a function that’s run when we press the button.

The title prop has the title of the button.

Touchables

We can also add touchable components to add touchable elements that are more customizable than buttons.

For example, we can use the TouchableHighlight component to use it as a button.

To do that, we write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableHighlight
        onPress={() => {
          alert('You tapped the button!');
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>TouchableHighlight</Text>
        </View>
      </TouchableHighlight>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

to add a TouchableHighlight component with a View inside for the content.

Conclusion

We can set the width, height, and position of our React Native components.

Also, we can add buttons and touchable components to add touchable elements in our app.