Loading page
by embr
A full-featured React Native notes app built with Expo Router, TypeScript, and a context-driven state architecture. It supports nested folders and pages with inline renaming, gesture handling, and safe-area-aware layouts across all screens. Ideal for mobile developers looking for a structured starting point for a document or note-taking app with file-system-style navigation. Licensed under the Tetrees License.
Mobile GR31 is a React Native notes and folder management application built with Expo. It provides a hierarchical workspace where users can organize pages within nested folders, navigate between them, and perform inline editing — all within a clean, native-feeling mobile UI.
RenameDialog) accessible from both the workspace and folder detail screensreact-native-gesture-handler integration at the root levelreact-native-safe-area-contextaccessibilityRole and accessibilityLabel props| Technology | Role |
|---|---|
| TypeScript | Primary language |
| React Native | Mobile UI framework |
| Expo / Expo Router | Navigation and app shell (file-based routing) |
expo-status-bar | Status bar styling |
react-native-gesture-handler | Gesture support |
react-native-safe-area-context | Safe area insets |
Custom NotesContext / useNotes hook | State management for notes, folders, and pages |
app/
_layout.tsx # Root layout with providers and stack navigator
index.tsx # Workspace home screen (root folder view)
folder/[id].tsx # Folder detail screen
page/[id].tsx # Page editor screen (referenced via routing)
components/
icons/ # ChevronLeft, Folder, Page, Pencil, Plus icons
workspace/
RenameDialog.tsx # Modal dialog for renaming folders
WorkspaceList.tsx # List component rendering folders and pages
contexts/
NotesContext.tsx # Context provider for notes state
hooks/
useNotes.ts # Hook exposing notes operations
constants/
theme.ts # Colors, Spacing, Typography, Radii, HEADER_HEIGHT
types/
index.ts # Folder and Page type definitions
npm install -g expo-cli)npm install
npx expo start
npx expo install expo-router expo-status-bar react-native-gesture-handler react-native-safe-area-context
| Route | Description |
|---|---|
/ (index) | Root workspace screen — lists all top-level folders and pages |
/folder/[id] | Folder detail screen — shows child folders and pages for a given folder ID |
/page/[id] | Page editor screen — opens a specific page by ID |
useNotesThe useNotes hook exposes the following interface consumed across screens:
| Method / Property | Description |
|---|---|
folders | Array of all Folder objects |
getChildren(folderId) | Returns { folders, pages } for a given parent folder |
createPage(folderId) | Creates a new page inside a folder, returns the new Page |
createFolder(parentId, name) | Creates a new subfolder |
renameFolder(id, name) | Renames a folder by ID |
renameItem(id, type, name) | Generic rename for folders or pages |
Tetrees License
Spin up an isolated sandbox and run it server-side — no local setup.
The sandbox audition completed and the detected runnable path passed.
This React, React Native mobile app completed archive review. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately.
Deterministic AVCP artifact review
Pipeline avcp-2026-08-04.1 · SHA-256 ac247993b1a5b7f6…
This version-scoped review deterministically inspects the submitted archive for structure, dependencies, documentation, functional source, and common malicious or high-risk signals. Build and test phases are reported as passed only after an isolated sandbox audition. It is not a guarantee of perfect security.
Reviewed Aug 4, 2026
The full install guide and integration prompts unlock after purchase.
Push this product straight into your AI IDE, web builder or cloud IDE.
Download your licensed source snapshot from the library, then follow the setup guide in your workspace.
26 ratings
This is a keeper. Used this mobile template to build my app and it cut days off the build. Minor tweaks needed for my use case but nothing broke.
Worth every point. As someone who builds these all day, no spaghetti — the folder layout is sane. Support answered my question fast.
Saved me a ton of time. Dropped this mobile template straight into the app; examples matched the actual API, which is rare. Would buy from this seller again.
Genuinely impressed. Used "Productivity Note Management App" to build my app and it cut days off the build.
Rock solid so far. Picked up "Productivity Note Management App" for a client app — Components are cleanly separated and easy to extend. Highly recommend.
Punches well above its price. Dropped this mobile template straight into the app; the README covered every config I needed.
Dropped it into my stack and it just worked. Dropped this mobile template straight into the app; even the tricky env setup was explained well.
Saved me a ton of time. Dropped this mobile template straight into the app; even the tricky env setup was explained well. Already using it in production.
This is a keeper. Dropped "Productivity Note Management App" straight into the app; the README covered every config I needed. Five stars, would recommend to my team.
Genuinely impressed. Used this mobile template to build my app and it cut days off the build. Five stars, would recommend to my team.
Sign in to join the discussion
Loading discussion…