organize-rn

organize-rn is a React Native client for the organize-backend backend server.

Looking for the app? Check out https://getorganize.app

Screenshots

       

Development Setup

1. Clone the repo from GitHub

   git clone git@github.com:High5Apps/organize-rn.git \
      && cd organize-rn

2. If you don't already have it, install the following software on your development machine. You'll need a Mac for iOS development. Android development can happen on Mac or PC.
   • Xcode (Mac only)
   • CocoaPods (Mac only)
   • Android Studio
   • Node
   • NPM
   • VS Code (consider installing the following extensions)
     • dbaeumer.vscode-eslint
     • waderyan.gitblame
     • pflannery.vscode-versionlens
3. Install the dependencies

   npm install

   For iOS development, you'll also need to install the CocoaPods dependencies

   cd ios && pod install

4. Start the development server

   npm start

5. Start the organize-backend development server

   dc up

6. Install and launch the app

   # On an iOS simulator
   npm run ios
   
   # On an Android emulator
   npm run android

7. Make a change to the TypeScript code, save it, and the app will update live without needing to be reinstalled
   • You only need to reinstall the app if you make changes to native code (Swift/Kotlin/Java/Objective-C) or add/modify any dependencies
   • You don't even need to reinstall the app at the beginning of each development session. You can just launch the simulator or emulator, open the app, and it will automatically connect to the development server and be ready for live code updates

Testing

The following command will ensure that dependencies are compatible, then type check, lint, and unit test the code:

npm test

To run just one part of these checks, use npm run <command> with one of the scripts in package.json.

Unit testing

Jest is used as the unit testing framework. react-test-renderer is used for unit testing components.

You can run a subset of the unit tests with npx jest path/to/directory/or/file. For example:

# Only run tests in the model directory
npx jest __tests__/model/

# Only run tests in the App.test.tsx file
npx jest __tests__/App.test.tsx

To run just a subset of tests in a single file, append .only to the relevant describe in the test file. To run just one test in a single file, append .only to the relevant tests's it. For more options, see the Jest docs.

Installing on a physical device

1. Enable developer mode on your iPhone or Android device
2. Connect your device to your development machine with a physical cable, or setup wireless/remote debugging
   • For wireless debugging on iOS, you need to ensure your device is on the same wireless network as your development machine, and you likely need to disable any VPN on your development machine
   • For wireless debugging on Android, follow these directions. Both machines must be on the same wireless network, but you can likely leave any VPN running on both machines. Running adb devices may help reconnect if the connection between machines drops.
3. There are multiple options to install and run the app:
   • Command line

     # Install for development on Android
     npm run android:device
     
     # Install a release build on Android
     npm run android:device:release
     
     # Install for development on iOS
     npm run ios:device
     
     # Install a release build on iOS
     npm run ios:device:release

   • Xcode
     1. Choose a debug or release build with Product > Scheme > Edit Scheme > Info > Build Configuration > Debug or Release
     2. Click the Play button or cmd+R
   • Android Studio
     1. Choose a debug or release build with Build > Select Build Variant > :app > debug or release
     2. Click the play button or ctrl+R