Home Screen - TasKingToDo/TasKing GitHub Wiki

Home Screen

The Home Screen is the central hub of the app and the first screen users interact with after logging in. It merges task management, in-app navigation, XP progression, collaboration support, and access to the Shop in a single dynamic interface.

UI Layout

Section Description
Shop Screen Renders in the top half of the screen. Users can view and interact with shop features like resolution upgrades and items.
Task Sheet Lives in the bottom half. Displays the task list, subtasks, collaboration labels, and allows completion toggles.
Navigation Bar Sits at the bottom. Provides access to Settings, Friends, Stats, Resolution Upgrade, and the Create Task screen.
XP Progress Bar Displays the user’s XP progress and current level in real time.

How It Works

Draggable Middle Bar

  • Controlled using react-native-gesture-handler and react-native-reanimated
  • Supports 3 snap points: Top, Middle, and Bottom
  • Animates using withSpring to snap smoothly
const dragGesture = Gesture.Pan()
  .onStart(() => { startY.value = dragY.value })
  .onUpdate(e => {
    dragY.value = Math.min(Math.max(startY.value + e.translationY, snapPoints.top), snapPoints.bottom);
  })
  .onEnd(() => {
    if (dragY.value < snapPoints.middle * 0.75) dragY.value = withSpring(snapPoints.top);
    else if (dragY.value > snapPoints.middle * 1.25) dragY.value = withSpring(snapPoints.bottom);
    else dragY.value = withSpring(snapPoints.middle);
  });
  • Drag upward to expand the Task Sheet
  • Drag downward to reveal the Shop Screen
  • In the middle, both are partially visible

Task Features

Feature Description
Swipeable Tasks Swipe left to complete, right to delete. Uses Reanimated gestures.
Subtasks Tap a task to view subtasks. Subtasks toggle individually. Completing all subtasks marks the task complete.
Repeat Support Supports simple and advanced repeat types (daily, weekly, monthly, or custom { type, interval })
Sort & Filter Sort tasks by name, date, or created time. Filter to show only shared tasks.
Collaboration Shared tasks show Shared with or Shared by labels. Collaborators can complete or edit based on permission.
In-App Notifications Real-time toasts show shared task events (e.g., completed by collaborator).

XP & Level Progression

Users level up by completing tasks. XP and coin rewards are stored in Firestore and synced in real-time.

const calculateLevel = (xp: number) => {
  let level = 0, xpThreshold = 0, nextThreshold = 20;
  while (xp >= xpThreshold + nextThreshold) {
    xpThreshold += nextThreshold;
    level++;
  }
  return { level, xpThreshold, nextThreshold };
};
  • XP thresholds increase linearly
  • The progress bar updates automatically on completion
  • Shared tasks award 30% bonus XP and coins to both users

XP Progress Bar

Located in the bottom navbar next to the level.

<Progress.Bar
  progress={xpProgress}
  width={150}
  height={30}
  color={colors.accept}
  borderColor={colors.black}
/>
<Text>{Math.round(xpProgress * 100)}%</Text>
  • Visually represents XP progress
  • Updates in real-time via Firestore snapshot listeners

Shop Screen

The ShopScreen is always rendered behind the Task Sheet

  • Appears when the user drags the sheet downward
  • Allows users to purchase upgrades or cosmetics using earned coins
  • Seamlessly integrated without separate navigation

Notifications

Type Description
Preset Reminders Users can schedule reminders 1h, 2h, or 24h before task time
Real-Time Toasts Banners for shared task completion or undoing
Modal Picker Tap the bell icon on a task to open reminder selector 
setTimeout(() => {
  Toast.show({
    type: 'info',
    text1: "Upcoming Task Reminder",
    text2: `${task.name} is due soon!",
    position: 'top'
  });
}, delay);

Navigation Menu (Navbar)

The Navbar floats at the bottom and adjusts visibility based on sheet drag position.

Button Description
Settings Navigates to the Settings Screen
Friends Opens the Friends Screen
Stats Navigates to the Stats Screen
Resolution Upgrade Opens a popup to purchase resolution boosts
Create Task Navigates to the Create Task Screen

Additional Technical Notes

  • Task list is a FlatList powered by real-time Firestore onSnapshot listeners.
  • Task completion updates XP, balance, streaks, and task stats.
  • Bonus logic for collaborators is baked into updateTaskCompletion().
  • Subtask status syncing ensures visual updates happen immediately.
  • Scroll gestures and swipe gestures coexist using simultaneousWithExternalGesture().
Gesture.Pan()
  .simultaneousWithExternalGesture(scrollRef)
⚠️ **GitHub.com Fallback** ⚠️