React Native

Overview

Totara has adapted the use of React Native for the mobile app. React Native is a framework developed by Facebook for creating native apps for both iOS & Android under one common language; JavaScript/TypeScript. In Totara, we use TypeScript for application feature development and JavaScript for the unit tests.

You can find the React Native environment setup documentation here https://reactnative.dev/docs/environment-setup

Components

In the mobile application, we use functional components over class components. They don't manage their own state or have access to the lifecycle methods provided by React Native. They are literally plain functions and stateless components. Mobile app general components are placed under the @totara/components directory.

Here is example code for a component written in TypeScript:

CloseButton

import { Icons } from "@resources/icons";
import { paddings } from "@totara/theme/constants";
import React from "react";
import { Image, ImageSourcePropType, StyleSheet, TouchableOpacity } from "react-native";

const CloseButton = ({ onPress, testID, disabled }: { onPress; disabled?: boolean; testID?: string }) => {
  return (
    <TouchableOpacity testID={testID} onPress={onPress} disabled={disabled} style={style.icon}>
      <Image source={Icons.closeIcon as ImageSourcePropType} />
    </TouchableOpacity>
  );
};

const style = StyleSheet.create({
  icon: {
    paddingLeft: paddings.paddingL
  }
});

export default CloseButton;

In order to use this component, you need to import the component and call it with passing required props.

Usage of component

import CloseButton from "@totara/components/CloseButton"

const MyTestComponent = () => {

	const backAction = () => {
		//Button action goes here
	}

	return (
    	<View>
			<CloseButton onPress={backAction} />
		</View>
	);
};
export default MyTestComponent;