Skip to content

This React Native iOS/Android app lets you record a cat/dog daily respiratory rate to get better long-term medical care (some heart and lung diseases, e.g. cat's HCM), sharing record permission OK



Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


It has only been developed on Mac. However Windows and Linux should work

Features, Possible feature backlog, Screenshots

See the wiki,

app store link

Android store (beta):


UI components

It mainly uses

Library Version and environment requirement

The development was setup on 10.12 and has been upgraded to 10.13 with Xcode 9 and latest React version. 10.12 & 10.11 is not tested for the latest code.

  • macOS: 10.13.5 (High Sierra)
  • Xcode: 9.4 (Its version may affect the versions about React Native and some native npm library)
  • Android Studio: 3.1
  • Gradle version: 4.1
  • Android Gradle plugin version: 3.0.1
  • React Native: 0.55.4 (from v0.49, a breaking change is, there is no more index.Android.js and index.iOS.js, only index.js)
  • React: 16.3.1 (Its version will affect - native-base and react-navigation)
  • native-base: 2.4.5
  • react-navigation: 2.0.4.
  • react-native-fbsdk: 0.7.0
  • FacebookSDK-iOS (need manually download): 4.33.0
  • FacebookSDK-Android: 4.33.0
  • Python: 2.7 (Some native npm libraries need Python to build)

(optional) Create your Firebase project if you are not using this project's Firebase project


  1. Create a Firebase project in the Firebase console
  2. Authentication -> Enable Facebook. Then record Oauth redirect URI for the following Facebook setting.
  3. Click Add Firebase to your web app to get its config information.

Setup Firebase config

Firebase web console config

  1. Create a project, then choose Realtime Database.
  2. Enable Facebook & Email login in Authentication.
  3. Change Database rule as the following
        "rules": {
            ".read": "auth != null",
            ".write": "auth != null",

Change the fields of firebaseConfig.js:

apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>",
databaseURL: "https://<DATABASE_NAME>",
storageBucket: "<BUCKET>",
messagingSenderId: "<SENDER_ID>",



Node 10 can not be used since one of dependent package, grpc will fail to install

It seems that firebae 5.0.4 will let Android built app can not start (Objects are not valid as a React child) but "debug JS remotely" works

It seems that if Android Gradle upgrades to 3.1.3 from 3.0.1 and gradle to 4.4 from 4.1, Android Studio will fail to build. (react-native run-android is OK)


Summary Step:

  1. install homebrew from (terminal: type brew to check if you have)
  2. brew install node (or you can install Node from, in your terminal, type node --version to check your version, should use Node 8 or newer)
  3. brew install watchman
  4. npm install -g react-native-cli
  5. install Xcode 9 and its command line tools, follow
  6. git clone this project,
  7. cd into this project folder, npm install
  8. (optional) node node_modules/native-base/ejectTheme.js (native-base)
  9. react-native link (required by native-base, react-native-vector-icons, react-native-fbsdk, react-native-svg)

Download Facebook SDK on iOS


Download Facebook SDK and uncompress it to ~/Documents/FacebookSDK

(optional) Config Facebook project on Facebook site and iOS project if you are not using this project's Facebook application settings

Follow this guide:


  1. On, after adding Facebook login in your Facebook Application, you need to setup OAuth Redirect URI gotten from Firebase.

How to run in on iDevice simulator

  1. in project folder, npm run ios or react-native run-ios.

How to run on real iPhone


Start from xcode 7, no need paid developer account to run on real device !! Guide:

Android + Mac (will complement later)

Keypoint to setup Facebook:

  1. Follow
  2. Need a development key hash for the development environment of each person who works on your app (cover in 1.). Release key is needed, too. (This release key is to authorize to use Facebook, not Android release key)
  3. Enable single sign

Register test users or developers/testers on Facebook developer site

Only the Facebook accounts which are registered on Facebook developer site can login successfully.

Tips on Android

You need to launch your Android emulator (Android Virtual Device) first, then npm run android to install and run. The default React Native command will not launch Android emulator automatically.

You can use the following ways to launch emulators

  1. Android Studio
  2. In terminal, type emulator @YOUR_VIRTUAL_DEIVCE & or change the VIRTUAL_DEIVCE name in npm script (qemu) then you can type npm run qemu in start your emuator..

It is possible to directly use Android Studio to launch and debug. In this case, you may encounter Unable to load script from assets '', the relative discussion:

How to debug

Follow to have remote JS debugging. You can setup breakpoint on Nuclide or chrome debugger.

Debug React Widget

  1. Use Nuclide's "React Native Inspector".
  2. Use (which also includes redux-devtoolsy). p.s. And you can not use it to debug react widget and use http://localhost:8081/debugger-ui to see JavaScript logs at the same time.
  3. Standalone react-devtools

Debug Redux supplies a way to use redux server to get redux'store. It needs

!! [201806 update] Just use react-native-debugger and it works. The code already set up the according redux store part (same setting as remote-redux-devtools) !!

!! [201712 update] remote-redux-devtools-on-debugger is not compatible with the latest React v0.51 and is removed from this project !!

  1. modify your code. follow or to setup. I tried the latter's remote-redux-devtools's setting and used its local redux server and integrated react debugging for react native.
  2. prepare a local redux server (localhost) or a WAN remote server.
  3. Then just use browser to see the redux'store (http://localhost:8000) or use specific web page/app to Redux's store.

You can use remote-redux-devtools' guide to prepare your own local server.

Or follow to cover the above 1~3. It comes with a local redux server and also integrates redux with react debugger page. So just use http://localhost:8081/debugger-ui to see React's log and Redux's store at the same time.

Offline build on Devices

offline means you can run this app without any dev servers/environment/Mac.


  1. Choose maolife-release scheme.
  2. Connect your iPhone to Mac.
  3. Build

possible step: only extra run npm run ios-offline-jsbundle before build step if you see main.jsbundle does not exist and build fail.


  1. connect your Android device to Mac.
  2. use npm run android-release to build

possible step: only extra run npm run android-offline-jsbundle before build step if you see unable to load script from assets ' bundle' and build fail.



  1. Choose maolife-release scheme.
  2. Product -> Archive


  1. cd android
  2. ./gradlew assembleRelease


This React Native iOS/Android app lets you record a cat/dog daily respiratory rate to get better long-term medical care (some heart and lung diseases, e.g. cat's HCM), sharing record permission OK








No packages published