Components

Components are independent and reusable bits of code. They include the functional logic of the component along with styling and are imported by Screens and Layout. Unlike Screens, Components are never used in Navigation. That would deviate from our development style guide.

Usage

frontier mobile add component <component-name>

Example

frontier mobile add component fancy-text

Technical

A Component folder consists of two files. These files include:

• [component].tsx: This file holds actual functional logic and view hierarchy for the component you are trying to create.
• [component].styles.tsx: This contains the styling of the component. It is an abstraction similar to CSS StyleSheets with some of the attributes but not all.

See below for an example of the folder structure after creating a component called fancy-text:

Example

Below is an example of a component called fancy-text.tsx

// @/component/fancy-text/fancy-text.tsx
import { Component } from "react";
import styles from "./fancy-text.styles";
class FancyText extends Component {
  render() {
    return <Text style={styles.title}>Some Fancy Text</Text>
  }
}

This is an example of the stylesheet fancy-text.styles.tsx.

// @/component/fancy-text/fancy-text.style.tsx
import { StyleSheet } from "react-native";
export StyleSheet.create({
    text: {
      color: "red",
      fontSize: 18,
    }
  });
};

Choosing between Class and Function components

There are two ways in which components can be created in React / React Native. We can use Class or Function based components. Function based components are generally quicker to create for simple use cases. However, as the components get more complicated and require more logic, Class based components make this a bit easier to work with. Here are some reasons to help make your decision a bit easier.

When to choose Class-Based components:

1. If you want to work with components lifecycle functions - Even though react provides hooks like useEffect(), this can get quite cumbersome when the component grows.
2. If you are creating a Screen.
3. If you are creating a Context Provider.
4. If your component has a lot of state variables - A general rule of thumb is to keep state variable count at a max of 5.
5. If your component has a lot of props variables - A general rule of thumb is to keep props variable count at a max of 5.
6. If you intend on making API calls from within the component.

When to choose Function-Based components:

1. If the component is mostly visual with little to no functional logic.

Applying these to your development are not aimed at providing technical benefit (for most scenarios) but these will help to ensure the code is more readable and easier to adapt for new developers.