React Native Tutorial penyimpanan lokal expo SQLite

Dalam panduan ini, kita akan melihat penggunaan SQLite untuk menyimpan dan mempertahankan data secara lokal di aplikasi React Native & Expo kita. SQLite tersedia di hampir semua perangkat seluler. Kita harus menulis kueri SQL untuk mengaksesnya, namun, data yang dikembalikan dalam bentuk array & objek javascript. Kami akan melakukan operasi CRUD untuk mendemonstrasikan cara melakukan kueri dan memperbarui status React.
Topik berikut akan dibahas dalam posting ini dan untuk tujuan kesederhanaan dan demonstrasi, semua kode akan ditulis dalam file app.js:

Packages
Imports and Connection
Initialization and UI
Operations
Read
Create
Update
Delete

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  SafeAreaView,
  Platform,
} from 'react-native';

import Constants from 'expo-constants';
import * as SQLite from 'expo-sqlite';

const db = SQLite.openDatabase('db.testDb'); // returns Database object

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };

    if (Platform.OS != 'web') {
      // Check if the items table exists if not create it
      db.transaction((tx) => {
        tx.executeSql(
          'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT, count INT)'
        );
      });

      this.fetchData(); // ignore it for now
    }
  }
  // event handler for new item creation
  newItem = () => {
    db.transaction((tx) => {
      tx.executeSql(
        'INSERT INTO items (text, count) values (?, ?)',
        ['gibberish', 0],
        (txObj, resultSet) =>
          this.setState({
            data: this.state.data.concat({
              id: resultSet.insertId,
              text: 'gibberish',
              count: 0,
            }),
          }),
        (txObj, error) => console.log('Error', error)
      );
    });
  };
  increment = (id) => {
    db.transaction((tx) => {
      tx.executeSql(
        'UPDATE items SET count = count + 1 WHERE id = ?',
        [id],
        (txObj, resultSet) => {
          if (resultSet.rowsAffected > 0) {
            let newList = this.state.data.map((data) => {
              if (data.id === id) return { ...data, count: data.count + 1 };
              else return data;
            });
            this.setState({ data: newList });
          }
        }
      );
    });
  };
  delete = (id) => {
    db.transaction((tx) => {
      tx.executeSql(
        'DELETE FROM items WHERE id = ? ',
        [id],
        (txObj, resultSet) => {
          if (resultSet.rowsAffected > 0) {
            let newList = this.state.data.filter((data) => {
              if (data.id === id) return false;
              else return true;
            });
            this.setState({ data: newList });
          }
        }
      );
    });
  };
  fetchData = () => {
    db.transaction((tx) => {
      // sending 4 arguments in executeSql
      tx.executeSql(
        'SELECT * FROM items',
        null, // passing sql query and parameters:null
        // success callback which sends two things Transaction object and ResultSet Object
        (txObj, { rows: { _array } }) => this.setState({ data: _array }),
        // failure callback which sends two things Transaction object and Error
        (txObj, error) => console.log('Error ', error)
      ); // end executeSQL
    }); // end transaction
  };

  render() {
    return (
      <SafeAreaView style={Style.main}>
        <Text style={Style.heading}>Add Random Name with Counts</Text>

        {Platform.OS === 'web' ? (
          <View
            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={Style.heading}>
              Expo SQlite is not supported on web!
            </Text>
          </View>
        ) : (
          <>
            <TouchableOpacity onPress={this.newItem} style={Style.green}>
              <Text style={Style.white}>Add New Item</Text>
            </TouchableOpacity>

            <ScrollView style={Style.widthfull}>
              {this.state.data &&
                this.state.data.map((data) => (
                  <View key={data.id} style={Style.list}>
                    <Text>
                      {data.text} - {data.count}
                    </Text>
                    <View style={Style.list}>
                      <TouchableOpacity onPress={() => this.increment(data.id)}>
                        <Text style={Style.boldGreen}> + </Text>
                      </TouchableOpacity>
                      <TouchableOpacity onPress={() => this.delete(data.id)}>
                        <Text style={Style.boldRed}> DEL </Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                ))}
            </ScrollView>
          </>
        )}
      </SafeAreaView>
    );
  }
}
export default App;

const Style = StyleSheet.create({
  main: {
    backgroundColor: '#fff',
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    padding: 20,
  },

  white: {
    color: 'white',
  },
  green: {
    backgroundColor: 'green',
    padding: 10,
  },
  boldGreen: {
    backgroundColor: 'green',
    padding: 10,
    borderRadius: 10,
    color: 'white',
    marginRight: 10,
  },
  boldRed: {
    backgroundColor: 'red',
    padding: 10,
    borderRadius: 10,
    color: 'white',
  },
  heading: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingVertical: 40,
  },
  list: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  widthfull: {
    flex: 1,
  },
});

Snack link

https://snack.expo.dev/@rudiahmad/sqlite-example

Catatan: testing tidak dapat menggunakan snack web, jalankan aplikasi Expo untuk melakukan testing

Referensi:

Contoh coding diambil dari referensi dibawah ini dengan perbaikan kode agar berjalan dan ditambahkan style karena style tidak disharing dari kode original

https://reactdevstation.github.io/2020/04/04/sqllite.html