I am working on a React Native app (expo) for a school project, but I am stuck. I am relatively new to react when it comes to integrating it with SQL. I have made an SQLite database to select some data from in my app.
I tried something like this:
import * as React from 'react';
import { SafeAreaView, StyleSheet, Text, FlatList, Image, TouchableOpacity } from 'react-native';
import HeaderComponent from '../components/Header';
import Card from '../components/Card';
import * as SQLite from 'expo-sqlite';
import { FileSystem } from 'expo';
// load DB for expo
// Add this code on your app.js
global.db = SQLite.openDatabase(
{
name: 'traclo_db.db',
location: 'default',
createFromLocation: '~SQLite.db',
},
() => { },
error => {
console.log("ERROR: " + error);
}
);
db.transaction((tx) => {
tx.executeSql('SELECT * FROM tbl_brand', [], (tx, results) => {
console.log("Query completed");
var len = results.rows.length;
for (let i = 0; i < len; i++) {
let row = results.rows.item(i);
console.log(`BrandName: ${row.brand_name}, Score: ${row.brand_score}`);
}
});
});
//view for the homescreen
export default function Home({ navigation }) {
const [
selectedIndex,
setSelectedIndex
] = React.useState(0);
return (
//this 'SafeAreaView' is required to render it safe on the screen, within the margins
<SafeAreaView forceInset={{ bottom: 'always' }} style={style.container}>
<HeaderComponent
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
/>
<Card
BrandName="Adidas"
Score="83"
Logo={require('../assets/Adidas.png')}
/>
</SafeAreaView>
);
}
//style props of the header
const style = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
})
If this worked I wouldn't be posting a question here :) I want to open the database and render a card component for all the records in the table tbl_brand, but I have really no idea how to do that. Can you help me please, or do you have some ideas for this? :)