I am trying to get started by linking sqlite with react native on a simple app.. but somehow keep getting below error: I tried reinstall, relink, delete modules and yarn start...
Please help! Module is not found: Can't resolve 'react-native' even though sqlite.core.js file is in the ./node_modules/react-native-sqlite-storage/lib/sqlite.core.js
ERROR: "./node_modules/react-native-sqlite-storage/lib/sqlite.core.js Module not found: Can't resolve 'react-native' in 'C:\Users\accd8\Documents\1 Expertise\React\TechTim\my-app\node_modules\react-native-sqlite-storage\lib'"
Below is on the browser: Browser error message
Image to show library node_modules/react-native-sqlite-storage/lib/sqlite.core.js
my package jason:
####{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native-sqlite-storage": "^5.0.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
####
APP.js
###import React from 'react'
import { useEffect } from 'react';
import { View, Text, Button } from 'react-native'
import SQLite from 'react-native-sqlite-storage'
const db = SQLite.openDatabase({
location: "default",
name: "SqliteDb"
}, () => {
console.log('başarılı')
}, (err) => {
console.log('hata')
})
const App = () => {
useEffect(() => {
db.transaction((tx) => {
tx.executeSql("CREATE TABLE IF NOT EXISTS students (ID INTEGER PRIMARY KEY AUTOINCREMENT , Name TEXT, AGE INTEGER)", [], (tx, result) => {
console.log('tx', tx)
console.log('result', result)
})
})
}, [])
const createRecord = () => {
for (let index = 0; index < 20; index++) {
const name = "Öğrenci" + index
const age = Math.floor(Math.random() * 50)
db.transaction((tx) => {
tx.executeSql('INSERT INTO students (Name,Age) VALUES(?,?)', [name, age], (tx, result) => {
console.log('tx', tx)
console.log('result', result)
})
})
}
}
const readRecord = () => {
db.transaction((tx) => {
tx.executeSql('SELECT * FROM students', [], (tx, result) => {
console.log('result', result)
for (let index = 0; index < result.rows.length; index++) {
console.log(result.rows.item(index))
}
})
})
}
const deleteRecord = () => {
db.transaction((tx) => {
tx.executeSql('DELETE FROM students where id = ? ', [1], (tx, result) => {
console.log(`tx`, tx)
console.log(`result`, result)
})
})
}
return (
<View>
<Button title="Ekle" onPress={createRecord} />
<Button title="Sil" onPress={deleteRecord} />
<Button title="Oku" onPress={readRecord} />
<Text>
React Native sqlite
</Text>
</View>
)
}
export default App
/*import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
*/
You're using React, not React Native, those are two different things. React is used for web, React Native is used for mobile. You can't install React Native packages on a React project.
Also, there is no current sqlite implementation for web.
However you can use Local Storage to save data in client's browser, or store the database things on a server.