(Simple Crud SQLite ) React Native Example using react-native-sqlite-storage

I Create this mini tutorial to help. Hope it helps someone.

Step 0: Create a DB with the name user create a table named Users

move this DB to android/app/src/main/assets

Step 1: After setting up your react native environment install the SQLite package

npm install react-native-sqlite-storage

react-native link react-native-sqlite-storage

Step 2:

android/settings.gradle

rootProject.name = 'NAMEOFYOURPROYECT_PLEASECHANGEIT' apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app'

include ':react-native-sqlite-storage' project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/platforms/android') // react-native-sqlite-storage >= 4.0.0 // IMPORTANT: if you are working with a version less than 4.0.0 the project directory is '../node_modules/react-native-sqlite-storage/src/android'

android/app/build.gradle

dependencies { implementation project(':react-native-sqlite-storage')

implementation fileTree(dir: "libs", include: ["*.jar"]) //noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

android/app/nameofyourporyect/MainApplication.java

import org.pgsqlite.SQLitePluginPackage;

@Override protected List getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); new SQLitePluginPackage(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; }

EXAMPLE Simple Crud:

import * as React from 'react';
import SQLite from 'react-native-sqlite-storage';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  FlatList,
  Button,
  TextInput
} from 'react-native';
import { Component } from 'react';



let db;


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      userList:[],
    }
    db = SQLite.openDatabase(
      {
        name: 'Users.db', //Name of you table
        createFromLocation : "~user.db", //Name of your DB
      },
      this.success.bind(this),  //okCallback
      this.fail                // error callback
    );
    }

    success=()=>{
      db.transaction(tx => {
        tx.executeSql('SELECT * FROM Users', [], (tx, results) => {  // sql query to get all table data and storing it in 'results' variable
          let data = results.rows.length;

          let users = [];    //creating empty array to store the rows of the sql table data

          for (let i = 0; i < results.rows.length; i++) {
            users.push(results.rows.item(i));
                         //looping through each row in the table and storing it as object in the 'users' array
          }

           this.setState({ userList:users});         //setting the state(userlist) with users array which has all the table data
        });
      });
      // alert("ok")
    }

    fail=(error)=>{
      console.error(error) // logging out error if there is one
    }

GenerateParrafos2=()=>{
db.transaction(tx => {
  tx.executeSql('DELETE FROM Users WHERE Age = "25"', [], (tx, results) => {  // sql query to get all table data and storing it in 'results' variable
         //setting the state(userlist) with users array which has all the table data
  });
});
// alert("ok")
this.success();
}


GenerateParrafos3=()=>{
  db.transaction(tx => {
    tx.executeSql('UPDATE Users SET Age="11" WHERE Title="Juan"', [], (tx, results) => {  // sql query to get all table data and storing it in 'results' variable
           //setting the state(userlist) with users array which has all the table data
    });
  });
  // alert("ok")
this.success();
  }
  render() {


    return (

         <View style={{flex:1}}>
         <ScrollView>
         {
            this.state.userList.map(function(item, i){
              return(
                <View key={i} style={styles.card}>
                 <Text >{item.Title}</Text>
                  <Text >{item.Age}</Text>


                </View>
              )
            })
          }
          </ScrollView>
            <Button title="Create" onPress={this.GenerateParrafos} color='#FB6542'/>
            <Button title="Delete" onPress={this.GenerateParrafos2} color='#FB6542'/>
              <Button title="Update" onPress={this.GenerateParrafos3} color='#FB6542'/>
      </View>

    );
  }
}

const styles = StyleSheet.create ({

 card:{
   backgroundColor:"#eee",
   marginBottom:12,
   marginHorizontal:26,
   // width:340,
   height:80,
   borderRadius:6,
   justifyContent:"center",
   shadowColor: '#000',
   shadowOffset: { width: 1, height: 2 },
   shadowOpacity: 0.8,
   shadowRadius: 2,
   elevation: 2,
 },

})