Habit Tracker - Draftbit Typing CST Test

Habit Tracker — Draftbit Code

Tracks daily habits with checkmarks using visual Draftbit switches and React Native state.

import React, { useState } from 'react';
import { View, Text, Switch } from 'react-native';

export default function HabitTracker() {
	const [habits, setHabits] = useState([
		{ name: 'Drink Water', done: false },
		{ name: 'Exercise', done: false }
	]);

	const toggleHabit = index => {
		const updated = [...habits];
		updated[index].done = !updated[index].done;
		setHabits(updated);
	};

	return (
		<View style={{ padding: 20 }}>
		{habits.map((h, i) => (
		<View key={i} style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 5 }}>
		<Text style={{ flex: 1 }}>{h.name}</Text>
		<Switch value={h.done} onValueChange={() => toggleHabit(i)} />
		</View>
		))}
		</View>
	);
}

Draftbit Language Guide

Draftbit is a no-code and low-code visual builder for creating React Native mobile apps. It allows designers, founders, and developers to visually build screens, components, and navigation flows, while exporting clean React Native code.

More Draftbit Typing Exercises

Practice Other Languages