Initial Todo list

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.idea/aws.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="accountSettings">
+    <option name="activeRegion" value="us-east-1" />
+    <option name="recentlyUsedRegions">
+      <list>
+        <option value="us-east-1" />
+      </list>
+    </option>
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/todo.iml" filepath="$PROJECT_DIR$/.idea/todo.iml" />
+    </modules>
+  </component>
+</project>

.idea/todo.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="a21f7701-5e65-4d1d-8051-e12038cf7ff5" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/.env.local" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/aws.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/todo.iml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/components/HomeScreen.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/components/NewListScreen.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/components/Todo.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/components/Todos.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/context/DBcontex.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/firebase.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/root.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/App.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="1lvuK0pUDgzkDK6hKUdftOfLD0w" />
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
+  <component name="ProjectViewState">
+    <option name="autoscrollToSource" value="true" />
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="ASKED_SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="dart.analysis.tool.window.visible" value="false" />
+    <property name="nodejs_package_manager_path" value="yarn" />
+    <property name="ts.external.directory.path" value="C:\Program Files\JetBrains\WebStorm 2020.2.1\plugins\JavaScriptLanguage\jsLanguageServicesImpl\external" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="a21f7701-5e65-4d1d-8051-e12038cf7ff5" name="Default Changelist" comment="" />
+      <created>1608489823654</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1608489823654</updated>
+      <workItem from="1608489830985" duration="1915000" />
+      <workItem from="1608544408253" duration="13607000" />
+      <workItem from="1608570464092" duration="11564000" />
+      <workItem from="1608623502807" duration="5440000" />
+      <workItem from="1608644583562" duration="21575000" />
+      <workItem from="1608717708929" duration="24959000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+    <option name="oldMeFiltersMigrated" value="true" />
+  </component>
+</project>

App.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import {DBProvider} from "./context/DBcontex";
+import {Root} from "./root";
+
+import {LogBox} from 'react-native';
+
+LogBox.ignoreAllLogs();
+
+const App = () => {
+    return (
+        <DBProvider>
+            <Root/>
+        </DBProvider>
+    )
+}
+
+export default App

Readme.md.txt

