Learn DRAFTBIT with Real Code Examples

// Visual components setup in Draftbit
// Example of custom React Native code for adding a todo
import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';

export default function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState('');

    const addTodo = () => {
        if(input.trim()){
        setTodos([...todos, input.trim()]);
        setInput('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput value={input} onChangeText={setInput} placeholder='New Todo' />
        <Button title='Add' onPress={addTodo} />
        <FlatList data={todos} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Demonstrates a simple Draftbit app with a Todo list, adding tasks, and displaying them using visual components and optional custom React Native code.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function ExpenseTracker() {
    const [expenses, setExpenses] = useState([]);
    const [amount, setAmount] = useState('');
    const [desc, setDesc] = useState('');

    const addExpense = () => {
        if(amount && desc){
        setExpenses([...expenses, { amount, desc }]);
        setAmount('');
        setDesc('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Description' value={desc} onChangeText={setDesc} />
        <TextInput placeholder='Amount' keyboardType='numeric' value={amount} onChangeText={setAmount} />
        <Button title='Add Expense' onPress={addExpense} />
        <FlatList data={expenses} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item.desc}: ${item.amount}</Text>} />
        </View>
    );
}

Tracks daily expenses with visual Draftbit forms and stores entries locally using React Native state.

import React, { useState } from 'react';
import { View, TextInput, Button, ScrollView, Text } from 'react-native';

export default function NotesApp() {
    const [note, setNote] = useState('');
    const [notes, setNotes] = useState([]);

    const addNote = () => {
        if(note.trim()){
        setNotes([...notes, note]);
        setNote('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Write a note...' value={note} onChangeText={setNote} />
        <Button title='Add Note' onPress={addNote} />
        <ScrollView>{notes.map((n, i) => <Text key={i}>{n}</Text>)}</ScrollView>
        </View>
    );
}

A simple note-taking app using Draftbit visual input components and local state to store text notes.

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

export default function WeatherApp() {
    const [city, setCity] = useState('');
    const [weather, setWeather] = useState(null);

    const fetchWeather = async () => {
        const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
        const data = await res.json();
        setWeather(data.current);
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Enter City' value={city} onChangeText={setCity} />
        <Button title='Get Weather' onPress={fetchWeather} />
        {weather && <Text>Temp: {weather.temp_c}°C</Text>}
        </View>
    );
}

Fetches weather data using a public API and displays it in a Draftbit app layout.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function FitnessTracker() {
    const [activity, setActivity] = useState('');
    const [activities, setActivities] = useState([]);

    const addActivity = () => {
        if(activity.trim()){
        setActivities([...activities, activity]);
        setActivity('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Workout name' value={activity} onChangeText={setActivity} />
        <Button title='Add Workout' onPress={addActivity} />
        <FlatList data={activities} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Tracks workouts using simple inputs and displays a list of activities added by the user.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function ShoppingList() {
    const [item, setItem] = useState('');
    const [list, setList] = useState([]);

    const addItem = () => {
        if(item.trim()){
        setList([...list, item]);
        setItem('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Add Item' value={item} onChangeText={setItem} />
        <Button title='Add' onPress={addItem} />
        <FlatList data={list} keyExtractor={(i, idx) => idx.toString()} renderItem={({item}) => <Text>{item}</Text>} />
        </View>
    );
}

Creates a shopping list using Draftbit UI components and React Native state hooks.

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>
    );
}

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

import React, { useState } from 'react';
import { View, TextInput, Button, ScrollView, Text } from 'react-native';

export default function RecipeBook() {
    const [title, setTitle] = useState('');
    const [recipes, setRecipes] = useState([]);

    const addRecipe = () => {
        if(title.trim()){
        setRecipes([...recipes, title]);
        setTitle('');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Recipe Name' value={title} onChangeText={setTitle} />
        <Button title='Add Recipe' onPress={addRecipe} />
        <ScrollView>{recipes.map((r, i) => <Text key={i}>{r}</Text>)}</ScrollView>
        </View>
    );
}

Stores simple recipes with ingredients and steps using local state, designed with Draftbit visual cards.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert } from 'react-native';

export default function LoginScreen() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = () => {
        if(email && password){
        Alert.alert('Login Successful', email);
        }else{
        Alert.alert('Please fill all fields');
        }
    };

    return (
        <View style={{ padding: 20 }}>
        <TextInput placeholder='Email' value={email} onChangeText={setEmail} />
        <TextInput placeholder='Password' value={password} secureTextEntry onChangeText={setPassword} />
        <Button title='Login' onPress={handleLogin} />
        </View>
    );
}

Implements a simple login form UI using Draftbit visual inputs and a basic state check.

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

export default function CounterApp() {
    const [count, setCount] = useState(0);

    return (
        <View style={{ padding: 20, alignItems: 'center' }}>
        <Text style={{ fontSize: 24 }}>Count: {count}</Text>
        <Button title='Increment' onPress={() => setCount(count + 1)} />
        <Button title='Decrement' onPress={() => setCount(count - 1)} />
        </View>
    );
}

A simple counter using React Native state hooks, great for Draftbit logic demonstration.