1. Technology Behind The Application - sight-hkust/ENGG4930C-ForeSee-mobile GitHub Wiki

ForeSee mobile application uses the framework React Native, which allows you to write in Java Script and get rendered natively on both iOS and Android platforms. You can learn more about React Native by reading following the documentation.

The ENGG4930C-ForeSee-mobile repository README contains the instructions to get started.

Technology Behind

This application depends on many open-source libraries, the following list contains the most important ones for further reference.

  1. react-navigation
  2. react-native-chart-kit
  3. react-native-localization
  4. react-native-community/checkbox

Navigation

All the navigation setup is handled at /App.js using react-navigation's Stack Navigator. In the below snippet from App.js, you can see that all screens are first important then put in the navigator.

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import LoginScreen from './Screens/LoginScreen';
import RegisterChoiceScreen from './Screens/RegisterWorkflow/RegisterChoiceScreen';
import RegisterName from './Screens/RegisterWorkflow/RegisterName';
import RegisterEmail from './Screens/RegisterWorkflow/RegisterEmail';
import RegisterPassword from './Screens/RegisterWorkflow/RegisterPassword';
import RegisterBirthday from './Screens/RegisterWorkflow/RegisterBirthday';
import RegisterPhone from './Screens/RegisterWorkflow/RegisterPhone';
import RegisterIsParent from './Screens/RegisterWorkflow/RegisterIsParent';
import MainScreen from './Screens/MainScreen';
import GetEducatedScreen from './Screens/GetEducated';
import RecordsScreen from './Screens/RecordsScreen';
import ArticleDetailScreen from './Screens/ArticleDetail';
import AskAnExpertScreen from './Screens/AskAnExpertScreen';
import AddRecordScreen from './Screens/AddRecordScreen';
import DoctorsScreen from './Screens/Doctors';

const Stack = createStackNavigator();

function MyStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false,
                }}>
                <Stack.Screen name="Login" component={LoginScreen}/>
                <Stack.Screen name="Register" component={RegisterChoiceScreen}/>
                <Stack.Screen name="RegisterName" component={RegisterName}/>
                <Stack.Screen name="RegisterEmail" component={RegisterEmail}/>
                <Stack.Screen name="RegisterPassword" component={RegisterPassword}/>
                <Stack.Screen name="RegisterBirthday" component={RegisterBirthday}/>
                <Stack.Screen name="RegisterPhone" component={RegisterPhone}/>
                <Stack.Screen name="RegisterIsParent" component={RegisterIsParent}/>

                <Stack.Screen name="MainScreen" component={MainScreen}/>
                <Stack.Screen name="RecordsScreen" component={RecordsScreen}/>
                <Stack.Screen name="GetEducatedScreen" component={GetEducatedScreen}/>
                <Stack.Screen name="ArticleDetailScreen" component={ArticleDetailScreen}/>
                <Stack.Screen name="AskAnExpertScreen" component={AskAnExpertScreen}/>
                <Stack.Screen name="AddRecordScreen" component={AddRecordScreen}/>
                <Stack.Screen name="DoctorsScreen" component={DoctorsScreen}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

const App: () => React$Node = () => {
    return MyStack();
};

After the StackNavigator is set, you can navigate between screens using the navigation prop. Below is an example of navigation, form LoginScreen to MainScreen.

this.props.navigation.navigate('MainScreen', {});

Localization

react-native-localization is installed and configured in order to let the project be developed with multiple languages. All the resource strings are in /Strings.js, it currently contains two dictionaries, en & zh, for both English and Cantonese.

All the strings can be accessed, according to device language, from /Strings.js after it is imported; below is an example from /Screens/LoginScreen.js:

import Strings from '../Strings';
[...]
<Text style={LoginStyles.labelText}>{Strings.email}</Text>
⚠️ **GitHub.com Fallback** ⚠️