notesnook/apps/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 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 that has 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 have integral role in app functionality, for example, 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 is responsibe for running Sync from anywhere in the app.
  • stores: We use zustand for global state management in the app. There are multiple stores that 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 will need to run the tests to make sure you didn't break anything. We use Detox as the testing framework & the tests can be started as follows: