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 Nagivation. 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 for two files. These file 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 attribute but not all.

See below for example of 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.tsximport { 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.tsximport { 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 create 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 how 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 components grows.
2. If you are creating a Screen.
3. If you are creating a Context Provider.
4. If your component has a lot a state variables - A general rule of thump is to keep state variable count at a max of 5.
5. If your component has a lot a props variables - A general rule of thump 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 aim 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.