A modern note-taking app with an elegant dark theme
Umbra (Latin for "shadow") — your personal space for thoughts, ideas, and notes in the dark.
- Full CRUD Operations — Create, read, update, and delete notes with ease
- 7 Categories — Personal, Work, Ideas, To-Do, Journal, Study, Other
- 10 Note Colors — Customize your notes with a palette of colors
- 5 Font Options — Choose from Inter, Poppins, Manrope, Merriweather, or System default
- Rich Search — Search notes by title and content instantly
- Category Filtering — Filter and organize notes by category
| Feature | Description |
|---|---|
| 📌 Pin | Pin important notes to the top |
| ⭐ Favorite | Mark notes as favorites |
| 📦 Archive | Archive notes you don't need |
| 🔒 Lock | Secure notes with biometric authentication (Face ID / Fingerprint) |
- Statistics Overview — Total notes, favorites, pinned items, and word count
- Category Distribution — Visual breakdown of notes per category
- Quick Actions — Fast access to favorites and pinned notes
| Theme | Description |
|---|---|
| Obsidian | Deep black background — the darkest theme |
| Carbon | Sleek dark gray with bright accents |
| Charcoal | Warm dark tone for comfortable reading |
| Slate | Blue-tinged dark for a cooler aesthetic |
- 📄 PDF Export — Export any note to a formatted PDF document
- 🔐 Biometric Auth — Lock individual notes with Face ID or fingerprint
- 🔔 Notifications — Set reminders for important notes
- 📤 Sharing — Share notes directly from the app
| Home Screen | Dashboard | Note Detail | Editor |
|---|---|---|---|
| Browse & search notes | View statistics | Read & manage notes | Create & edit notes |
- Node.js >= 18.x
- npm or yarn
- Expo CLI (
npm install -g expo-cli) - Expo Go app on your mobile device (iOS/Android) for testing
# Clone the repository
git clone https://github.com/IKetutWidiyane/umbra_notes.git
cd umbra-notes
# Install dependencies
npm install
# Start the development server
npm start
# Or launch directly on a specific platform
npm run android
npm run ios
npm run webumbra-notes/
├── assets/ # Static assets (icons, splash screen)
├── src/
│ ├── components/
│ │ ├── common/ # Reusable components
│ │ │ ├── CategoryBadge.tsx # Category badge with icon
│ │ │ ├── EmptyState.tsx # Empty state placeholder
│ │ │ ├── FAB.tsx # Floating Action Button
│ │ │ ├── Icon.tsx # Icon wrapper component
│ │ │ ├── LoadingIndicator.tsx # Loading spinner
│ │ │ ├── NoteCard.tsx # Note preview card
│ │ │ └── SearchBar.tsx # Search input with clear button
│ │ ├── dashboard/ # Dashboard-specific components
│ │ │ └── StatsCard.tsx # Statistics card
│ │ └── note/ # Note-specific components
│ │ └── NoteEditor.tsx # Full note editor
│ ├── constants/ # App constants
│ │ ├── categories.ts # Note categories definition
│ │ ├── colors.ts # Color palette & themes
│ │ ├── fonts.ts # Font family configurations
│ │ └── themes.ts # Theme management
│ ├── database/ # Data layer
│ │ ├── categoryRepository.ts # Category CRUD operations
│ │ ├── noteRepository.ts # Note CRUD operations
│ │ ├── sqlite.ts # SQLite database initialization
│ │ ├── tagRepository.ts # Tag CRUD operations
│ │ └── webDatabase.ts # Web-compatible database fallback
│ ├── hooks/ # Custom React hooks
│ │ ├── useNotes.ts # Note management hook
│ │ └── useTheme.ts # Theme management hook
│ ├── navigation/ # Navigation configuration
│ │ └── AppNavigator.tsx # Bottom tabs & stack navigator
│ ├── screens/ # Screen components
│ │ ├── CreateNoteScreen.tsx # Create new note
│ │ ├── DashboardScreen.tsx # Statistics dashboard
│ │ ├── EditNoteScreen.tsx # Edit existing note
│ │ ├── HomeScreen.tsx # Main notes list
│ │ └── NoteDetailScreen.tsx # Note detail view
│ ├── services/ # Service layer
│ │ ├── biometricService.ts # Biometric authentication
│ │ ├── notificationService.ts # Push & local notifications
│ │ └── pdfService.ts # PDF generation & export
│ ├── store/ # State management (Zustand)
│ │ ├── noteStore.ts # Notes state & actions
│ │ ├── statisticsStore.ts # Statistics state
│ │ └── themeStore.ts # Theme state
│ ├── types/ # TypeScript type definitions
│ │ ├── Category.ts # Category type
│ │ ├── Note.ts # Note type
│ │ └── Tag.ts # Tag type
│ └── utils/ # Utility functions
│ ├── dateUtils.ts # Date formatting & relative time
│ ├── idGenerator.ts # Unique ID generation
│ └── noteUtils.ts # Note filtering & sorting helpers
├── App.tsx # Application entry point
├── app.json # Expo configuration
├── tailwind.config.js # Tailwind CSS / NativeWind config
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies & scripts
| Technology | Purpose |
|---|---|
| React Native (0.74.0) | Cross-platform mobile UI framework |
| Expo (~51.0.0) | Development platform & toolchain |
| TypeScript (5.1.3) | Type-safe JavaScript |
| NativeWind (2.0.11) | Tailwind CSS for React Native |
| Zustand (4.5.0) | Lightweight state management |
| Expo SQLite (~14.0.0) | Local on-device database |
| React Navigation (6.x) | Screen navigation (tabs + stack) |
| React Native Chart Kit | Dashboard statistics visualization |
| React Native Linear Gradient | Smooth gradient effects |
| Expo Local Authentication | Biometric security (Face ID / Fingerprint) |
| Expo Notifications | Local and push notifications |
| Expo Print / Expo Sharing | PDF export and file sharing |
CREATE TABLE notes (
id TEXT PRIMARY KEY,
title TEXT NOT NULL,
content TEXT NOT NULL,
category TEXT NOT NULL,
color TEXT NOT NULL,
font TEXT NOT NULL,
pinned INTEGER DEFAULT 0,
favorite INTEGER DEFAULT 0,
archived INTEGER DEFAULT 0,
locked INTEGER DEFAULT 0,
reminder TEXT,
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL
);CREATE TABLE tags (
id TEXT PRIMARY KEY,
note_id TEXT NOT NULL,
tag_name TEXT NOT NULL,
FOREIGN KEY (note_id) REFERENCES notes (id) ON DELETE CASCADE
);const {
notes, // Note[] — All notes
loading, // boolean — Loading state
error, // string | null — Error message
createNote, // (data: CreateNoteDTO) => Promise<void>
editNote, // (id: string, data: EditNoteDTO) => Promise<void>
removeNote, // (id: string) => Promise<void>
toggleFavorite, // (id: string) => Promise<void>
togglePin, // (id: string) => Promise<void>
toggleArchive, // (id: string) => Promise<void>
searchNotes, // (query: string) => Promise<void>
} = useNotes();const {
colors, // ThemeColors — Current theme color object
setTheme, // (theme: ThemeType) => void
isDark, // boolean — Always true (dark-only app)
} = useTheme();Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the ISC License — see the LICENSE file for details.
- Built with Expo and React Native
- Styled with NativeWind (Tailwind CSS)
- Icons from @expo/vector-icons
- State management by Zustand
Made with ❤️ by IKetutWidiyane