React Native


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


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:

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} />

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 (
			<CloseButton onPress={backAction} />
export default MyTestComponent;