Build Mobile Apps
Using AI

import { useState, useEffect } from 'react';
import { View, FlatList, TouchableOpacity } from 'react-native';
import { supabase } from '@/lib/supabase';

export default function TodoScreen() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');

  useEffect(() => {
    fetchTasks();

    // Real-time subscription
    const subscription = supabase
      .channel('tasks')
      .on('postgres_changes',
        { event: '*', schema: 'public', table: 'tasks' },
        (payload) => fetchTasks()
      )
      .subscribe();

    return () => subscription.unsubscribe();
  }, [filter]);

  const fetchTasks = async () => {
    let query = supabase
      .from('tasks')
      .select('*')
      .order('created_at', { ascending: false });

    if (filter === 'active') query = query.eq('completed', false);
    if (filter === 'completed') query = query.eq('completed', true);

    const { data } = await query;
    setTasks(data || []);
  };

  // ... rest of component
}

This is actual code generated by our AI - production-ready with proper error handling, TypeScript types, and best practices.