@@ -0,0 +1,55 @@
+# Todo Lists Native App
+
+A full-stack React Native and Firebase mobile application for managing todo lists.
+
+## Table of Contents
+- [Introduction](#introduction)
+- [Features](#features)
+- [Technologies](#technologies)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Introduction
+The Todo Lists Native App is a mobile application built using React Native and Firebase. It allows users to create and manage their todo lists, with the ability to customize the appearance of each list and perform CRUD (Create, Read, Update, Delete) operations on the todos.
+
+## Features
+- Create and manage multiple todo lists
+- Customize the appearance of each list (e.g., title, color, icon)
+- Add, delete, and toggle the completion status of todos
+- Sync todo lists across devices using Firebase
+
+## Technologies
+- **React Native**: A framework for building native mobile applications using JavaScript and React.
+- **Firebase**: A comprehensive app development platform that provides a suite of tools and services, including a real-time database, authentication, and hosting.
+- **Expo**: A toolchain built around React Native to help build and deploy React Native apps.
+
+## Installation
+1. Clone the repository:
+git clone https://github.com/nichitaa/Todo-Lists-Native-App.git
+2. Navigate to the project directory:
+cd Todo-Lists-Native-App
+3. Install the dependencies:
+npm install
+
+4. Set up Firebase:
+- Create a new Firebase project in the Firebase Console.
+- Enable the Firestore and Authentication services.
+- Add the Firebase configuration details to the `config.js` file in the project.
+5. Start the development server:
+expo start
+
+## Usage
+1. Launch the app on your mobile device or emulator.
+2. Create a new todo list by tapping the "+" button.
+3. Customize the list's appearance by editing the title, color, and icon.
+4. Add, delete, and toggle the completion status of todos within each list.
+5. The todo lists will be automatically synced across devices using Firebase.
+
+## Contributing
+Contributions to the Todo Lists Native App project are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.
+
+## License
+This project is not licensed.
+

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "todo",
+    "slug": "todo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/HomeScreen.js

@@ -0,0 +1,118 @@
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, Modal} from 'react-native';
+import {Ionicons} from '@expo/vector-icons';
+import {TodosModal} from "./Todos";
+import {useDB} from "../context/DBcontex";
+import moment from "moment";
+
+export const Header = () => {
+    return (
+        <View style={{backgroundColor: '#1C2833', paddingTop: 25}}>
+            <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center',}}>
+                <Text style={styles.todo}>Todo</Text>
+                <Text style={styles.list}>List</Text>
+            </View>
+            <View style={{alignSelf: 'flex-end', marginRight: 5}}>
+                <Text style={{color: 'grey'}}>by Jesse</Text>
+            </View>
+        </View>
+    )
+}
+
+export const HomeScreen = () => {
+    const [showModal, setShowModal] = useState(false)
+    const [currentList, setCurrentList] = useState({})
+
+    const {lists, deleteList, loading} = useDB()
+
+    if (loading) {
+        return (
+            <View>
+                <Text>Loading</Text>
+            </View>
+        )
+    }
+
+    const toggleModal = (listData = null) => {
+        setCurrentList(listData)
+        setShowModal(prev => !prev)
+    }
+
+    const onDelete = async (list) => {
+        await deleteList(list)
+    }
+
+
+    const OneListCard = ({item}) => (
+        <TouchableOpacity onPress={() => {toggleModal(item)}}>
+            <View style={[styles.item, {backgroundColor: item.color}]}>
+                <View style={{flex: 1}}>
+                    <Text style={{fontSize: 27, alignSelf: 'center', fontWeight: 'bold'}}>{item.title}</Text>
+                    <View style={{
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        paddingHorizontal: 1,
+                        marginTop: 10}}>
+                        <Text style={{fontSize: 12}}>{moment(item.createdAt.toDate()).calendar()}</Text>
+                    </View>
+                </View>
+                <TouchableOpacity style={{alignItems: 'center', justifyContent: 'center'}}
+                                  onPress={() => onDelete(item)}>
+                    <Ionicons name="trash-outline" size={41} color="#fb634c"/>
+                </TouchableOpacity>
+            </View>
+        </TouchableOpacity>
+    );
+
+    return (
+        <View style={styles.container}>
+            <Modal
+                animationType="slide"
+                visible={showModal}
+                onRequestClose={() => {toggleModal()}}>
+                <TodosModal closeModal={() => toggleModal()} data={currentList}/>
+            </Modal>
+
+            <FlatList
+                style={styles.flatList}
+                data={lists}
+                renderItem={({item}) => <OneListCard item={item}/>}
+                keyExtractor={(item) => item.title}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    item: {
+        flexDirection: 'row',
+        borderRadius: 10,
+        paddingVertical: 12,
+        paddingHorizontal: 5,
+        marginHorizontal: 50,
+        marginTop: 20,
+    },
+    flatList: {},
+    todo: {
+        fontSize: 30,
+        fontWeight: 'bold',
+        color: 'grey'
+    },
+    list: {
+        fontSize: 30,
+        color: '#53abbf'
+    },
+    header: {
+        borderWidth: 2,
+        flexDirection: 'row',
+        marginTop: 20,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#14141c'
+    }
+})
+

components/NewListScreen.js

@@ -0,0 +1,122 @@
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, TextInput, TouchableOpacity, FlatList, Keyboard} from 'react-native';
+import {Ionicons} from "@expo/vector-icons";
+import {useDB} from "../context/DBcontex";
+
+export const NewListScreen = ({navigation}) => {
+    const colors = ["#983b97", "#f7cb22", "#8190ed", "#6078db", "#94604f", "#28594e", "#c66e6b", "#fbfbfb", "#254a77", "#228038", "#857c3c", "#fb6383", "#a56782", "#b1442c", "#e43c5e", "#8da7a5"]
+
+    const [color, setColor] = useState(colors[3])
+    const [listName, setListName] = useState('')
+
+    const {newList} = useDB();
+
+    const submit = async () => {
+        if(listName !== '') {
+            const data = {
+                title: listName,
+                createdAt: new Date(),
+                color: color,
+            }
+            setListName('')
+            setColor(colors[3])
+            Keyboard.dismiss()
+            await newList(data)
+            navigation.goBack()
+        }
+    }
+
+    const OneColor = ({color}) => {
+        return (
+            <TouchableOpacity style={{
+                marginEnd: 10,
+                borderRadius: 10,
+                overflow: 'hidden'
+            }} onPress={() => setColor(color)}>
+                <View style={{backgroundColor: color, width: 70, height: 70}}/>
+            </TouchableOpacity>
+        );
+    }
+
+    const renderItem = ({item}) => (
+        <OneColor color={item}/>
+    );
+
+    return (
+        <View style={styles.container}>
+            <View style={{flex: 1}}>
+                <Text style={styles.header}>Create New TodoList</Text>
+
+                <View style={styles.flatList}>
+                    <FlatList data={colors}
+                              renderItem={renderItem}
+                              keyExtractor={color => color}
+                              showsHorizontalScrollIndicator={false}
+                              horizontal
+                    />
+                </View>
+
+                <View style={[styles.colorSquare, {backgroundColor: color}]}>
+                    <Text style={{fontSize: 20, fontWeight: 'bold'}}>{color}</Text>
+                </View>
+            </View>
+
+            <View style={styles.inputWrapper}>
+                <TextInput
+                    style={[styles.inputText]}
+                    placeholder="Enter the new list name"
+                    placeholderTextColor="grey"
+                    onChangeText={(text) => setListName(text)}
+                    value={listName}/>
+                <TouchableOpacity style={styles.iconButton} onPress={() => submit()}>
+                    <Ionicons name="add-outline" size={41} color="pink"/>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    colorSquare: {
+        borderRadius: 10,
+        width: 350,
+        height: 150,
+        alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    iconButton: {
+      backgroundColor: 'grey',
+    },
+    inputText: {
+        flex: 1,
+        paddingLeft: 10,
+        fontSize: 20,
+        color: '#eae1db'
+    },
+    inputWrapper: {
+        borderWidth: 2,
+        borderRadius: 10,
+        borderColor: 'grey',
+        flexDirection: 'row',
+        marginHorizontal: 30,
+        marginVertical: 10,
+        overflow: 'hidden'
+    },
+    flatList: {
+        marginHorizontal: 30,
+        marginVertical: 40
+    },
+    header: {
+        alignSelf: 'center',
+        fontSize: 30,
+        fontWeight: 'bold',
+        marginTop: 20,
+        color: '#53abbf'
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#14141c'
+    },
+})
+

components/Todo.js

@@ -0,0 +1,70 @@
+import React from "react";
+import {StyleSheet, View, TouchableOpacity, Text} from "react-native";
+import {Ionicons} from "@expo/vector-icons";
+import moment from "moment";
+import {useDB} from "../context/DBcontex";
+
+function Todo({item, color, listId}) {
+
+    const {deleteTodo, toggleTodoCompleted} = useDB()
+
+    const onDelete = async () => {
+        await deleteTodo(listId, item)
+    }
+
+    const toggleCompleted = async () => {
+        await toggleTodoCompleted(listId, item)
+    }
+
+    return (
+        <View style={[styles.container, {backgroundColor: color}]}>
+            <View style={{flexDirection: 'row'}}>
+                <TouchableOpacity style={{alignItems: 'center', justifyContent: 'center'}}
+                                  onPress={() => toggleCompleted()}>
+                    <Ionicons name={item.completed ? "ios-square" : "ios-square-outline"} size={41} color="#47dbb9"/>
+                </TouchableOpacity>
+                <View style={styles.todoInfo}>
+                    <Text
+                        style={[styles.todoTitle, {textDecorationLine: item.completed ? 'line-through' : 'none'}]}>
+                        {item.title}
+                    </Text>
+                    <Text style={styles.todoDate}>{moment(item.createdAt.toDate()).calendar()}</Text>
+                </View>
+                <TouchableOpacity style={{
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }} onPress={() => onDelete()}
+                >
+                    <Ionicons name="trash-outline" size={41} color="#fb634c"/>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 10,
+        borderRadius: 10,
+        padding: 5,
+
+    },
+    todoTitle: {
+        fontSize: 22,
+        flex: 1,
+        alignSelf: 'center'
+    },
+    todoDate: {
+        flex: 1,
+        alignSelf: 'center',
+        fontSize: 10,
+        color: 'white'
+    },
+    todoInfo: {
+        flex: 1,
+        justifyContent: 'space-between',
+        paddingVertical: 5,
+    }
+});
+
+export default Todo;

components/Todos.js

@@ -0,0 +1,97 @@
+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, FlatList, TextInput, Keyboard} from "react-native";
+import {AntDesign, Ionicons} from "@expo/vector-icons"
+import Todo from "./Todo";
+import {useDB} from "../context/DBcontex";
+
+
+export const TodosModal = (props) => {
+
+    const [todo, setTodo] = useState('');
+
+    const {addNewTodo, getCurrentList, currentList, setCurrentList} = useDB();
+
+    const listId = props.data.id;
+
+    useEffect(() => {
+        const fetchList = async () => await getCurrentList(listId)
+        fetchList().catch(error => console.log(error))
+        return () => setCurrentList(null) // run when component will be unmounted
+    }, [])
+
+    const submit = async () => {
+        if(todo !== '') {
+            const data = {
+                completed: false,
+                createdAt: new Date(),
+                title: todo,
+            }
+            await addNewTodo(listId, data)
+            Keyboard.dismiss()
+            setTodo('')
+        }
+    }
+
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity style={{position: 'absolute', top: 24, right: 32}}
+                              onPress={props.closeModal}>
+                <AntDesign name="close" size={24} color="black"/>
+            </TouchableOpacity>
+            <Text style={[styles.listName, {color: props.data.color}]}> List: {props.data.title} </Text>
+
+            <FlatList data={currentList}
+                      renderItem={({item}) => <Todo item={item} color={props.data.color} listId={props.data.id}/>}
+                      keyExtractor={(item) => item.title}
+                      style={styles.list}
+                      showsVerticalScrollIndicator={false}
+            />
+
+            <View style={[styles.inputContainer, {borderColor: props.data.color}]}>
+                <TextInput placeholder="add a new todo"
+                           placeholderTextColor={props.data.color}
+                           style={[styles.input, {color: props.data.color}]}
+                           value={todo}
+                           onChangeText={text => setTodo(text)}/>
+                <TouchableOpacity style={{backgroundColor: props.data.color}} onPress={() => submit()}>
+                    <Ionicons name="add-outline" size={41} color="white"/>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#364a61'
+    },
+    inputContainer: {
+        borderWidth: 2,
+        borderRadius: 10,
+        flexDirection: 'row',
+        marginHorizontal: 20,
+        marginBottom: 10,
+        overflow: 'hidden',
+    },
+    input: {
+        flex: 1,
+        paddingLeft: 10,
+        fontSize: 17,
+        // borderWidth: 2,
+    },
+    list: {
+        flex: 1,
+        // borderWidth: 2,
+        borderColor: 'red',
+        marginHorizontal: 20,
+        marginVertical: 30,
+    },
+    listName: {
+        // borderWidth: 2,
+        fontSize: 30,
+        fontWeight: 'bold',
+        alignSelf: 'center',
+        marginTop: 20
+    }
+})

