Welcome to Arora in React Native

Overview

Arora's conversion to react native allowed for the development of both android and iphone versions without the trouble of learning two different technologies. It allows for easy package integration as well as many other useful resources that react native provides. Here are some things you should know about the project:

Install and Run

Clone the repository

git clone https://github.com/jacknormand/Arora-React.git

Change into MobileGame directory

cd Arora-React/MobileGame

Install the expo client using the package manager of your choice( I will use npm )

npm install -g expo-cli ( global installation is optional )

Start up the Arora-Server

Instuctions Here: https://github.com/CANIS-NAU/ARORA-Server

Run the app ( While in MobileGame directory )

npm start or expo start

Installing Dependencies

React Native bundles them for you upon install!

If you wish to install a new dependency just make sure you're in the MobileGame directory and run

npm install {dependency}

It will automatically add the new package to the package.json. From there just import the library where it's needed

Screen Hierarchy

Splash

Routes: Login or Wellness

Actions: Loads cache resources, determines autologin, and routes accordingly.

Login

Routes: Registration or Wellness

Actions: Verify user entered login information and route or display invalid information Alert.

Registration

Routes: Login

Actions: Allow user to create a new account, upon creation routes to login.

Wellness

Routes: Home

Actions: Creates a form from user entered mood and stress values.

Home

Routes: Atrium, Learning Activities and Chat

Actions: Act as a hub for user to see pollen count and all routing options

Breathing Game

Routes: Reward

Actions: Allows user to play breathing game and upon completion, sends user to acquire reward.

Chat

Routes: Back To Home

Actions: Chat for user to communicate mentor

Walking

Routes: Reward

Actions: Plays audio while user takes a walk and listens, reward is available after set time.

Atrium

Routes: Back To Home

Actions: Show users butterflies and displays information on press.

Reward

Routes: Home

Actions: Displays animation and rewards user for activity completed and routes back home.

Important Libraries Used

AsyncStorage

Package: @react-native-async-storage/async-storage
Used to keep and use data app wide and allow for no internet connection features.
Documentation

Network Information

Package: @react-native-community/netinfo
Used to check active network status. Returns boolean values for that corresponding connection status ( true for connection and false for no connection ).
Documentation

Navigation

Package: @react-navigation/native-stack
Used to navigate throughout the app screens. Stack based architecture allows for easy screen addition.
Documentation

JSON Animations

Package: lottie-react-native
Allows for very smooth and easy to use JSON animations.
Documentation

Chat

Package: react-native-gifted-chat
Provides a very nice UI for chats. Also includes a built in message state which is useful when getting an array of messages and displaying them.
Documentation

Cacheing Resources

Package: react-native-expo-cached-image
Provides resources for caching assets used in the app. Important when using a stack based navigation system ( Without caching assets, loading some assets upon navigation can be an issue ). Caching occurs during app loading on splash screen.
Documentation