I am trying to import sqlite db from assets to my project. However, I keep getting this error:
Unable to resolve "./assets/db.sqlite" from "App.js". App.js and assets are at the same level.
I am working on the sample code shared in the documentation:https://github.com/expo/sqlite-example and code shared in this forum post: https://forums.expo.dev/t/solved-import-asset-db/11469/2.
import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { Constants, SQLite, FileSystem } from 'expo';
const db = SQLite.openDatabase('db.db');
class Items extends React.Component {
state = {
items: null
};
componentDidMount () {
this.makeSQLiteDirAsync();
this.update();
}
async makeSQLiteDirAsync () {
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 () {
const {done: doneHeading} = this.props;
const {items} = this.state;
const heading = doneHeading ? 'Completed' : 'Todo';
if (items === null || items.length === 0) {
return null;
}
return (
<View style={{marginBottom: 16, marginHorizontal: 16}}>
<Text style={styles.sectionHeading}>{heading}</Text>
{items.map(({id, done, value}) => (
<TouchableOpacity
key={id}
onPress={() => this.props.onPressItem && this.props.onPressItem(id)}
style={{
backgroundColor: done ? '#1c9963' : '#fff',
borderColor: '#000',
borderWidth: 1,
padding: 8
}}>
<Text style={{color: done ? '#fff' : '#000'}}>{value}</Text>
</TouchableOpacity>
))}
</View>
);
}
update () {
// load in db
db.transaction(tx => {
tx.executeSql(
`select *
from items
where done = ?;`,
[this.props.done ? 1 : 0],
(_, {rows: {_array}}) => {
this.setState({items: _array});
console.log(_array);
}
);
});
FileSystem.downloadAsync(
Expo.Asset.fromModule(require('./assets/db.sqlite')).uri,
`${Expo.FileSystem.documentDirectory}SQLite/db.db`
)
.then(function(){
let db = SQLite.openDatabase('db.db');
// do whatever else you need here
db.transaction(tx => {
tx.executeSql(
`select *
from products
`,
[],
(_, {rows: {_array}}) => {
console.log(_array);
}
);
});
})
}
}
export default class App extends React.Component {
state = {
text: null
};
componentDidMount () {
db.transaction(tx => {
tx.executeSql(
'create table if not exists items (id integer primary key not null, done int, value text);'
);
});
}
render () {
return (
<View style={styles.container}>
<Text style={styles.heading}>SQLite Example</Text>
<View style={styles.flexRow}>
<TextInput
style={styles.input}
placeholder="what do you need to do?"
value={this.state.text}
onChangeText={text => this.setState({text})}
onSubmitEditing={() => {
this.add(this.state.text);
this.setState({text: null});
}}
/>
</View>
<View style={styles.listArea}>
<Items
done={false}
ref={todo => (this.todo = todo)}
onPressItem={id =>
db.transaction(
tx => {
tx.executeSql(`update items
set done = 1
where id = ?;`, [id]);
},
null,
this.update
)}
/>
<Items
done={true}
ref={done => (this.done = done)}
onPressItem={id =>
db.transaction(
tx => {
tx.executeSql(`delete
from items
where id = ?;`, [id]);
},
null,
this.update
)}
/>
</View>
</View>
);
}
add (text) {
db.transaction(
tx => {
tx.executeSql('insert into items (done, value) values (0, ?)', [text]);
tx.executeSql('select * from items', [], (_, {rows}) =>
console.log(JSON.stringify(rows))
);
},
null,
this.update
);
}
update = () => {
this.todo && this.todo.update();
this.done && this.done.update();
};
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
flex: 1,
paddingTop: Constants.statusBarHeight,
},
heading: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center'
},
flexRow: {
flexDirection: 'row'
},
input: {
borderColor: '#4630eb',
borderRadius: 4,
borderWidth: 1,
flex: 1,
height: 48,
margin: 16,
padding: 5
},
listArea: {
backgroundColor: '#f0f0f0',
flex: 1,
paddingTop: 16
},
sectionHeading: {
fontSize: 18,
marginBottom: 8
},
});
Please help.
