Set Up Firebase

First, we need to set up Firebase for our project. If you haven’t already:

1. Go to the Firebase Console.
2. Create a new project.
3. Enable Firestore and Authentication (Email/Password method).
4. Add your app (iOS/Android) and follow the instructions to set it up.

Install Firebase SDK

In your project directory, install the Firebase SDK:

bashCopy codenpm install firebase

Step 2: Set Up Firebase Configuration

Create a new file called firebaseConfig.js in your project directory and add your Firebase configuration:

javascriptCopy code// firebaseConfig.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

Make sure to replace the placeholder values with your actual Firebase project details.

Step 3: User Authentication

Add Authentication Functions

Update App.js to include authentication functions:

javascriptCopy codeimport React, { useEffect, useState } from 'react';
import { StyleSheet, View, FlatList, Alert } from 'react-native';
import { Provider as PaperProvider, TextInput, Button, List, Appbar } from 'react-native-paper';
import { db, auth } from './firebaseConfig'; // Import Firebase
import { signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
import { collection, addDoc, getDocs } from 'firebase/firestore';

const App = () => {
  const [items, setItems] = useState([]);
  const [textInput, setTextInput] = useState('');
  const [editIndex, setEditIndex] = useState(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(currentUser => {
      setUser(currentUser);
      if (currentUser) {
        loadItems(currentUser.uid);
      }
    });
    return () => unsubscribe();
  }, []);

  const loadItems = async (userId) => {
    const querySnapshot = await getDocs(collection(db, userId));
    const loadedItems = querySnapshot.docs.map(doc => ({ key: doc.id, ...doc.data() }));
    setItems(loadedItems);
  };

  const addItem = async () => {
    if (textInput.trim() && user) {
      const newItem = { text: textInput, completed: false };
      const docRef = await addDoc(collection(db, user.uid), newItem);
      setItems([...items, { key: docRef.id, ...newItem }]);
      setTextInput('');
    }
  };

  const register = async () => {
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      setEmail('');
      setPassword('');
    } catch (error) {
      console.error(error);
    }
  };

  const login = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      setEmail('');
      setPassword('');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <PaperProvider>
      <Appbar.Header>
        <Appbar.Content title="My Item List" />
      </Appbar.Header>
      <View style={styles.container}>
        {user ? (
          <>
            <TextInput
              label="Add or edit an item"
              value={textInput}
              onChangeText={setTextInput}
              style={styles.input}
            />
            <Button mode="contained" onPress={addItem}>Add Item</Button>
            <FlatList
              data={items}
              renderItem={({ item }) => (
                <List.Item
                  title={item.text}
                  onPress={() => toggleCompletion(item)}
                  right={props => (
                    <Button onPress={() => startEditing(item)}>Edit</Button>
                  )}
                  onLongPress={() => confirmDelete(item)}
                />
              )}
              keyExtractor={(item) => item.key}
            />
          </>
        ) : (
          <>
            <TextInput label="Email" value={email} onChangeText={setEmail} />
            <TextInput label="Password" value={password} secureTextEntry onChangeText={setPassword} />
            <Button mode="contained" onPress={register}>Register</Button>
            <Button mode="outlined" onPress={login}>Login</Button>
          </>
        )}
      </View>
    </PaperProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  input: {
    marginBottom: 10,
  },
});

export default App;