Add new task autofocus feature on task creation

src/components/TodoList.tsx

@@ -8,8 +8,9 @@ import {
 } from "react-native";
 import TaskLine from "./TaskLine";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import { TodoListsAtom } from "@/state";
-import { atom, useAtom } from "jotai";
+import { TodoListsAtom, lastCreatedTaskKeyAtom } from "@/state";
+import { atom, useAtom, useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
 
 interface TodoListProps {
   todoListKey: string;
@@ -20,6 +21,10 @@ const completedTasksContainerIsOpenAtom = atom(false);
 export default function TodoList({ todoListKey }: TodoListProps) {
   const [todoLists, setTodoLists] = useAtom(TodoListsAtom);
 
+  const [justAddedANewTask, setJustAddedANewTask] = useState(false);
+
+  const lastCreatedTaskKey = useAtomValue(lastCreatedTaskKeyAtom);
+
   const tasks =
     todoListKey && todoLists[todoListKey] ? todoLists[todoListKey].tasks : {};
 
@@ -47,6 +52,7 @@ export default function TodoList({ todoListKey }: TodoListProps) {
       type: "AddNewTask",
       todoListKey: todoListKey,
     });
+    setJustAddedANewTask(true);
   };
 
   const completedTasksList = () => {
@@ -63,14 +69,25 @@ export default function TodoList({ todoListKey }: TodoListProps) {
     );
   };
 
+  useEffect(() => {
+    if (justAddedANewTask) {
+      setJustAddedANewTask(false);
+    }
+  }, [justAddedANewTask]);
+
   return (
     <View style={{ flex: 1 }}>
       <ScrollView>
         {countOfNotCompletedTasks > 0 ? (
           Object.keys(tasks).map((key) => {
             if (!tasks[key].isCompleted) {
               return (
-                <TaskLine key={key} todoListKey={todoListKey} taskKey={key} />
+                <TaskLine
+                  key={key}
+                  todoListKey={todoListKey}
+                  taskKey={key}
+                  isAutoFocus={lastCreatedTaskKey === key && justAddedANewTask}
+                />
               );
             }
           })