notesnook/apps/mobile/README.md

<p align="center">
<img style="align:center; border-radius: 20px;" src="/resources/screenshots/mobile.jpg" alt="Notesnook mobile screenshot" width="250" />
</p>

<h1 align="center">Notesnook Mobile</h1>
<h3 align="center">The mobile app is built using React Native, Typescript & Javascript for both iOS & Android.</h3>
<p align="center">
<a href="#developer-guide">Developer guide</a> | <a href="#build-instructions">How to build?</a>
</p>

<p align="center">
    <a href="https://play.google.com/store/apps/details?id=com.streetwriters.notesnook">
    <img alt="Download on Google Play" src="https://play.google.com/intl/en_us/badges/images/badge_new.png" height=43>
    </a>
    <a href="https://apps.apple.com/us/app/notesnook-take-private-notes/id1544027013">
    <img alt="Download on App Store" src="https://user-images.githubusercontent.com/7317008/43209852-4ca39622-904b-11e8-8ce1-cdc3aee76ae9.png" height=43>
    </a>
</p>

## Build instructions

> **Before you start it is recommended that you read [the contributing guidelines](/CONTRIBUTING.md).**

### Setting up development environment

Requirements:

1. [Node.js](https://nodejs.org/en/download/)
2. [git](https://git-scm.com/downloads)
3. NPM (not yarn or pnpm)
4. [React Native](https://reactnative.dev/docs/environment-setup)

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

1. Open the official [environment setup guide here](https://reactnative.dev/docs/environment-setup)
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:

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

# change directory
cd notesnook
```

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

```bash
# this might take a while to complete
npm install
```

### Running the app on Android

[Setup an Android emulator from Android Studio](https://developer.android.com/studio/run/managing-avds) if you haven't already and then run the following command to start the app in the Emulator:

```bash
npm run start:android
```

If you want to run the app on your phone, make sure to [enable USB debugging](https://developer.android.com/studio/debug/dev-options).

### Running the app on iOS

To run the app on iOS:

```bash
# 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:

### 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](https://wix.github.io/Detox/docs/introduction/android-dev-env). 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 iOS simulator, you must be on a Mac with XCode installed.

First install [AppleSimulatorUtils](https://github.com/wix/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.