Hello guys I am just trying to do simple crud operations in React-Native using SQLite database but I am encountering:
(NOBRIDGE) ERROR Error: Cannot find native module ‘ExpoSQLite’ [Component Stack]
(NOBRIDGE) WARN Route “./_layout.jsx” is missing the required default export. Ensure a React component is exported as default. [Component Stack]
Error again and again
I am using Expo SDK 52 as the framework and react native version 0.76
here are my _layout.jsx and index.jsx files
index.jsx file
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import * as Sqlite from 'expo-sqlite';
const db = Sqlite.openDatabaseSync('trial1.db');
const SignupScreen = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const setTable = () => {
try {
db.transaction((tx) => {
tx.executeSql(
"CREATE TABLE IF NOT EXISTS trial (id INTEGER PRIMARY KEY AUTOINCREMENT, email VARCHAR(20),password VARCHAR(20));",
[],
() => {
console.log("Table created successfully.");
},
(error) => {
console.error("Error creating table: ", error);
}
);
});
} catch (error) {
console.error("Error setting up database: ", error);
}
};
const saveData = () => {
// Handle signup logic here
try{
db.transaction( tx =>{
tx.executeSql("INSERT INTO trial(email,password) VALUES(?,?)",[email,password],
(txObj,res) => {
console.log(res);
},
(txObj,error) =>{
console.log(error);
}
);
});
}catch(error){
console.log(error);
}
};
useEffect(() => {
setTable();
}, []);
return (
<View style={styles.container}>
<Text style={styles.title}>Create an Account</Text>
<TextInput
style={styles.input}
placeholder="Email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
placeholderTextColor="#aaa"
/>
<TextInput
style={styles.input}
placeholder="Password"
value={password}
onChangeText={setPassword}
secureTextEntry
placeholderTextColor="#aaa"
/>
<TextInput
style={styles.input}
placeholder="Confirm Password"
value={confirmPassword}
onChangeText={setConfirmPassword}
secureTextEntry
placeholderTextColor="#aaa"
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
<Text style={styles.footerText}>
Already have an account? <Text style={styles.link}>Log In</Text>
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f8f8',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
color: '#333',
},
input: {
width: '100%',
height: 50,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 8,
paddingHorizontal: 10,
marginBottom: 15,
backgroundColor: '#fff',
},
button: {
width: '100%',
height: 50,
backgroundColor: '#6200ea',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 8,
marginTop: 10,
},
buttonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
footerText: {
marginTop: 20,
color: '#666',
},
link: {
color: '#6200ea',
fontWeight: 'bold',
},
});
export default SignupScreen
_layout.jsx file
import { Stack } from "expo-router";
import { SQLiteProvider } from "expo-sqlite";
export default function RootLayout() {
return (
<Stack>
<SQLiteProvider databaseName="trial1.db">
</SQLiteProvider>
</Stack>
);
}
Error: Cannot find native module ‘ExpoSQLite’ [Component Stack] in Expo React-Native App
Tried debugging several times using ORM but still didn’t work.
