How can i create the missing app entry for SQL light expo?

Question

Every time I am entering something with SQL light in my Expo app I receive the error App entry not found:Error image I really don't understand the problem in my code. If I add some SQL to my code:

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import styles from './MealAddScreenStyle';

const MealAddScreen = () => {
    const [ingredientName, setIngredientName] = useState('');
    const [ingredientQuantity, setIngredientQuantity] = useState('');
    const [ingredients, setIngredients] = useState([]);
    const [steps, setSteps] = useState([]);
    const [stepText, setStepText] = useState('');
    const [recipeName, setRecipeName] = useState('');
    const [preparationTime, setPreparationTime] = useState('');
    const [difficultyLevel, setDifficultyLevel] = useState('Low');

    const navigation = useNavigation();

    // Add a new ingredient row
    const addIngredient = () => {
        if (ingredientName.trim() && ingredientQuantity.trim()) {
            setIngredients([...ingredients, { id: Date.now().toString(), name: ingredientName, quantity: ingredientQuantity }]);
            setIngredientName('');
            setIngredientQuantity('');
        }
    };

    // Add a new step row
    const addStep = () => {
        if (stepText.trim()) {
            setSteps([...steps, { id: Date.now().toString(), text: stepText }]);
            setStepText('');
        }
    };

    // Delete ingredient or step
    const deleteIngredient = (index) => setIngredients(ingredients.filter((_, i) => i !== index));
    const deleteStep = (index) => setSteps(steps.filter((_, i) => i !== index));

    return (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
            <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                style={styles.container}
                keyboardVerticalOffset={100}
            >
                <ScrollView>
                    <View style={styles.headerContainer}>
                        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
                            <FontAwesome name="arrow-left" size={24} color="black" />
                        </TouchableOpacity>
                        <Text style={styles.header}>Enter recipe</Text>
                    </View>

                    {/* Recipe Name */}
                    <View style={styles.inlineText}>
                        <Text style={styles.boldText}>Recipe:</Text>
                        <TextInput
                            placeholder="Enter Recipe Name"
                            value={recipeName}
                            onChangeText={setRecipeName}
                            style={styles.textInput}
                        />
                    </View>
                    <View style={styles.separatorLine} />

                    {/* Preparation Time */}
                    <View style={styles.inlineText}>
                        <Text style={styles.boldText}>Preparation Time:</Text>
                        <TextInput
                            placeholder="e.g., 30 minutes"
                            value={preparationTime}
                            onChangeText={setPreparationTime}
                            style={styles.textInput}
                        />
                    </View>
                    <View style={styles.separatorLine} />

                    {/* Difficulty Level */}
                    <Text style={styles.boldText}>Difficulty Level:</Text>
                    <View style={styles.row}>
                        {['Low', 'Medium', 'Hard'].map((level) => (
                            <TouchableOpacity 
                                key={level} 
                                onPress={() => setDifficultyLevel(level)} 
                                style={[styles.pickerButton, { backgroundColor: difficultyLevel === level ? '#ddd' : '#fff' }]}>
                                <Text style={styles.pickerText}>{level}</Text>
                            </TouchableOpacity>
                        ))}
                    </View>
                    <View style={styles.separatorLine} />

                    {/* Ingredients */}
                    <Text style={styles.boldText}>Ingredients:</Text>
                    {ingredients.map((ingredient, index) => (
                        <View key={ingredient.id} style={styles.row}>
                            <TextInput
                                placeholder="Ingredient Name"
                                value={ingredient.name}
                                onChangeText={(text) => {
                                    const updatedIngredients = [...ingredients];
                                    updatedIngredients[index].name = text;
                                    setIngredients(updatedIngredients);
                                }}
                                style={[styles.textInput, styles.ingredientInput]}
                            />
                            <TextInput
                                placeholder="Quantity"
                                value={ingredient.quantity}
                                onChangeText={(text) => {
                                    const updatedIngredients = [...ingredients];
                                    updatedIngredients[index].quantity = text;
                                    setIngredients(updatedIngredients);
                                }}
                                style={[styles.textInput, styles.quantityInput]}
                            />
                            <TouchableOpacity onPress={() => deleteIngredient(index)}>
                                <FontAwesome name="trash" size={24} color="black" />
                            </TouchableOpacity>
                        </View>
                    ))}
                    {/* Add Ingredient */}
                    <View style={styles.row}>
                        <TextInput
                            placeholder="Ingredient Name"
                            value={ingredientName}
                            onChangeText={setIngredientName}
                            style={[styles.textInput, styles.ingredientInput]}
                        />
                        <TextInput
                            placeholder="Quantity"
                            value={ingredientQuantity}
                            onChangeText={setIngredientQuantity}
                            style={[styles.textInput, styles.quantityInput]}
                        />
                        <TouchableOpacity onPress={addIngredient}>
                            <FontAwesome name="plus" size={24} color="black" />
                        </TouchableOpacity>
                    </View>
                    <View style={styles.separatorLine} />

                    {/* Steps */}
                    <Text style={styles.boldText}>Steps:</Text>
                    {steps.map((step, index) => (
                        <View key={step.id} style={styles.row}>
                            <Text style={styles.stepNumber}>{index + 1}.</Text>
                            <TextInput
                                placeholder={`Step ${index + 1} Description`}
                                value={step.text}
                                onChangeText={(text) => {
                                    const updatedSteps = [...steps];
                                    updatedSteps[index].text = text;
                                    setSteps(updatedSteps);
                                }}
                                style={[styles.textInput, styles.stepInput]}
                                multiline={true}
                            />
                            <TouchableOpacity onPress={() => deleteStep(index)}>
                                <FontAwesome name="trash" size={24} color="black" />
                            </TouchableOpacity>
                        </View>
                    ))}
                    {/* Add Step */}
                    <View style={styles.row}>
                        <Text style={styles.stepNumber}>{steps.length + 1}.</Text>
                        <TextInput
                            placeholder="Step Description"
                            value={stepText}
                            onChangeText={setStepText}
                            style={[styles.textInput, styles.stepInput]}
                            multiline={true}
                        />
                        <TouchableOpacity onPress={addStep}>
                            <FontAwesome name="plus" size={24} color="black" />
                        </TouchableOpacity>
                    </View>
                    <View style={styles.separatorLine} />

                    <TouchableOpacity style={styles.addButton}>
                        <Text style={styles.addButtonText}>Add recipe</Text>
                    </TouchableOpacity>
                </ScrollView>
            </KeyboardAvoidingView>
        </TouchableWithoutFeedback>
    );
};

