Caution

Please do not rely fully on this app for navigation of visually impaired people, because it is not extensively tested and might be dangerous.

Prerequisites

• npm version: ~10.8.2
• Node.js version: ~21.7.3
• Android v13 or greater

Changes in libraries

1. react-native-google-places-autocomplete
   • Go to node_modules and find the library.
   • In GooglePlacesAutocomplete.d.ts go to line 437 and add the following code:

   setAddressTextAndQuery(address: string): void;
   

   
   • In GooglePlacesAutocomplete.js go to line 185 and add the following code:

   setAddressTextAndQuery: (address) => {
      _handleChangeText(address);
      setListViewDisplayed(true); 
   },
   

   
   • This allows for results to be queried when the user uses text input by voice.

How to build the app using EAS CLI

1. In the terminal install eas-cli using npm install -g eas-cli.
2. Create an account for Expo Dev.
3. Log in with your credentials using eas login.
4. Configure your project using eas build:configure, which creates an eas.json file with configs.
5. Either build the android folder locally with npx expo prebuild or skip this step because it happens automatically in the pipeline.
6. Don't forget to set the LOCAL_IP_ADDRESS variable in the app/index.tsx file. (See Troubleshooting for more info)
7. Add the environmental variables from your .env file in Secrets of your Expo project on the Expo dev page in order to build the app correctly.
8. Start a building pipeline with eas build -p android --profile development.
9. After the pipeline succeeds you can download the .apk on your file via the link from your terminal or you can find it in Builds on the Expo dev page.
10. After installing the app on your physical device you have to start a server with npx expo start.

How to run the app using Expo Go

1. Install Expo Go on your physical device from Google Play for Android or App Store for iOS.

2. Install dependencies by running npm install in the terminal.

3. Set the EXPO_PUBLIC_GOOGLE_API_KEY environment variable in the .env file. This project uses Google APIs, so you need to configure an API Key in your Google Cloud account.

4. Set the EXPO_PUBLIC_TU_USER_AUTH_TOKEN environment variable in the .env file. This is the combination of username:password converted to base64 code. You could use this (online converter) for this purpose.

5. Set the LOCAL_IP_ADDRESS variable in the app/index.tsx file. (See Troubleshooting for more info)

6. For macOS or Linux run npm start to start the app. For Windows run node ./server/server.js and then in a new terminal npx expo start.

7. On your device, open Expo Go and scan the QR code to connect to the development server. When the project starts loading, you see this in the terminal, see the gif below.

   

Build using GitHub Actions

Using GitHub Actions we have created a workflow for building an APK app for Android. It uses Expo Application Services (EAS) and specifically EAS Build, which builds the app binary for the project.

The build command starts the build process on the EAS Build servers by default. Since EAS is a paid service, the free tier is restricted to 30 builds per month. In order to avoid this limited number of builds, the eas build command in the pipeline uses the --local flag. This allows for running the same build process locally on the machine instead of in the Expo's managed environment. Although building locally has some limitations, the local builds do not count to the said free 30 builds per month.

Unfortunately, Expo secrets can only be accessed by EAS cloud builds, and the local builds inside the GitHub runners can't access the Google Geolocation API key we need for the maps. Therefore, we set the EXPO_PUBLIC_GOOGLE_API_KEY variable as a repository secret and include it in the workflow.

The .apk file can be accessed using the link at the bottom of the Upload APK artifact job from the workflow.

Express server

To start the Express server, use the npm start command. This command runs the application in the Metro Builder. By default, the server listens on localhost:3000, so ensure that no other application is using this port. For further configuration, have a look at the official express docs.

To ensure accessibility by the server, place the files in the ./server/data/* directory. These files, containing Maps data, should follow the naming convention MAPS_<identifier>.json (e.g., [email protected]) and must be of type JSON.

Troubleshooting

• If the application doesn't have access to our local express server, first check if the wifi is switched on.

• Next for macOS or Linux users, execute ifconfig en0 in the terminal, which gives you the IP address assigned to the interface. This inet address, e.g. 192.168.1.101 needs to be copied to the LOCAL_IP_ADDRESS variable in the app/index.tsx file.

• For Windows user, execute the ipconfig command and look for the IPv4 Address. Place the IP address in the LOCAL_IP_ADDRESS variable in the app/index.tsx file.

TODO

• add this inet address in separate config file