context/DBcontex.js

@@ -0,0 +1,79 @@
+import React, {useContext, useState, useEffect} from 'react';
+import {db} from "../firebase";
+
+const DBContext = React.createContext();
+
+export const useDB = () => useContext(DBContext);
+
+export const DBProvider = ({children}) => {
+    const [loading, setLoading] = useState()
+    const [lists, setLists] = useState([])
+    const [currentList, setCurrentList] = useState({})
+
+    const getLists = async () => {
+        setLoading(true)
+        return db.collection('lists')
+            .onSnapshot((snapshot) => {
+                setLists(snapshot.docs.map(doc => doc.data()))
+            });
+    }
+
+    const getCurrentList = async (listId) => {
+        const colRef = db.collection('lists').doc(listId).collection('todos')
+        return colRef.onSnapshot((snapshot) => {setCurrentList(prev => snapshot.docs.map(doc => doc.data()))})
+    }
+
+    const newList = async (list) => {
+        const docRef = db.collection('lists').doc()
+        return await docRef.set({...list, id: docRef.id})
+    }
+
+    const deleteList = async (list) => {
+        const docRef = db.collection('lists').doc(list.id)
+        return await docRef.delete()
+    }
+
+    const addNewTodo = async (listId, todo) => {
+        const docRef = db.collection('lists').doc(listId).collection('todos').doc()
+        const data = {...todo, id: docRef.id}
+        return await docRef.set({...data})
+    }
+
+    const deleteTodo = async (listId, todo) => {
+        const docRef = db.collection('lists').doc(listId).collection('todos').doc(todo.id)
+        return await docRef.delete()
+    }
+
+    const toggleTodoCompleted = async (listId, todo) => {
+        const docRef = db.collection('lists').doc(listId).collection('todos').doc(todo.id)
+        await docRef.get().then(async doc => {
+            return await docRef.update({
+                completed: !doc.data().completed
+            })
+        })
+    }
+
+    useEffect(() => {
+        getLists().then(() => {setLoading(false)})
+    }, [])
+
+    const value = {
+        getCurrentList,
+        setCurrentList,
+        currentList,
+        getLists,
+        lists,
+        newList,
+        deleteList,
+        addNewTodo,
+        toggleTodoCompleted,
+        deleteTodo,
+        loading
+    }
+
+    return (
+        <DBContext.Provider value={value}>
+            {children}
+        </DBContext.Provider>
+    );
+}

