Import SQLite db using expo - sqlite

Question

I’m a newbie to React Native and Expo and I want to implement an SQLite database from “/assets/test.db” as you can see on sqlitebrowser:
sqlitebrowser sreenshot
I tried many ways but it never work so I based my code on the most popular way I found : https://forums.expo.io/t/solved-import-asset-db/11469
These things been sayed, here’s my code:
//App.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import * as FileSystem from 'expo-file-system'
import * as SQLite from 'expo-sqlite'
import { Asset } from 'expo-asset'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
item: null
}
}
componentDidMount() {
this.makeSQLiteDirAsync()
FileSystem.downloadAsync(
Asset.fromModule(require("./assets/test.db")).uri,
`${FileSystem.documentDirectory}SQLite/test.db`
)
.then(function(){
const db = SQLite.openDatabase('test.db');
console.log(db);
db.transaction(tx => {
tx.executeSql('SELECT * FROM User;',
[],
(_, {rows}) => console.log(rows))
},
);
});
}
makeSQLiteDirAsync = async() => {
const dbTest = SQLite.openDatabase('dummy.db');
try {
await dbTest.transaction(tx => tx.executeSql(''));
} catch(e) {
if (this.state.debugEnabled) console.log('error while executing SQL in dummy DB');
}
}
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
And here’s the result on terminal:
WebSQLDatabase {
"_currentTask": null,
"_db": SQLiteDatabase {
"_closed": false,
"_name": "test.db",
},
"_running": false,
"_txnQueue": Queue {
"length": 0,
},
"exec": [Function anonymous],
"version": "1.0",
}
Many peoples also advised to change ‘app.json’ and ‘metro.config.js’ the following way:
//app.json
{
"expo": {
"name": "Test: server",
"slug": "snack-42ed5540-be82-47b4-898a-d9acb300c559",
"privacy": "public",
"sdkVersion": "35.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/settings.png",
"splash": {
"image": "./assets/settings.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"packagerOpts": {
"assetExts": ["db"]
}
}
}
//metro.config.js
module.exports = {
resolver: {
assetExts: ["db", "mp3", "ttf"]
}
}
I didn’t find anything really different on the other topics or forums so there must be something I did wrong but I don’t see anything I can do to manage it. If you have any question or solution I’ll be there !

Answer 1

The makeSQLiteDirAsync function is to just ensure the SQLite folder is created in the device. Anyway the issue here is that react native will ignore the test.db file when bundling the assets like json, images, etc.
We need to instruct the metro bundler to allow the packaging of the SQLite .db file present in the assets folder. Code should work file if you add your additional assets extensions to the set of default assets already supported.
//metro.config.js
const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;
module.exports = {
resolver: {
assetExts: [
...defaultAssetExts,
"db",
"sqlite"
]
}
};
You can check metro-config folder in node_modules and also check the file in node_modules/metro-config/src/defaults/defaults.js to see the list of default assets.
Also, another thing to note is that expo does not recognize below option in app.json. Best to remove this.
"packagerOpts": {
"assetExts": ["db"]
}