BP Passport - Simple for Patients
BP Passport is a native mobile application written in React Native - a JavaScript library that renders native, cross-platform iOS and Android code.
The source code for the project has been written in basic Typescript. This enables the linter to highlight any issues with undefined model properties or non-interfaced methods. Any new files should either be .ts or .tsx files - Typescript's equivalent to Javasctipt's js and jsx files (files with UI rendering code).
Getting Started
Android & iOS Environments
- Follow the React Native getting started guide here. Select the React Native CLI Quickstart tab, there's no Expo required in this project.
- Install dependencies listed - Node, Watchman, JDK.
- Install React Native CLI globally.
-
Install Android Studio
-
Install/update the latest version of Xcode.
-
Install CocoaPods (iOS package management tool):
sudo gem install cocoapods
Project Setup
-
Clone this repository
-
CD to the BP Passport project root, then install package dependencies:
yarn
- CD to
[projectroot]/iosfolder and install the project iOS pod dependencies:
pod install
- CD to
[projectroot]folder and create your own development environment file:
cp .env.development.default .env.development
- Optionally create your own production/release enviroment file:
cp .env.production.default .env.production
- CD to
[projectroot]/android/appfolder and make a copy of thekeystore-placeholder.propertiesfile:
cp keystore-placeholder.properties keystore.properties
NB - you can update the values in the new keystore-placeholder.properties file, if you wish to sign android release builds locally. This file is required in order for the android app to build.
VSCode Environment
-
Install VSCode.
-
CD to
[projectroot]folder and open the project in VSCode:
code .
- With the BP Project open, select the
Extensionsfrom the left side activity bar. VSCode should display any exensions that were enabled for this project. Please search and then add/update the following VSCode extensions:
- ESLint
- Prettier - Code formatter
- React Native Tools
- TSLint
- With the 4 extensions above all enabled for this project, next using VSCode project explorer panel, open the
.vscodefolder at the root. From inside that folder, create a new file namedsettings.jsonand paste the following into your newsettings.jsonfile:
{
"editor.formatOnSave": true,
"javascript.format.enable": false,
"editor.codeActionsOnSave": {
"source.fixAll.tslint": true
}
}
Running the App
During development, it will probably be preferable to run the app directly from VSCode. But VSCode relies on the React Native CLI to build and run both the Android and Xcode projects via the command line. This is not always a reliable option, especially when switching between source code branches with modified package dependencies.
So, to begin with, ensure that both iOS and Android apps can be compiled and run from Android Studio and Xcode.
Running the Android App from Android Studio
-
Open Android Studio
-
Open the Android source project from
[projectroot]/android -
Android uses gradle to manage package dependenices and gradle should start configuring the android project as soon as you open it in Android Studio. This may take a little while the first time.
-
To run the app in debug mode in an Android emulator, you will need at least 1 virtual device. Use Android Studio's Virtual Device Manager to add a new emulator such as a Pixel 2 or 3.
-
Press the 'Run app' green play button to build and run the app on your chosen Android emulator.
Running the iOS App from Xcode
-
CD
[projectroot]/iosand openBPPassport.xcworkspacein Xcode. -
Select whichever iOS simulator you'd like to run the app in and then select the large build and run play button on the top left to compile. Then run the app in the chosen iOS simulator.
Running/Debugging the App from VSCode
Running and debugging directly from VSCode can be a preferable development flow as you have direct access to the console log in your IDE. To set this up:
- CD to
[projectroot]folder and open the project in VSCode:
code .
-
With the BP Project open, select the
Run & Debugicons from the main left side activity bar. -
Select the
create a launch.json file -
Using the
Add Configurationoption, add both of the following run and debug options:
- React Native: Debug iOS
- React Native: Debug Android
-
Save the updated
launch.jsonfile. -
A dropdown should now appear top left that will enable you to run and debug the app in either iOS Simulator or Android Emulator.
Please note that before attempting to debug/run the React Native project from VSCode, you will need to ensure that React Native's metro bundler is not already running in any background terminal window. It if is, close the window!
Switching git branches
Everytime you switch branches, run the following steps:
-
Close any terminal window running metro bundler
-
Close VSCode
-
CD to the BP Passport project root then update package dependencies:
yarn
- CD to
[projectroot]/iosfolder and update the project iOS pods dependencies:
pod install
407 Nov 19, 2022
1 Apr 21, 2022
4 Aug 22, 2022
3 Feb 18, 2022
3k Jan 3, 2023
13.9k Jan 6, 2023
17 Jun 25, 2020
479 Nov 22, 2022
160 Nov 2, 2022
31 Nov 24, 2022
5 Oct 17, 2022
9 Dec 11, 2022
121 Dec 20, 2022
198 Jan 5, 2023
0 Nov 22, 2021
2 Nov 6, 2022
1 Dec 11, 2021
0 Dec 18, 2021
2 Dec 23, 2021