mobile

Notesnook Mobile

The mobile app is built using React Native, Typescript & Javascript for both iOS & Android.

Developer guide | How to build?

Build instructions

Before you start, it is recommended that you read the contributing guidelines.

Setting up the development environment

Requirements:

1. Node.js
2. git
3. NPM (not yarn or pnpm)
4. React Native

To run the app locally, you will need to setup React Native on your system:

1. Open the official environment setup guide here
2. Select React Native CLI Quickstart
3. Select your OS & the platform to run the app on (iOS or Android)
4. Follow the steps listed.

Please keep in mind that Expo is not supported.

Once you have completed the setup, the first step is to clone the monorepo:

git clone https://github.com/streetwriters/notesnook.git

# change directory
cd notesnook

Once you are inside the ./notesnook directory, run the preparation step:

# this might take a while to complete
npm install

Running the app on Android

Setup an Android emulator from Android Studio if you haven't already, and then run the following command to start the app in the Emulator:

npm run start:android

If you want to run the app on your phone, make sure to enable USB debugging.

Running the app on iOS

To run the app on iOS:

# this might take a while to complete
npm run prepare:ios

npm run start:ios

Developer guide

This project is in a transition state between Javascript & Typescript. We are gradually porting everything over to Typescript, so if you can help with that, it'd be great!

The tech stack

We try to keep the stack as lean as possible:

1. React Native
2. Typescript/Javascript
3. Zustand: State management
4. Detox: Runs all our e2e tests
5. React Native MMKV: Database & persistence
6. libsodium: Encryption

Project structure

The app codebase is distributed over two primary directories. native/ and app/.

• native/: Includes android/ and ios/ folders and everything related to react native core functionality like bundling, development, and packaging. Any react-native dependency with native code, i.e., android & ios folders, is installed here.

• app/: Includes all the app code other than the native part. All JS-only dependencies are installed here.

  • components/: Each component serves a specific purpose in the app UI. For example, the Paragraph component is used to render paragraphs in the app, and a Header component is used to render a header on all screens.
  • common/: Features that are integral to the app's functionality. For example, the notesnook core is initialized here.
  • hooks/: Hooks for different app logic
  • navigation/: Includes app navigation-specific code. Here the app navigation, editor & side menu are rendered side by side in fluid tabs.
  • screens: Navigator screens.
  • services: Parts of code that do a specific function. For example, the sync service runs Sync from anywhere in the app.
  • stores: We use zustand for global state management in the app. Multiple stores provide the state for different parts of the app.
  • utils: General purpose stuff such as constant values, utility functions, etc.

There are several other folders at the root:

• share/: Code for the iOS Share Extension and Android widget.
• e2e/: Detox End to end tests
• patches/: Patches for various react native dependencies.

Running the tests

When you are done making the required changes, you must run the tests to ensure you didn't break anything. We use Detox as the testing framework & the tests can be started as follows:

Android

To run the tests on Android, you will need to create an emulator device on your system:

$ANDROID_HOME/tools/bin/avdmanager create avd -n Pixel_5_API_31 -d pixel --package "system-images;android-31;default;x86_64"

If you face problems, follow the detailed guide in Detox documentation. Keep the emulator name set to Pixel_5_API_31.

Once you have created an emulator device, build the Android apks:

npm run build:android

Finally, run the tests:

npm run test:android

iOS

To run e2e tests on the iOS simulator, you must be on a Mac with XCode installed.

First, install AppleSimulatorUtils:

brew tap wix/brew
brew install applesimutils

Now build the iOS app for testing:

npm run build:ios

Finally, run the tests:

npm run test:ios

All tests on iOS are configured to run on iPhone 8 simulator.