debug.log

@@ -0,0 +1 @@
+[1222/155357.835:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

firebase.js

@@ -0,0 +1,20 @@
+import firebase from "firebase";
+import '@firebase/firestore'
+
+
+const firebaseConfig = {
+    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+    projectId: "todo-rnf-610c9",
+    storageBucket: "todo-rnf-610c9.appspot.com",
+    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.REACT_APP_FIREBASE_APP_ID
+}
+
+if (!firebase.apps.length) {
+    firebase.initializeApp(firebaseConfig)
+}
+
+const db = firebase.firestore()
+
+export {db}

package.json

@@ -0,0 +1,40 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/bottom-tabs": "^5.11.2",
+    "@react-navigation/drawer": "^5.11.4",
+    "@react-navigation/stack": "^5.12.8",
+    "expo": "~40.0.0",
+    "expo-status-bar": "~1.0.3",
+    "moment": "^2.29.1",
+    "native-base": "^2.15.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-elements": "^3.0.1",
+    "react-native-gesture-handler": "~1.8.0",
+    "react-native-ionicons": "^4.6.5",
+    "react-native-reanimated": "~1.13.0",
+    "react-native-safe-area-context": "3.1.9",
+    "react-native-screens": "~2.15.0",
+    "react-native-web": "~0.13.12",
+    "react-navigation": "^4.4.3"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0",
+    "@builderx/utils": "^0.1.7",
+    "@expo/vector-icons": "^12.0.2",
+    "@react-navigation/native": "^5.8.10",
+    "firebase": "^8.2.1",
+    "react-native-vector-icons": "^7.1.0"
+  },
+  "private": true
+}

