ERROR Type Error: Cannot convert null value to object

Question

I am using reactive-native-SQLite-storage, using expo project I wanted to register using register credentials ,this is error

LOG  OPEN database: ibus.db
 LOG  OPEN database: ibus.db
 ERROR  TypeError: Cannot convert null value to object

This error is located at:
    in RegistrationPage (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in RCTView (at View.js:116)
    in View (at CardContainer.tsx:281)
    in RCTView (at View.js:116)
    in View (at CardContainer.tsx:279)
    in RCTView (at View.js:116)
    in View (at CardSheet.tsx:45)

After reading documentation and watching different solution and I imported and install SQLite using npx expo install expo-sqlite, I clear node_module all by using npm start -- --reset-cache

this are code

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity, Alert } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import SQLite from 'react-native-sqlite-storage';

const RegistrationPage = () => {
  const navigation = useNavigation(); 
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const db = SQLite.openDatabase({ name: 'ibus.db', location: 'default' });

  const initializeDatabase = () => {
    db.transaction(tx => {
      tx.executeSql(
        `CREATE TABLE IF NOT EXISTS users (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          username TEXT UNIQUE,
          password TEXT,
          email TEXT,
        );`
      );
    });
  };

  useEffect(() => {
    initializeDatabase();
  }, []);

  const registerUser = (username, password, email, onSuccess, onError) => {
    db.transaction(tx => {
      tx.executeSql(
        'INSERT INTO users (username, password, email) VALUES (?, ?, ?)',
        [username, password, email],
        (_, results) => {
          console.log('User registered successfully');
          onSuccess();
        },
        error => {
          console.error('Error registering user:', error);
          onError(error);
        }
      );
    });
  };

  const handleRegistration = () => {
    if (!username.trim() || !email.trim() || !password.trim()) {
      Alert.alert('Error', 'Please fill all fields');
      return;
    }
    registerUser(username, password, email, () => {
      navigation.navigate('Login');
    }, (error) => {
      console.error('Error registering user:', error);
      Alert.alert('Error', 'Registration failed. Please try again.');
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ width: '80%' }}>
        <Text style={{ fontSize: 24, textAlign: 'center', marginBottom: 16 }}>
          Register an Account
        </Text>

        {/* Username Input */}
        <View style={{ marginBottom: 16 }}>
          <Text style={{ marginBottom: 4 }}>Username</Text>
          <View style={{ flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: 'gray', borderRadius: 8, padding: 8 }}>
            <MaterialIcons name='person' size={18} color={'#333'} style={{ marginRight: 8 }} />
            <TextInput
              style={{
                flex: 1,
              }}
              placeholder="Username"
              value={username}
              onChangeText={(text) => setUsername(text)}
            />
          </View>
        </View>

        {/* Email Input */}
        <View style={{ marginBottom: 16 }}>
          <Text style={{ marginBottom: 4 }}>Email</Text>
          <View style={{ flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: 'gray', borderRadius: 8, padding: 8 }}>
            <MaterialIcons name='email' size={18} color={'#333'} style={{ marginRight: 8 }} />
            <TextInput
              style={{
                flex: 1,
              }}
              placeholder="Email"
              value={email}
              onChangeText={(text) => setEmail(text)}
            />
          </View>
        </View>

        {/* Password Input */}
        <View style={{ marginBottom: 16 }}>
          <Text style={{ marginBottom: 4 }}>Password</Text>
          <View style={{ flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: 'gray', borderRadius: 8, padding: 8 }}>
            <MaterialIcons name='lock' size={18} color={'#333'} style={{ marginRight: 8 }} />
            <TextInput
              style={{
                flex: 1,
              }}
              placeholder="Password"
              value={password}
              onChangeText={(text) => setPassword(text)}
              secureTextEntry
            />
          </View>
        </View>

        {/* Register Button */}
        <TouchableOpacity onPress={handleRegistration} style={{ backgroundColor: '#3498db', padding: 10, borderRadius: 8 }}>
          <Text style={{ color: '#fff', textAlign: 'center' }}>Register</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};


export default RegistrationPage;