React Native — Layouts and Fonts

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.

Layout Props

We can control the layout of our app with some props.

For example, we can write:

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

const randomHexColor = () => {
  return '#000000'.replace(/0/g, () => {
    return (~~(Math.random() * 16)).toString(16);
  });
};

const Square = () => {
  const sqStyle = {
    width: 50,
    height: 50,
    backgroundColor: randomHexColor(),
  };
  return <View style={sqStyle} />;
};

export default function App() {
  return (
    <View style={{
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'flex-start'
    }}>
      <Square />
      <Square />
      <Square />
    </View>
  );
}

We added some squares with the Square component.

Then we set the style of the View with some flexbox properties.

We can use all the flexbox properties like flexDirection , justifyContent , alignItems , etc.

And we can set them to the value that we want.

Shadow Props

We can set a shadow on a container by setting the shadowOffset property.

For example, we can write:

import React from 'react';
import { View, StyleSheet } from "react-native";
const shadowOffsetWidth = 20;
const shadowOffsetHeight = 20;
const shadowOpacity = 0.5;
const shadowRadius = 10;

export default function App() {
  return (
    <View style={styles.container}>
      <View style={[
        styles.square,
        {
          shadowOffset: {
            width: shadowOffsetWidth,
            height: -shadowOffsetHeight
          },
          shadowOpacity,
          shadowRadius
        }
      ]}>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  square: {
    alignSelf: "center",
    backgroundColor: "white",
    borderRadius: 4,
    height: 150,
    shadowColor: "black",
    width: 150
  },
  controls: {
    paddingHorizontal: 12
  }
});

We set the width and height of the shadow offset within the shadowOffset property.

Also, we set the shadow’s opacity with the shadowOpacity property.

And we set the shadow’s radius with the shadowRadius property.

Text Style Props

We can set styles for text.

For example, we can write:

import React from 'react';
import { View, StyleSheet, Text } from "react-native";
const fontStyles = ["normal", "italic"];
const fontVariants = [
  undefined,
  "small-caps",
  "oldstyle-nums",
  "lining-nums",
  "tabular-nums",
  "proportional-nums"
];
const fontWeights = [
  "normal",
  "bold",
  "100",
  "200",
  "300",
  "400",
  "500",
  "600",
  "700",
  "800",
  "900"
];
const textAlignments = ["auto", "left", "right", "center", "justify"];
const textDecorationLines = [
  "none",
  "underline",
  "line-through",
  "underline line-through"
];
const textDecorationStyles = ["solid", "double", "dotted", "dashed"];
const textTransformations = ["none", "uppercase", "lowercase", "capitalize"];
const textAlignmentsVertical = ["auto", "top", "bottom", "center"];
const writingDirections = ["auto", "ltr", "rtl"];

export default function App() {
  return (
    <View style={styles.container}>
      <Text
        style={[
          styles.paragraph,
          {
            fontSize: 20,
            fontStyle: fontStyles[0],
            fontWeight: fontWeights[0],
            lineHeight: 200,
            textAlign: textAlignments[0],
            textDecorationLine: textDecorationLines[0],
            textTransform: textTransformations[0],
            textAlignVertical: textAlignmentsVertical[0],
            fontVariant: fontVariants[0],
            letterSpacing: 5,
            includeFontPadding: true,
            textDecorationStyle: textDecorationStyles[0],
            writingDirection: writingDirections[0],
            textShadowOffset: {
              height: 10,
              width: 10
            },
            textShadowRadius: 5
          }
        ]}
      >
        Lorem Ipsum
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  paragraph: {
    color: "black",
    textDecorationColor: "yellow",
    textShadowColor: "red",
    textShadowRadius: 1,
    margin: 24
  }
});

to set all the styles for our text.

fontSize sets the font size.

fontStyle sets the font style.

lineHeight sets the line-height.

textAlign sets the text alignment.

textDecorationLine sets the text style.

textTransform lets us transform the text.

fontVariant sets the font-variant.

letterSpacing sets the letter spacing.

writingDirection sets the direction of the text.

textShadowOffset sets the shadow’s position.

textShadowRadius sets the radius of the shadow.

Conclusion

We can set many styles for fonts and layouts.