root.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {Header, HomeScreen} from "./components/HomeScreen";
+import {NavigationContainer} from "@react-navigation/native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import {NewListScreen} from "./components/NewListScreen";
+import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
+import {useDB} from "./context/DBcontex";
+
+const Tab = createBottomTabNavigator();
+
+
+export const Root = () => {
+
+    const {lists} = useDB();
+
+    return (
+        <>
+            <Header/>
+            <NavigationContainer>
+                <Tab.Navigator
+                    screenOptions={({route}) => ({
+                        tabBarIcon: ({focused, color, size}) => {
+                            let iconName;
+
+                            if (route.name === 'Home') {
+                                iconName = focused
+                                    ? 'home-outline'
+                                    : 'home-outline';
+                            } else if (route.name === 'Add New List') {
+                                iconName = focused
+                                    ? 'duplicate-outline'
+                                    : 'duplicate-outline';
+                            }
+                            // You can return any component that you like here!
+                            return <Ionicons name={iconName} size={size} color={color}/>;
+                        },
+                    })}
+                    tabBarOptions={{
+                        activeTintColor: '#53abbf',
+                        inactiveTintColor: 'grey',
+                        keyboardHidesTabBar: true,
+                        style: {backgroundColor: '#1C2833'}
+                    }}
+                >
+                    <Tab.Screen name="Home" component={HomeScreen} options={{tabBarBadge: lists.length}}/>
+                    <Tab.Screen name="Add New List" component={NewListScreen}/>
+                </Tab.Navigator>
+            </NavigationContainer>
+        </>
+    )
+}