1. Use noteId defined in editorMessage when saving content, never use tabId since it can point to a different note since a tab can load a different note while a note save message is coming across the bridge. 2. If saving fails and editor saves save payloads in localStorage, add the noteId to them so we know which note the content belongs to. 3. Pending content saves must keep noteId and edit time so when we save them later, they save into the correct note and if the content is newer, we skip saving. 4. Fix the debounce key so cross contamination can never occur in new notes between two tabs.
Notesnook Mobile
The mobile app is built with React Native for both iOS and Android.
Build instructions | Developer guide | E2E tests
Build instructions
Before you start, it is recommended that you read the contributing guidelines.
Setting up the development environment
Requirements:
- Node.js 20+ (the repo is pinned to Node
22.20.0via Volta) - git
npm- React Native environment setup
To run the app locally, first complete React Native native tooling setup:
- Open React Native environment setup
- Select
React Native CLI Quickstart - Select your OS and target platform(s): iOS and/or Android
- Follow the steps listed.
Expo is not used in this project.
Clone the monorepo:
git clone https://github.com/streetwriters/notesnook.git
# change directory
cd notesnook
Install dependencies and bootstrap the mobile workspace:
# this might take a while to complete
npm install
npm run bootstrap -- --scope=mobile
Running the app on Android
Set up an Android emulator from Android Studio (or connect a physical device), then run:
npm run start:android
If you are using a physical device, enable USB debugging.
Running the app on iOS
Install CocoaPods dependencies first, then run the iOS app:
# this might take a while to complete
npm run prepare:ios
npm run start:ios
Useful development commands
# start Metro only
npm run start:metro
# start Re.Pack bundler
npm run start:repack
Developer guide
The mobile app is a mixed TypeScript/JavaScript codebase.
The tech stack
We try to keep the stack as lean as possible:
- React Native
0.82 - React
19 - TypeScript + JavaScript
- Zustand (state management)
- Detox (end-to-end testing)
- libsodium (encryption)
Project structure
Top-level directories in apps/mobile/:
app/: Main React Native app source (components,common,hooks,navigation,screens,services,stores,utils, etc.)android/: Android native projectios/: iOS native projecte2e/: Detox test suite and configpatches/:patch-packagepatchesscripts/: Mobile-specific scripts
Running E2E tests (Detox)
Detox device defaults in this repo:
- Android emulator:
Pixel_5_API_36 - iOS simulator:
iPhone 17 Pro Max
Android
Build and run Android Detox tests:
npm run build:android
npm run test:android
For debug configuration:
npm run build:android:debug
npm run start:metro
npm run test:android:debug
iOS
Build and run iOS Detox tests:
npm run build:ios
npm run test:ios
If simulator tooling is missing, install AppleSimulatorUtils:
brew tap wix/brew
brew install applesimutils
Release commands
Android release helpers:
npm run release:android
npm run release:android:bundle
