In this post, we’ll look at how to use SQLite to store and persist data locally in our React Native and Expo apps. SQLite is supported by practically all mobile devices. To access it, we must execute SQL queries; however, the data provided is in the form of javascript arrays and objects. To show how to run queries and change React states, we will do CRUD operations.\r\nThe following aspects will be discussed in this post, and all code will be written in the app.js file for convenience and demonstration purposes:<\/p>\r\n\r\n\r\n\r\n
Packages
Imports and Connection
Initialization and UI
Operations
Read
Create
Update
Delete<\/p>\r\n\r\n\r\n\r\n
import React from 'react';\r\nimport {\r\n View,\r\n Text,\r\n TouchableOpacity,\r\n ScrollView,\r\n StyleSheet,\r\n SafeAreaView,\r\n Platform,\r\n} from 'react-native';\r\n\r\nimport Constants from 'expo-constants';\r\nimport * as SQLite from 'expo-sqlite';\r\n\r\nconst db = SQLite.openDatabase('db.testDb'); \/\/ returns Database object\r\n\r\nclass App extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: null,\r\n };\r\n\r\n if (Platform.OS != 'web') {\r\n \/\/ Check if the items table exists if not create it\r\n db.transaction((tx) => {\r\n tx.executeSql(\r\n 'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT, count INT)'\r\n );\r\n });\r\n\r\n this.fetchData(); \/\/ ignore it for now\r\n }\r\n }\r\n \/\/ event handler for new item creation\r\n newItem = () => {\r\n db.transaction((tx) => {\r\n tx.executeSql(\r\n 'INSERT INTO items (text, count) values (?, ?)',\r\n ['gibberish', 0],\r\n (txObj, resultSet) =>\r\n this.setState({\r\n data: this.state.data.concat({\r\n id: resultSet.insertId,\r\n text: 'gibberish',\r\n count: 0,\r\n }),\r\n }),\r\n (txObj, error) => console.log('Error', error)\r\n );\r\n });\r\n };\r\n increment = (id) => {\r\n db.transaction((tx) => {\r\n tx.executeSql(\r\n 'UPDATE items SET count = count + 1 WHERE id = ?',\r\n [id],\r\n (txObj, resultSet) => {\r\n if (resultSet.rowsAffected > 0) {\r\n let newList = this.state.data.map((data) => {\r\n if (data.id === id) return { ...data, count: data.count + 1 };\r\n else return data;\r\n });\r\n this.setState({ data: newList });\r\n }\r\n }\r\n );\r\n });\r\n };\r\n delete = (id) => {\r\n db.transaction((tx) => {\r\n tx.executeSql(\r\n 'DELETE FROM items WHERE id = ? ',\r\n [id],\r\n (txObj, resultSet) => {\r\n if (resultSet.rowsAffected > 0) {\r\n let newList = this.state.data.filter((data) => {\r\n if (data.id === id) return false;\r\n else return true;\r\n });\r\n this.setState({ data: newList });\r\n }\r\n }\r\n );\r\n });\r\n };\r\n fetchData = () => {\r\n db.transaction((tx) => {\r\n \/\/ sending 4 arguments in executeSql\r\n tx.executeSql(\r\n 'SELECT * FROM items',\r\n null, \/\/ passing sql query and parameters:null\r\n \/\/ success callback which sends two things Transaction object and ResultSet Object\r\n (txObj, { rows: { _array } }) => this.setState({ data: _array }),\r\n \/\/ failure callback which sends two things Transaction object and Error\r\n (txObj, error) => console.log('Error ', error)\r\n ); \/\/ end executeSQL\r\n }); \/\/ end transaction\r\n };\r\n\r\n render() {\r\n return (\r\n <SafeAreaView style={Style.main}>\r\n <Text style={Style.heading}>Add Random Name with Counts<\/Text>\r\n\r\n {Platform.OS === 'web' ? (\r\n <View\r\n style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\r\n <Text style={Style.heading}>\r\n Expo SQlite is not supported on web!\r\n <\/Text>\r\n <\/View>\r\n ) : (\r\n <>\r\n <TouchableOpacity onPress={this.newItem} style={Style.green}>\r\n <Text style={Style.white}>Add New Item<\/Text>\r\n <\/TouchableOpacity>\r\n\r\n <ScrollView style={Style.widthfull}>\r\n {this.state.data &&\r\n this.state.data.map((data) => (\r\n <View key={data.id} style={Style.list}>\r\n <Text>\r\n {data.text} - {data.count}\r\n <\/Text>\r\n <View style={Style.list}>\r\n <TouchableOpacity onPress={() => this.increment(data.id)}>\r\n <Text style={Style.boldGreen}> + <\/Text>\r\n <\/TouchableOpacity>\r\n <TouchableOpacity onPress={() => this.delete(data.id)}>\r\n <Text style={Style.boldRed}> DEL <\/Text>\r\n <\/TouchableOpacity>\r\n <\/View>\r\n <\/View>\r\n ))}\r\n <\/ScrollView>\r\n <\/>\r\n )}\r\n <\/SafeAreaView>\r\n );\r\n }\r\n}\r\nexport default App;\r\n\r\nconst Style = StyleSheet.create({\r\n main: {\r\n backgroundColor: '#fff',\r\n flex: 1,\r\n paddingTop: Constants.statusBarHeight,\r\n padding: 20,\r\n },\r\n\r\n white: {\r\n color: 'white',\r\n },\r\n green: {\r\n backgroundColor: 'green',\r\n padding: 10,\r\n },\r\n boldGreen: {\r\n backgroundColor: 'green',\r\n padding: 10,\r\n borderRadius: 10,\r\n color: 'white',\r\n marginRight: 10,\r\n },\r\n boldRed: {\r\n backgroundColor: 'red',\r\n padding: 10,\r\n borderRadius: 10,\r\n color: 'white',\r\n },\r\n heading: {\r\n fontSize: 20,\r\n fontWeight: 'bold',\r\n textAlign: 'center',\r\n paddingVertical: 40,\r\n },\r\n list: {\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n borderBottomWidth: 1,\r\n borderBottomColor: '#ccc',\r\n },\r\n widthfull: {\r\n flex: 1,\r\n },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<\/p>\r\n\r\n\r\n\r\n
<\/p>\r\n\r\n\r\n\r\n
Snack link<\/p>\r\n\r\n\r\n\r\n