React Native Research

The goal of React Native is to simply write code once that applies to multiple platforms (iOS, Android, Web) through the usage of common React components. React Native takes care of formatting the code to be platform specific without for a need for the developer to intervene. However, there are some platform specific features that might require the programmer's attention but these represent a very small percentage of the written code.

Components

The framework separates components (building blocks) into two categories: Core and Native components. Native components are platform-backed by the same views for each platform, therefore the app feel and look the same across platforms. Then within these Native components there are ready-to-use Core components. For example, a React Native View represents an Android ViewGroup, an iOS UIView and a Web div.

Development Using Expo

You need have to have the Expo Go app downloaded on your phone.

1. cd client
2. Connect your phone and computer to the same network
3. npx expo start
4. Scan the QR code that appears in the command line and it should open the Expo Go App.

Needed Components

Navigation

We will have to navigate between different parts of our application. This can be done using a few different ways:

Tabs

We have access to 3 types of tabs:

• Javascript tabs Implemented using the React Navigation bottom tabs API and other familiar APIs
• Native tabs Platform's native implementation of tabs
• Custom tabs Headless tab components from expo-router/ui to build a fully custom tab layout to achieve complex UI patterns.

Modals

Modals are essentially customizable popups that can include any other type of component nested into them. Since they are customizable, any content can be put in them, therefore they are most commonly used as notifications in the middle of the screen or as a way to show some information to the user in a structure way since native notifications simply offer a textbox.

Map Component

A map will be needed as it is the main interactive component of our application. Expo is currently working on a core component implementation of maps. However, that component still seems to be alpha which may result in frequent breaking changes. Therefore, a safer option would be to adopt a 3rd party library like react-native-maps which has already been in use for a while. For pros and cons of different options, look at the Maps research.

Refresh Component

The RefreshControl components helps handling any type of refresh. This will be useful as we will be having the manual syncing for our data. Thus we can show some kind of feedback to the user that the application is currently doing something in the background and is not frozen.