📝 Notes App

A beautifully designed, gesture-first notes app built with React Native and Expo. Features a refined editorial aesthetic, full dark mode, category filtering, swipe gestures, and animated list interactions.

---

🔗 Links

GitHub Repository	https://github.com/Mohitverma-code7/2-screen
Demo Video	https://youtube.com/shorts/s711avXAL3Y?si=X5DAhrMnCgDElwGr

Replace the links above with your actual GitHub repo and demo video URL.

---

📱 Screenshots

Home (Light)	Home (Dark)	Editor

---

✨ Features

• Swipe right on any note to pin or unpin it
• Swipe left on any note to delete it (with confirmation alert)
• Long press a card to quickly toggle pin
• Category filters — All, Work, Personal, Ideas
• Live search across note titles and bodies with a clear button
• Pinned notes strip — pinned notes surface in a dedicated warm-tinted section
• Color-coded cards — each category has its own tinted background (purple / green / warm)
• Full dark mode — auto-detects system theme, manual toggle in header
• Editor with live word count, category selector, and keyboard-aware layout
• Animated list — cards fade in on mount and animate out on delete
• Safe area aware — respects notch, status bar, and home indicator on all devices

---

🧩 Components

index.tsx — Notes List Screen

Component	Description
TagPill	Small uppercase badge displaying the note's category with per-category tint colors
PinnedStrip	Horizontal row card used in the pinned section; shows icon, title, body preview, and timestamp
SwipeableNoteCard	Full swipeable note card; wraps Swipeable with left (pin) and right (delete) action panels, Pressable tap and long-press, and Reanimated enter/exit animations
NoteCard	Fallback non-swipeable card (kept for reference / web builds)

editor.tsx — Note Editor Screen

Component	Description
CategoryChip	Inline pill chip rendered for each category; highlights active selection with category-specific tint
KeyboardAvoidingView	Wraps the editor so the keyboard never obscures the body TextInput
TouchableWithoutFeedback	Dismisses the keyboard when tapping outside inputs

---

🪝 Hooks Used

Hook	File	Purpose
useState	both	Local state for notes list, query, active category, dark mode, title, body, category, word count
useMemo	index.tsx	Memoizes filtered + sorted notes list and theme object to avoid unnecessary recalculation
useEffect	editor.tsx	Populates title, body, and category from route params once on mount (prevents typing-reset bug)
useRef	both	index.tsx — holds Swipeable ref to close panel after action; editor.tsx — holds TextInput ref to focus body on title submit
useColorScheme	both	Reads the system light/dark preference to set initial theme
useSafeAreaInsets	both	Provides top, bottom inset values for correct padding on notched/gesture-navigation devices
useLocalSearchParams	editor.tsx	Reads note data passed as route params from the list screen

---

📦 Dependencies

npx expo install \
  expo-router \
  react-native-gesture-handler \
  react-native-reanimated \
  react-native-safe-area-context \
  @expo/vector-icons

Add the Reanimated Babel plugin to babel.config.js:

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
};

Wrap your root layout in GestureHandlerRootView (already done inside index.tsx):

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

---

🗂 Project Structure

app/
├── _layout.tsx          # Root layout with GestureHandlerRootView
├── index.tsx            # Notes list screen
└── editor.tsx           # Note editor screen

---

🎨 UI Enhancements

Design System

• Color-coded categories — each category (Work, Personal, Ideas) has a consistent tint applied to chips, cards, and editor backgrounds in both light and dark mode
• Dual theme tokens — LIGHT and DARK objects define all surface, text, border, and accent colors; switching themes is a single boolean flip with no inline ternaries scattered through JSX
• Warm neutral palette — background uses #F5F3EE (light) / #141412 (dark) instead of pure white/black, giving the app a softer, more premium feel

Interactions

• Swipe gestures via react-native-gesture-handler's Swipeable — industry-standard feel identical to iOS Mail and Apple Notes
• Scale press feedback — cards scale to 0.985 on press for tactile response
• Confirmation alert on delete — prevents accidental data loss when swiping to delete
• FAB squircle shape — borderRadius: 18 on a 56×56 button matches modern iOS/Android design language

List & Navigation

• Animated list entries — FadeInDown.springify() on mount, FadeOutLeft on removal, Layout.springify() for smooth reflow when a note is deleted
• Pinned notes elevated visually — pinned notes render in a separate warm-tinted strip above the recent list, not just sorted to the top
• Section labels with count badges — "Pinned" and "Recent" headers with pill-shaped note counts aid quick scanning
• Empty state — icon + message shown when no notes match the search or category filter

Editor

• Live word count — updates on every keystroke via useEffect watching body state
• Return key focuses body — returnKeyType="next" on the title input calls bodyRef.current?.focus() so the user never has to manually tap the body area
• Category selector in editor — switching category in the editor instantly repaints the card background, giving real-time visual feedback

---

🚀 Getting Started

git clone https://github.com/your-username/notes-app.git
cd notes-app
npm install
npx expo start

Scan the QR code with Expo Go on your device, or press i / a to open in simulator.

---

📄 License

MIT © Mohit Kumar