{"id":4108,"date":"2021-03-05T04:44:59","date_gmt":"2021-03-05T04:44:59","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=4108"},"modified":"2021-03-05T04:44:59","modified_gmt":"2021-03-05T04:44:59","slug":"sqlite-database-in-react-native-ios","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/sqlite-database-in-react-native-ios\/","title":{"rendered":"Sqlite database in React Native (IOS)"},"content":{"rendered":"

SQLite3 is a native Plugin for React local for both Android (classic and local), iOS, and windows. Foundation of this library is primarily based on Chris Brody’s Cordova SQLite plugin.<\/p>\n

Features:<\/h2>\n
    \n
  1. iOS and Android supported via identical JavaScript API.<\/li>\n
  2. Android in pure Java and Native modes<\/li>\n
  3. SQL transactions<\/li>\n
  4. JavaScript interface via plain callbacks or Promises.<\/li>\n
  5. Pre-populated SQLite database import from software bundle and sandbox<\/li>\n<\/ol>\n

    The library has been examined with React 16.2 (and earlier) and XCode 7,8,9 – it works well out of the container with no need of code adjustments. For XCode 7,8 vs. XCode 6, the most effective distinction is that SQLite ios library call suffix is tbd in place of dylib.
    \nVersion 3.2 is the primary version well-matched with RN 0.40.<\/p>\n

    Installation:<\/h3>\n

    npm install --save react-native-sqlite-storage<\/code><\/p>\n

    Then observe the commands in your platform to link react-native-sqlite-garage into your mission<\/p>\n

    Ios:<\/h3>\n

    Preferred technique<\/strong>
    \n** React native 0.60 and above ** Run cd ios && pod install && cd …<\/em> Linking is not required in React local 0.60 and above
    \n** React native 0.59 and underneath **<\/p>\n

    Step 1. set up Dependencies
    \nWith CocoaPods:<\/strong>
    \nUpload this in your Podfile which must be placed in the ios assignment subdirectory
    \npod 'React', :path => '..\/node_modules\/react-native'
    \npod 'react-native-sqlite-storage', :path => '..\/node_modules\/react-native-sqlite-storage'<\/code><\/p>\n

    Or use the pattern Podfile blanketed within the package deal by means of copying it over to the ios subdirectory and changing AwesomeProject internal of it with the call of your RN assignment.
    \nRefresh the Pods set up
    \npod install<\/code>
    \nOR
    \npod update<\/code>
    \nAchieved, bypass to Step 2.<\/p>\n

    Without CocoaPods:<\/strong>
    \nThis command has to be achieved inside the root directory of your RN mission
    \nreact-native link<\/code><\/p>\n

    rnpm and xcode are dependencies of this mission and need to get mounted with the module but in case of any difficulty in configuring rnpm hyperlink and rnpm\/xcode aren’t already mounted you can attempt to install it globally as follows:<\/p>\n

    npm -g install rnpm xcode<\/code><\/p>\n

    After linking project should like this:
    \n\"react\"\/<\/p>\n

    Step 1a. If rnpm link does not work for you you can try manually linking according to the instructions below:<\/strong>
    \nDrag the SQLite Xcode project as a dependency project into your React Native XCode project<\/p>\n

    \"react1\"\/<\/p>\n

    XCode SQLite libraries dependency set up<\/strong>
    \nAdd libSQLite.a (from Workspace area) to the specified Libraries and Frameworks. also add sqlite3.zero.tbd (XCode 7) or libsqlite3.0.dylib (XCode 6 and earlier) inside the identical style the usage of Required Libraries view (Do now not simply add them manually because the construct paths will now not be properly set)
    \n\"react2\"\/<\/p>\n

    Step 2. Application JavaScript require<\/strong>
    \nAdd var SQLite = require(‘react-native-sqlite-storage’)<\/em> to your index.ios.js
    \n\"react3\"<\/p>\n

    Step 3. Write application JavaScript code using the SQLite plugin<\/strong>
    \nAdd JS application code to use SQLite API in your index.ios.js etc. Here is some sample code. For a fully working example see test\/index.ios.callback.js. Please note that Promise based API is now maintained as well with full examples in the working React Native app under test\/index.ios.promise.js<\/p>\n

    errorCB(err) {
    \n console.log(\"SQL Error: \" + err);
    \n},
    \nsuccessCB() {
    \n console.log(\"SQL executed fine\");
    \n},
    \nopenCB() {
    \n console.log(\"Database OPENED\");
    \n},
    \nvar db = SQLite.openDatabase(\"test.db\", \"1.0\", \"Test Database\", 200000, openCB, errorCB);
    \ndb.transaction((tx) => {
    \n tx.executeSql('SELECT * FROM Employees a, Departments b WHERE a.department = b.department_id', [], (tx, results) => {
    \n console.log(\"Query completed\");
    \n \/\/ Get rows with Web SQL Database spec compliance.
    \n var len = results.rows.length;
    \n for (let i = 0; i < len; i++) {\n let row = results.rows.item(i);\n console.log(`Employee name: ${row.name}, Dept Name: ${row.deptName}`);\n } \n \/\/ Alternatively, you can use the non-standard raw method. \n \/*\n let rows = results.rows.raw(); \/\/ shallow copy of rows Array \n rows.map(row => console.log(`Employee name: ${row.name}, Dept Name: ${row.deptName}`));
    \n *\/
    \n });
    \n});<\/code><\/p>\n

    Setting up your project to import a pre-populated SQLite database from software for iOS<\/h3>\n