React Native — View Styles

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.

View Style Props

We can set styles for views.

For example, we can write:

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.top} />
      <View style={styles.middle} />
      <View style={styles.bottom} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
    backgroundColor: "#fff",
    padding: 20,
    margin: 10,
  },
  top: {
    flex: 0.3,
    backgroundColor: "grey",
    borderWidth: 5,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  middle: {
    flex: 0.3,
    backgroundColor: "beige",
    borderWidth: 5,
  },
  bottom: {
    flex: 0.3,
    backgroundColor: "pink",
    borderWidth: 5,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
});

We use common CSS properties to set the style of the views.

flex is the proportion of the screen that the view takes.

justifyContent sets the alignment for the content.

backgroundColor sets the background color.

borderWidth sets the border width of the view.

padding sets the padding of the view.

margin sets the margin of the view.

PressEvent Object Type

The PressEvent object has various properties.

This type of object is set as the event object when a button is pressed.

For example, if we have:

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Button
          title="Press me"
          onPress={(ev) => console.log(ev)}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  }
});

We log the event object for button presses, which should be a PressEvent .

It has many properties, including:

{
    changedTouches: [PressEvent],
    identifier: 1,
    locationX: 8,
    locationY: 4.5,
    pageX: 24,
    pageY: 49.5,
    target: 1127,
    timestamp: 85131876.58868201,
    touches: []
}

identifier is the ID of the button press.

locationX is the x-coordinate of the button press.

locationY is the y-coordinate of the button press.

pageX is the touch origin’s x-coordinate on the screen.

pageY is the touch origin’s y-coordinate on the screen.

target is the ID of the element receiving the press event.

timestamp is the timestamp when the PressEvent occurred in milliseconds.

Height and Width

We can set the height and width of components.

For example, we can write:

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

export default function App() {
  return (
    <View>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
    </View>
  );
}

We set the width and height properties to set the width and height of the View .

Also, we can use flexbox to set the dimensions.

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={{ flex: 1, backgroundColor: 'powderblue' }} />
    </View>
  );
}

We set the flex property of the views to fill the outer View with the inner View .

Conclusion

We can set various styles for views.

Also, we can get data from button press events.