React Native app for managing tasks, utilizing Expo for development and an SQL database for persistent storage

Prerequisites :

• Basic knowledge of JavaScript and React.
• Node.js and npm installed on your machine.
• Expo CLI installed globally (npm install -g expo-cli).

Step 1 : Setting Up the Project Environment

1. Initialize the Expo Project :

   expo init TaskManagerApp

Choose a template (“blank” for a minimal setup).

2. Navigate into Your Project Directory :

   cd TaskManagerApp

3. Install Dependencies for navigation and other utilities :

   npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

Step 2 : Setting Up the Database

We’ll use SQLite, which is supported out of the box by Expo and suitable for simple applications.

1. Install Expo SQLite :

   expo install expo-sqlite

2. Initialize the Database : Create a new file database.js in your project root. Use it to initialize the database and define functions for interacting with it.

   import * as SQLite from 'expo-sqlite';

   const db = SQLite.openDatabase('tasks.db');

   export const init = () => {
     const promise = new Promise((resolve, reject) => {
       db.transaction((tx) => {
         tx.executeSql(
           `CREATE TABLE IF NOT EXISTS tasks (id INTEGER PRIMARY KEY NOT NULL, title TEXT NOT NULL, done INT NOT NULL);`,
           [],
           () => {
             resolve();
           },
           (_, err) => {
             reject(err);
           }
         );
       });
     });

     return promise;
   };

Step 3: Building the UI

1. Implement Navigation: Set up stack navigation in App.js.

   import React from 'react';
   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';
   import TasksScreen from './screens/TasksScreen'; // Define this screen
   import AddTaskScreen from './screens/AddTaskScreen'; // Define this screen

   const Stack = createStackNavigator();

   function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator initialRouteName="Tasks">
           <Stack.Screen name="Tasks" component={TasksScreen} />
           <Stack.Screen name="AddTask" component={AddTaskScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   }

   export default App;

2. Create Screens: Implement TasksScreen and AddTaskScreen to list tasks and add new tasks, respectively.

Step 4: Interacting with the Database

// Initialize database connection
const db = SQLite.openDatabase('myAppDB', 1);

// Create tasks table if not exists
db.transaction(tx => {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS tasks (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, description TEXT, isDone INTEGER)',
    [],
    () => console.log('Tasks table created'),
    (_, error) => console.error('Error creating tasks table:', error)
  );
});

// Display tasks
db.transaction(tx => {
  tx.executeSql(
    'SELECT * FROM tasks',
    [],
    (_, { rows }) => {
      const tasks = rows._array; // Array of tasks
      // Display tasks in UI
    },
    (_, error) => console.error('Error fetching tasks:', error)
  );
});

// Add new task
const addTask = (title, description) => {
  db.transaction(tx => {
    tx.executeSql(
      'INSERT INTO tasks (title, description, isDone) VALUES (?, ?, 0)',
      [title, description],
      () => console.log('Task added successfully'),
      (_, error) => console.error('Error adding task:', error)
    );
  });
};

// Mark task as done
const markTaskAsDone = taskId => {
  db.transaction(tx => {
    tx.executeSql(
      'UPDATE tasks SET isDone = 1 WHERE id = ?',
      [taskId],
      () => console.log('Task marked as done'),
      (_, error) => console.error('Error marking task as done:', error)
    );
  });
};

// Delete task
const deleteTask = taskId => {
  db.transaction(tx => {
    tx.executeSql(
      'DELETE FROM tasks WHERE id = ?',
      [taskId],
      () => console.log('Task deleted'),
      (_, error) => console.error('Error deleting task:', error)
    );
  });
};

Step 5: Running Your App

1. Start Your Expo Project:

   expo start

2. Test on Devices: Use the Expo Go app on your smartphone to scan the QR code provided by Expo. Alternatively, use an Android or iOS emulator.

Conclusion

This is the basics of creating mobile applications with persistent data storage, navigation between different screens, and the utilization of Expo’s powerful ecosystem for development and testing.