export default MealAddScreen;

automatically the error is there. I tried that:

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, Alert, ScrollView } from 'react-native';
import * as SQLite from 'expo-sqlite';

// Open the SQLite database (this creates the file if it doesn't exist)
const db = SQLite.openDatabase('recipes.db');

const MealAddScreen = () => {
  const [recipeName, setRecipeName] = useState('');
  const [preparationTime, setPreparationTime] = useState('');
  const [difficultyLevel, setDifficultyLevel] = useState('Low');
  const [ingredients, setIngredients] = useState([]);
  const [steps, setSteps] = useState([]);
  const [recipeList, setRecipeList] = useState([]);

  // Function to initialize the database and create tables (async)
  const initializeDatabase = async () => {
    try {
      await db.execAsync(`
        CREATE TABLE IF NOT EXISTS recipes (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          recipeName TEXT,
          preparationTime TEXT,
          difficultyLevel TEXT
        );
      `);

      await db.execAsync(`
        CREATE TABLE IF NOT EXISTS ingredients (
          ingredientId INTEGER PRIMARY KEY AUTOINCREMENT,
          recipeId INTEGER,
          name TEXT,
          quantity TEXT,
          FOREIGN KEY (recipeId) REFERENCES recipes (id) ON DELETE CASCADE
        );
      `);

      await db.execAsync(`
        CREATE TABLE IF NOT EXISTS steps (
          stepId INTEGER PRIMARY KEY AUTOINCREMENT,
          recipeId INTEGER,
          stepText TEXT,
          FOREIGN KEY (recipeId) REFERENCES recipes (id) ON DELETE CASCADE
        );
      `);

      console.log('Database initialized successfully');
    } catch (error) {
      console.error('Error initializing database:', error);
    }
  };

  // Function to add a recipe (async)
  const addRecipe = async () => {
    if (!recipeName || !preparationTime) {
      Alert.alert('Please fill in all fields');
      return;
    }

    try {
      const result = await db.execAsync(
        `INSERT INTO recipes (recipeName, preparationTime, difficultyLevel) VALUES (?, ?, ?)`,
        [recipeName, preparationTime, difficultyLevel]
      );

      const recipeId = result.insertId;

      // Add ingredients after the recipe has been inserted
      for (let ingredient of ingredients) {
        await db.execAsync(
          `INSERT INTO ingredients (recipeId, name, quantity) VALUES (?, ?, ?)`,
          [recipeId, ingredient.name, ingredient.quantity]
        );
      }

      // Add steps after the recipe has been inserted
      for (let step of steps) {
        await db.execAsync(
          `INSERT INTO steps (recipeId, stepText) VALUES (?, ?)`,
          [recipeId, step.text]
        );
      }

      Alert.alert('Recipe saved successfully');
      fetchRecipes(); // Fetch the recipes again after adding
    } catch (error) {
      Alert.alert('Error saving recipe:', error.message);
      console.error('Error saving recipe:', error);
    }
  };

  // Function to fetch all recipes (async)
  const fetchRecipes = async () => {
    try {
      const resultSet = await db.execAsync('SELECT * FROM recipes');
      const rows = resultSet.rows._array;
      setRecipeList(rows); // Update state with fetched recipes
    } catch (error) {
      console.error('Error fetching recipes:', error);
    }
  };

  // Initialize the database on component mount
  useEffect(() => {
    initializeDatabase();
  }, []);

  return (
    <ScrollView style={{ padding: 20 }}>
      <Text>Recipe Name:</Text>
      <TextInput
        value={recipeName}
        onChangeText={setRecipeName}
        placeholder="Enter recipe name"
        style={{ borderWidth: 1, padding: 5, marginBottom: 10 }}
      />

      <Text>Preparation Time:</Text>
      <TextInput
        value={preparationTime}
        onChangeText={setPreparationTime}
        placeholder="e.g., 30 minutes"
        style={{ borderWidth: 1, padding: 5, marginBottom: 10 }}
      />

      <Text>Difficulty Level:</Text>
      <TextInput
        value={difficultyLevel}
        onChangeText={setDifficultyLevel}
        placeholder="Difficulty (e.g., Low, Medium, Hard)"
        style={{ borderWidth: 1, padding: 5, marginBottom: 10 }}
      />

      <Text>Ingredients:</Text>
      {ingredients.map((ingredient, index) => (
        <View key={index} style={{ marginVertical: 5 }}>
          <Text>{ingredient.name} - {ingredient.quantity}</Text>
        </View>
      ))}
      <TextInput
        value={ingredientName}
        onChangeText={setIngredientName}
        placeholder="Ingredient name"
        style={{ borderWidth: 1, padding: 5, marginBottom: 5 }}
      />
      <TextInput
        value={ingredientQuantity}
        onChangeText={setIngredientQuantity}
        placeholder="Ingredient quantity"
        style={{ borderWidth: 1, padding: 5, marginBottom: 10 }}
      />
      <Button title="Add Ingredient" onPress={addIngredient} />

      <Text>Steps:</Text>
      {steps.map((step, index) => (
        <View key={index} style={{ marginVertical: 5 }}>
          <Text>{index + 1}. {step.text}</Text>
        </View>
      ))}
      <TextInput
        value={stepText}
        onChangeText={setStepText}
        placeholder="Step description"
        style={{ borderWidth: 1, padding: 5, marginBottom: 5 }}
      />
      <Button title="Add Step" onPress={addStep} />

      <Button title="Save Recipe" onPress={addRecipe} />

      <Text>Saved Recipes:</Text>
      {recipeList.map((recipe) => (
        <View key={recipe.id} style={{ marginVertical: 5 }}>
          <Text>{recipe.recipeName} - {recipe.preparationTime} - {recipe.difficultyLevel}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

export default MealAddScreen;

it is not working. After searching hours i really don't know what is causing that.

I tried to create dummy files like a test db. with just one entry. Created a new folder etc. But every time when SQL is involved i have this error.