Question 33673 in React native Question posted in
The official React Native documentation can be found here.

i want do a personal todo list with react native and firebase firestore

I created a todoApp using firebase firestore. Authentication with Firebase I did. But when I add a todo, all other users see that todo. I want to create a personal todo list. my codes:

export default function DailyScreen({ navigation }) {
    const [dailysTodo, setDailysTodo] = useState([]);
    const dailyRef = firebase.firestore().collection('daily');
    const [addDailyTodo, setAddDailyTodo] = useState('');

    useEffect(() => {
        async function check(){
            dailyRef.orderBy('createdAt', 'desc')
            .onSnapshot(
                querySnapShot => {
                    const dailys = []
                    querySnapShot.forEach((doc) => {
                        const { heading } = doc.data()
                        dailysTodo.push({
                            id: doc.id,
                            heading,
                        })
                    })
                    setDailysTodo(dailys)
                }
            )
        }
        check()
    }, [])

    const addDailyPlan = () => {
        if (addDailyTodo && addDailyTodo.length > 0) {
            const timeStamp = firebase.firestore.FieldValue.serverTimestamp();
            const daily = {
                heading: addDaily,
                createdAt: timeStamp
            };
            dailyRef
                .add(daily)
                .then(() => {
                    setAddDailyTodo('');
                    Keyboard.dismiss();
                })
                .catch((error) => {
                    alert(error);
                })
        }
    }
return(
<FlatList
                        data={dailysTodo}
                        renderItem={({ item }) => (
                            <View>
                                // todo items
                            </View>
                        )}
                    />
)

I want every user to see their own todo list when they enter the app. But when a user adds todo, all users see that todo

Tags:

2

Answers


  1. 0

    You’ll need to first associate each todo with a specific user, so that you can then load the todos for a specific user.

    There are two common ways of doing that in Firestore:

    • Store the UID of the user that creates a todo in the document. If you do this, you can load the todos for a specific user with a query, e.g. dailyRef.where('uid', '==', 'theUidValueToLoad').onSnapshot...
    • Store the todos for each specific user in its own subcollection, i.e. /users/$uid/todos. With this you can then load the todos with something like firebase.firestore().collection('users').doc('theUidValueToLoad').collection('todos').onSnapshot...
    Login or Signup to reply.
  2. 0

    In addition to Frank’s answer, note this is a database so you’ll want to secure the data server side via Firebase rules. See https://firebase.google.com/docs/rules

    service <<name>> {
  // Match the resource path.
  match /users/{userId} {
    // Allow the request if the following conditions are true.
    allow read, write: if request.auth.uid == userId;
  }
}

    This answer was mildly assisted by artificial intelligence but I have verified this is correct, researched and added information to make this my own answer and stake my reputation on it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search