{"id":6004,"date":"2020-05-29T14:13:36","date_gmt":"2020-05-29T08:43:36","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6004"},"modified":"2023-01-20T18:55:21","modified_gmt":"2023-01-20T13:25:21","slug":"sqlite-database-in-react-native","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/","title":{"rendered":"SQLite database in React Native"},"content":{"rendered":"

Introduction<\/b><\/p>\n

SQLite is an open-source SQL database used for storing data in mobile devices in the form of text files. It supports all the relational database features. There is no need to establish any linking or connection for performing any operations on the database. It works like other SQL databases, where we can perform any query and get our desired output. Since all the data resides in a text file, access to it involves time taking tasks, so it is advisable to perform such operation in the background so that one cannot block the UI.<\/span><\/p>\n

Here in this blog, we focused on how to connect our application with SQLite and perform basic crud operations. We will use the SQLite3 Native Plugin, which will work in both Android and iOS for performing our task.<\/span><\/p>\n

Let us develop an application that performs the essential operation:<\/span><\/p>\n

Register User: <\/b>For saving user details(Create\/insert)<\/span><\/p>\n

View All User: <\/b>Get all details of all users. (Read)<\/span><\/p>\n

View Single User: <\/b>Get all details of single users. (Read by Id)<\/span><\/p>\n

Update User: <\/b>Update details of a user. (Update by Id)<\/span><\/p>\n

Delete User: <\/b>Delete the user. (Delete by Id).<\/span><\/p>\n

How to Use SQLite Storage?\u00a0<\/span><\/p>\n

To begin with, we have to import a npm library react-native-SQLite-storage in our newly created project. For this we need to run this command on terminal:<\/span><\/p>\n

npm\u00a0 install --save react-native-SQLite-storage<\/pre>\n
Or\u00a0<\/b><\/p>\n
yarn add react-native-SQLite-storage<\/pre>\n
After a successful installation, we need to update our pod file for the newly added package. For this run the command below:<\/span><\/p>\n
cd ios && pod install && cd ..<\/pre>\n
Now in order to use this package, first of all, import this package in our app.js file.<\/span><\/p>\n
import { open database } from 'react-native-SQLite-storage';<\/pre>\n
and open the database using<\/span><\/p>\n
var DB = open database({ name: 'UserDatabase.db' });<\/pre>\n
We can use the DB variable to execute the database query whenever we need to make a database call.<\/span><\/p>\n
db.transaction(function(txn) {\r\n\r\n\u00a0txn.executeSql(\u00a0\u00a0\u00a0\u00a0\r\n\r\nquery, \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\r\nargsToBePassed[],\u00a0 \u00a0 \u00a0\r\n\r\n\u00a0function(tx, res) {} \u00a0\r\n\r\n});<\/pre>\n
Steps to use sqlite in our project<\/b><\/p>\n
    \n
  1. Open the project directory and replace the following code.<\/span><\/li>\n<\/ol>\n
    \/\/App.js\r\nimport React from 'react';\r\nimport { createStackNavigator } from '@react-navigation\/stack';\r\nimport HomeNavigator from '.\/src\/navigator\/homeNavigator';\r\nimport { NavigationContainer } from '@react-navigation\/native';\r\nconst Stack = createStackNavigator();\r\nconst App = (props) => {\r\n\treturn(\r\n\t\t<NavigationContainer>\r\n\t\t\t<Stack.Navigator headerMode=\"none\">\r\n\t\t\t\t<Stack.Screen name=\"Home\" component={HomeNavigator} \/>\r\n\t\t\t<\/Stack.Navigator>\r\n\t\t<\/NavigationContainer>\r\n\t)\r\n}\r\nexport default App;\r\n<\/pre>\n
    2. Now make a src folder and then make a navigator folder in the src folder in the root directory of your project and generate a file homeNavigator.js and paste the following code.<\/span><\/p>\n
    import React from 'react';\r\nimport { createStackNavigator } from '@react-navigation\/stack';\r\nconst Stack = createStackNavigator();\r\nimport HomeScreen from '..\/screens\/HomeScreen';\r\nimport Register from '..\/screens\/RegisterUser';\r\nimport View from '..\/screens\/ViewUser';\r\nimport ViewAll from '..\/screens\/ViewAllUser';\r\nimport Delete from '..\/screens\/DeleteUser';\r\nimport Update from '..\/screens\/UpdateUser';\r\nconst homeNavigator = (props) => {\r\n    return <Stack.Navigator \r\n    initialRouteName = \"HomeScreen\"    \r\n          <Stack.Screen \r\n            name=\"HomeScreen\" \r\n            component={HomeScreen} \r\n            options={{\r\n                headerTitle:\"Home\",\r\n            }} \/>\r\n        <Stack.Screen \r\n            name=\"Register\" \r\n            component={Register} \r\n            options={{\r\n                headerTitle:\"Register User\",\r\n            }} \/>\r\n        <Stack.Screen \r\n            name=\"Update\" \r\n            component={Update} \r\n            options={{\r\n                headerTitle:\"Update User\",\r\n            }} \/>\r\n        <Stack.Screen \r\n            name=\"Delete\" \r\n            component={Delete} \r\n            options={{\r\n                headerTitle:\"Delete User\",\r\n            }} \/>\r\n        <Stack.Screen \r\n            name=\"View\" \r\n            component={View} \r\n            options={{\r\n                headerTitle:\"View User\",\r\n            }} \/>\r\n        <Stack.Screen \r\n            name=\"ViewAll\" \r\n            component={ViewAll} \r\n            options={{\r\n                headerTitle:\"View All User\",\r\n            }} \/>\r\n    <\/Stack.Navigator>\r\n}\r\nexport default homeNavigator;\r\n<\/pre>\n
    3.\u00a0Now make a component folder in the src folder in the root directory of your project and generate the following file Mybutton.js, Mytext.js and Mytextinput.js and paste the following code.<\/span><\/p>\n
    Mybutton.js<\/b><\/p>\n
    import React from 'react';\r\nimport { TouchableOpacity, Text, StyleSheet } from 'react-native';\r\nconst Mybutton = props => {\r\n  return (\r\n    <TouchableOpacity style={styles.button} onPress={props.customClick}>\r\n      <Text style={styles.text}>{props.title}<\/Text>\r\n    <\/TouchableOpacity>\r\n  );\r\n};\r\nconst styles = StyleSheet.create({\r\n  button: {\r\n    alignItems: 'center',\r\n    backgroundColor: '#f05555',\r\n    color: '#ffffff',\r\n    padding: 10,\r\n    marginTop: 16,\r\n    marginLeft: 35,\r\n    marginRight: 35,\r\n  },\r\n  text: {\r\n    color: '#ffffff',\r\n  },\r\n});\r\nexport default Mybutton;\r\n<\/pre>\n
    Mytext.js<\/b><\/p>\n
    import React from 'react';\r\nimport { TouchableHighlight, Text, StyleSheet } from 'react-native';\r\nconst Mytext = props => {\r\n  return <Text style={styles.text}>{props.text}<\/Text>;\r\n};\r\nconst styles = StyleSheet.create({\r\n  text: {\r\n    color: '#111825',\r\n    fontSize: 18,\r\n    marginTop: 16,\r\n    marginLeft: 35,\r\n    marginRight: 35,\r\n  },\r\n});\r\nexport default Mytext;\r\n<\/pre>\n
    Mytextinput.js<\/b><\/p>\n
    import React from 'react';\r\nimport { View, TextInput } from 'react-native';\r\nconst Mytextinput = props => {\r\n  return (\r\n    <View\r\n      style={{\r\n        marginLeft: 35,\r\n        marginRight: 35,\r\n        marginTop: 10,\r\n        borderColor: '#000000',\r\n        borderWidth: 1,\r\n      }}>\r\n      <TextInput\r\n        underlineColorAndroid=\"transparent\"\r\n        placeholder={props.placeholder}\r\n        placeholderTextColor=\"#000000\"\r\n        keyboardType={props.keyboardType}\r\n        onChangeText={props.onChangeText}\r\n        returnKeyType={props.returnKeyType}\r\n        numberOfLines={props.numberOfLines}\r\n        multiline={props.multiline}\r\n        onSubmitEditing={props.onSubmitEditing}\r\n        style={props.style}\r\n        blurOnSubmit={false}\r\n        value={props.value}\r\n      \/>\r\n    <\/View>\r\n  );\r\n};\r\nexport default Mytextinput;\r\n<\/pre>\n
      \n
    • Now<\/span> create another folder named screen which contains the following files:<\/span><\/b><\/li>\n<\/ul>\n
        \n
      1. HomeScreen.js<\/span><\/li>\n
      2. RegisterUser.js<\/span><\/li>\n
      3. UpdateUser.js<\/span><\/li>\n
      4. ViewAllUser.js<\/span><\/li>\n
      5. ViewUser.js<\/span><\/li>\n
      6. DeleteUser.js<\/span><\/li>\n<\/ol>\n
        and paste the following code in their respective files.<\/span><\/p>\n
        HomeScreen.js<\/b><\/p>\n
        import React from 'react';\r\nimport { View } from 'react-native';\r\nimport Mybutton from '..\/components\/Mybutton';\r\nimport Mytext from '..\/components\/Mytext';\r\nimport { openDatabase } from 'react-native-sqlite-storage';\r\nvar db = openDatabase({ name: 'UserDatabase.db' });\r\nexport default class HomeScreen extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    db.transaction(function(txn) {\r\n      txn.executeSql(\r\n        \"SELECT name FROM sqlite_master WHERE type='table' AND name='table_user'\",\r\n        [],\r\n        function(tx, res) {\r\n          console.log('item:', res.rows.length);\r\n          if (res.rows.length == 0) {\r\n            txn.executeSql('DROP TABLE IF EXISTS table_user', []);\r\n            txn.executeSql(\r\n              'CREATE TABLE IF NOT EXISTS table_user(user_id INTEGER PRIMARY KEY AUTOINCREMENT, user_name VARCHAR(20), user_contact INT(10), user_address VARCHAR(255))',\r\n              []\r\n            );\r\n          }\r\n        }\r\n      );\r\n    });\r\n  }\r\n  render() {\r\n    return (\r\n      <View\r\n        style={{\r\n          flex: 1,\r\n          backgroundColor: 'white',\r\n          flexDirection: 'column',\r\n        }}>\r\n        <Mytext text=\"SQLite Example\" \/>\r\n        <Mybutton\r\n          title=\"Register\"\r\n          customClick={() => this.props.navigation.navigate('Register')}\r\n        \/>\r\n        <Mybutton\r\n          title=\"Update\"\r\n          customClick={() => this.props.navigation.navigate('Update')}\r\n        \/>\r\n        <Mybutton\r\n          title=\"View\"\r\n          customClick={() => this.props.navigation.navigate('View')}\r\n        \/>\r\n        <Mybutton\r\n          title=\"View All\"\r\n          customClick={() => this.props.navigation.navigate('ViewAll')}\r\n        \/>\r\n        <Mybutton\r\n          title=\"Delete\"\r\n          customClick={() => this.props.navigation.navigate('Delete')}\r\n        \/>\r\n      <\/View>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
        RegiserUser.js<\/b><\/p>\n
        import React from 'react';\r\nimport { View, ScrollView, KeyboardAvoidingView, Alert } from 'react-native';\r\nimport Mytextinput from '..\/components\/Mytextinut';\r\nimport Mybutton from '..\/components\/Mybutton';\r\nimport { openDatabase } from 'react-native-sqlite-storage';\r\nvar db = openDatabase({ name: 'UserDatabase.db' });\r\nexport default class RegisterUser extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      user_name: '',\r\n      user_contact: '',\r\n      user_address: '',\r\n    };\r\n  }\r\n  register_user = () => {\r\n    var that = this;\r\n    const { user_name } = this.state;\r\n    const { user_contact } = this.state;\r\n    const { user_address } = this.state;\r\n    \/\/alert(user_name, user_contact, user_address);\r\n    if (user_name) {\r\n      if (user_contact) {\r\n        if (user_address) {\r\n          db.transaction(function(tx) {\r\n            tx.executeSql(\r\n              'INSERT INTO table_user (user_name, user_contact, user_address) VALUES (?,?,?)',\r\n              [user_name, user_contact, user_address],\r\n              (tx, results) => {\r\n                console.log('Results', results.rowsAffected);\r\n                if (results.rowsAffected > 0) {\r\n                  Alert.alert(\r\n                    'Success',\r\n                    'You are Registered Successfully',\r\n                    [\r\n                      {\r\n                        text: 'Ok',\r\n                        onPress: () =>\r\n                          that.props.navigation.navigate('HomeScreen'),\r\n                      },\r\n                    ],\r\n                    { cancelable: false }\r\n                  );\r\n                } else {\r\n                  alert('Registration Failed');\r\n                }\r\n              }\r\n            );\r\n          });\r\n        } else {\r\n          alert('Please fill Address');\r\n        }\r\n      } else {\r\n        alert('Please fill Contact Number');\r\n      }\r\n    } else {\r\n      alert('Please fill Name');\r\n    }\r\n  };\r\n  render() {\r\n    return (\r\n      <View style={{ backgroundColor: 'white', flex: 1 }}>\r\n        <ScrollView keyboardShouldPersistTaps=\"handled\">\r\n          <KeyboardAvoidingView\r\n            behavior=\"padding\"\r\n            style={{ flex: 1, justifyContent: 'space-between' }}>\r\n            <Mytextinput\r\n              placeholder=\"Enter Name\"\r\n              onChangeText={user_name => this.setState({ user_name })}\r\n              style={{ padding:10 }}\r\n            \/>\r\n            <Mytextinput\r\n              placeholder=\"Enter Contact No\"\r\n              onChangeText={user_contact => this.setState({ user_contact })}\r\n              maxLength={10}\r\n              keyboardType=\"numeric\"\r\n              style={{ padding:10 }}\r\n            \/>\r\n            <Mytextinput\r\n              placeholder=\"Enter Address\"\r\n              onChangeText={user_address => this.setState({ user_address })}\r\n              maxLength={225}\r\n              numberOfLines={5}\r\n              multiline={true}\r\n              style={{ textAlignVertical: 'top',padding:10 }}\r\n            \/>\r\n            <Mybutton\r\n              title=\"Submit\"\r\n              customClick={this.register_user.bind(this)}\r\n            \/>\r\n          <\/KeyboardAvoidingView>\r\n        <\/ScrollView>\r\n      <\/View>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
        UpdateUser.js<\/b><\/p>\n
        import React from 'react';\r\nimport { View, YellowBox, ScrollView, KeyboardAvoidingView, Alert, } from 'react-native';\r\nimport Mytextinput from '..\/components\/Mytextinut';\r\nimport Mybutton from '..\/components\/Mybutton';\r\nimport { openDatabase } from 'react-native-sqlite-storage';\r\nvar db = openDatabase({ name: 'UserDatabase.db' });\r\n \r\nexport default class UpdateUser extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      input_user_id: '',\r\n      user_name: '',\r\n      user_contact: '',\r\n      user_address: '',\r\n    };\r\n  }\r\n  searchUser = () => {\r\n    const {input_user_id} =this.state;\r\n    console.log(this.state.input_user_id);\r\n    db.transaction(tx => {\r\n      tx.executeSql(\r\n        'SELECT * FROM table_user where user_id = ?',\r\n        [input_user_id],\r\n        (tx, results) => {\r\n          var len = results.rows.length;\r\n          console.log('len',len);\r\n          if (len > 0) {\r\n            console.log(results.rows.item(0).user_contact);\r\n            this.setState({\r\n             user_name:results.rows.item(0).user_name,\r\n            });\r\n            this.setState({\r\n             user_contact:results.rows.item(0).user_contact,\r\n            });\r\n            this.setState({\r\n             user_address:results.rows.item(0).user_address,\r\n            });\r\n          }else{\r\n            alert('No user found');\r\n            this.setState({\r\n              user_name:'',\r\n              user_contact:'',\r\n              user_address:'',\r\n            });\r\n          }\r\n        }\r\n      );\r\n    });\r\n  };\r\n  updateUser = () => {\r\n    var that=this;\r\n    const { input_user_id } = this.state;\r\n    const { user_name } = this.state;\r\n    const { user_contact } = this.state;\r\n    const { user_address } = this.state;\r\n    if (user_name){\r\n      if (user_contact){\r\n        if (user_address){\r\n          db.transaction((tx)=> {\r\n            tx.executeSql(\r\n              'UPDATE table_user set user_name=?, user_contact=? , user_address=? where user_id=?',\r\n              [user_name, user_contact, user_address, input_user_id],\r\n              (tx, results) => {\r\n                console.log('Results',results.rowsAffected);\r\n                if(results.rowsAffected>0){\r\n                  Alert.alert( 'Success', 'User updated successfully',\r\n                    [\r\n                      {text: 'Ok', onPress: () => that.props.navigation.navigate('HomeScreen')},\r\n                    ],\r\n                    { cancelable: false }\r\n                  );\r\n                }else{\r\n                  alert('Updation Failed');\r\n                }\r\n              }\r\n            );\r\n          });\r\n        }else{\r\n          alert('Please fill Address');\r\n        }\r\n      }else{\r\n        alert('Please fill Contact Number');\r\n      }\r\n    }else{\r\n      alert('Please fill Name');\r\n    }\r\n  };\r\n \r\n  render() {\r\n    return (\r\n      <View style={{ backgroundColor: 'white', flex: 1 }}>\r\n        <ScrollView keyboardShouldPersistTaps=\"handled\">\r\n          <KeyboardAvoidingView\r\n            behavior=\"padding\"\r\n            style={{ flex: 1, justifyContent: 'space-between' }}>\r\n            <Mytextinput\r\n              placeholder=\"Enter User Id\"\r\n              style={{ padding:10 }}\r\n              onChangeText={input_user_id => this.setState({ input_user_id })}\r\n            \/>\r\n            <Mybutton\r\n              title=\"Search User\"\r\n              customClick={this.searchUser.bind(this)}\r\n            \/>\r\n            <Mytextinput\r\n              placeholder=\"Enter Name\"\r\n              value={this.state.user_name}\r\n              style={{ padding:10 }}\r\n              onChangeText={user_name => this.setState({ user_name })}\r\n            \/>\r\n            <Mytextinput\r\n              placeholder=\"Enter Contact No\"\r\n              value={''+ this.state.user_contact}\r\n              onChangeText={user_contact => this.setState({ user_contact })}\r\n              maxLength={10}\r\n              style={{ padding:10 }}\r\n              keyboardType=\"numeric\"\r\n            \/>\r\n            <Mytextinput\r\n              value={this.state.user_address}\r\n              placeholder=\"Enter Address\"\r\n              onChangeText={user_address => this.setState({ user_address })}\r\n              maxLength={225}\r\n              numberOfLines={5}\r\n              multiline={true}\r\n              style={{textAlignVertical : 'top', padding:10}}\r\n            \/>\r\n            <Mybutton\r\n              title=\"Update User\"\r\n              customClick={this.updateUser.bind(this)}\r\n            \/>\r\n          <\/KeyboardAvoidingView>\r\n        <\/ScrollView>\r\n      <\/View> );}}\r\n<\/pre>\n
        ViewAllUser.js<\/b><\/p>\n
        import React from 'react';\r\nimport { FlatList, Text, View } from 'react-native';\r\nimport { openDatabase } from 'react-native-sqlite-storage';\r\nvar db = openDatabase({ name: 'UserDatabase.db' }); \r\nexport default class ViewAllUser extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      FlatListItems: [],\r\n    };\r\n    db.transaction(tx => {\r\n      tx.executeSql('SELECT * FROM table_user', [], (tx, results) => {\r\n        var temp = [];\r\n        for (let i = 0; i < results.rows.length; ++i) {\r\n          temp.push(results.rows.item(i));\r\n        }\r\n        this.setState({\r\n          FlatListItems: temp,\r\n        });\r\n      });\r\n    });\r\n  }\r\n  ListViewItemSeparator = () => {\r\n    return (\r\n      <View style={{ height: 0.2, width: '100%', backgroundColor: '#808080' }} \/>\r\n    );\r\n  };\r\n  render() {\r\n    return (\r\n      <View>\r\n        <FlatList\r\n          data={this.state.FlatListItems}\r\n          ItemSeparatorComponent={this.ListViewItemSeparator}\r\n          keyExtractor={(item, index) => index.toString()}\r\n          renderItem={({ item }) => (\r\n            <View key={item.user_id} style={{ backgroundColor: 'white', padding: 20 }}>\r\n              <Text>Id: {item.user_id}<\/Text>\r\n              <Text>Name: {item.user_name}<\/Text>\r\n              <Text>Contact: {item.user_contact}<\/Text>\r\n              <Text>Address: {item.user_address}<\/Text>\r\n            <\/View>\r\n          )}\r\n        \/>\r\n      <\/View>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
        ViewUser.js<\/b><\/p>\n
        import React from 'react';\r\nimport { Text, View, Button } from 'react-native';\r\nimport Mytextinput from '..\/components\/Mytextinut';\r\nimport Mybutton from '..\/components\/Mybutton';\r\nimport { openDatabase } from 'react-native-sqlite-storage';\r\nvar db = openDatabase({ name: 'UserDatabase.db' }); \r\nexport default class ViewUser extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      input_user_id: '',\r\n      userData: '',\r\n    };\r\n  }\r\n  searchUser = () => {\r\n    const { input_user_id } = this.state;\r\n    console.log(this.state.input_user_id);\r\n    db.transaction(tx => {\r\n      tx.executeSql(\r\n        'SELECT * FROM table_user where user_id = ?',\r\n        [input_user_id],\r\n        (tx, results) => {\r\n          var len = results.rows.length;\r\n          console.log('len', len);\r\n          if (len > 0) {\r\n            this.setState({\r\n              userData: results.rows.item(0),\r\n            });\r\n          } else {\r\n            alert('No user found');\r\n            this.setState({\r\n              userData: '',\r\n            });\r\n          }\r\n        }\r\n      );\r\n    });\r\n  };\r\n  render() {\r\n    return (\r\n      <View>\r\n        <Mytextinput\r\n          placeholder=\"Enter User Id\"\r\n          onChangeText={input_user_id => this.setState({ input_user_id })}\r\n          style={{ padding:10 }}\r\n        \/>\r\n        <Mybutton\r\n          title=\"Search User\"\r\n          customClick={this.searchUser.bind(this)}\r\n        \/>\r\n        <View style={{ marginLeft: 35, marginRight: 35, marginTop: 10 }}>\r\n          <Text>User Id: {this.state.userData.user_id}<\/Text>\r\n          <Text>User Name: {this.state.userData.user_name}<\/Text>\r\n          <Text>User Contact: {this.state.userData.user_contact}<\/Text>\r\n          <Text>User Address: {this.state.userData.user_address}<\/Text>\r\n        <\/View>\r\n      <\/View>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
        DeleteUser.js<\/b><\/p>\n
        import React from 'react';\r\nimport { Button, Text, View, Alert } from 'react-native';\r\nimport Mytextinput from '..\/components\/Mytextinut';\r\nimport Mybutton from '..\/components\/Mybutton';\r\nimport { openDatabase } from 'react-native-sqlite-storage';\r\nvar db = openDatabase({ name: 'UserDatabase.db' });\r\nexport default class UpdateUser extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      input_user_id: '',\r\n    };\r\n  }\r\n  deleteUser = () => {\r\n    var that = this;\r\n    const { input_user_id } = this.state;\r\n    db.transaction(tx => {\r\n      tx.executeSql(\r\n        'DELETE FROM  table_user where user_id=?',\r\n        [input_user_id],\r\n        (tx, results) => {\r\n          console.log('Results', results.rowsAffected);\r\n          if (results.rowsAffected > 0) {\r\n            Alert.alert(\r\n              'Success',\r\n              'User deleted successfully',\r\n              [\r\n                {\r\n                  text: 'Ok',\r\n                  onPress: () => that.props.navigation.navigate('HomeScreen'),\r\n                },\r\n              ],\r\n              { cancelable: false }\r\n            );\r\n          } else {\r\n            alert('Please insert a valid User Id');\r\n          }\r\n        }\r\n      );\r\n    });\r\n  };\r\n  render() {\r\n    return (\r\n      <View style={{ backgroundColor: 'white', flex: 1 }}>\r\n        <Mytextinput\r\n          placeholder=\"Enter User Id\"\r\n          onChangeText={input_user_id => this.setState({ input_user_id })}\r\n          style={{ padding:10 }}\r\n        \/>\r\n        <Mybutton\r\n          title=\"Delete User\"\r\n          customClick={this.deleteUser.bind(this)}\r\n        \/>\r\n      <\/View>\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
        To Run the React Native App<\/b><\/h3>\n
        Open the terminal and run the following command in order to run the application<\/span><\/p>\n
          \n
        1. For Android<\/span><\/li>\n<\/ol>\n
          cd project_name && react-native run-android<\/pre>\n
            \n
          1. For iOS\u00a0<\/span><\/li>\n<\/ol>\n
            cd project_name && react-native run-ios<\/pre>\n
            Outputs<\/b><\/p>\n
            \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0On running following command you get the following :<\/span><\/p>\n
            \"\"\"\"<\/p>\n
            \"\"<\/p>\n
            \"\"<\/p>\n
            \"\"<\/p>\n
            \"\"<\/p>\n
            Thanks for giving your valuable time. Keep reading and keep learning<\/p>\n","protected":false},"excerpt":{"rendered":"
            Introduction SQLite is an open-source SQL database used for storing data in mobile devices in the form of text files. It supports all the relational database features. There is no need to establish any linking or connection for performing any operations on the database. It works like other SQL databases, where we can perform any […]<\/p>\n","protected":false},"author":1,"featured_media":6005,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,412],"tags":[],"class_list":["post-6004","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-react-native"],"yoast_head":"\nSQLite database in React Native - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SQLite database in React Native - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Introduction SQLite is an open-source SQL database used for storing data in mobile devices in the form of text files. It supports all the relational database features. There is no need to establish any linking or connection for performing any operations on the database. It works like other SQL databases, where we can perform any […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-29T08:43:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:25:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/SQLite-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1137\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"SQLite database in React Native\",\"datePublished\":\"2020-05-29T08:43:36+00:00\",\"dateModified\":\"2023-01-20T13:25:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/\"},\"wordCount\":468,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/SQLite-2.png\",\"articleSection\":[\"Mobile\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/\",\"name\":\"SQLite database in React Native - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/SQLite-2.png\",\"datePublished\":\"2020-05-29T08:43:36+00:00\",\"dateModified\":\"2023-01-20T13:25:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/SQLite-2.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/SQLite-2.png\",\"width\":1137,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/sqlite-database-in-react-native\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SQLite database in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SQLite database in React Native - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"SQLite database in React Native - InnovationM - Blog","og_description":"Introduction SQLite is an open-source SQL database used for storing data in mobile devices in the form of text files. It supports all the relational database features. There is no need to establish any linking or connection for performing any operations on the database. It works like other SQL databases, where we can perform any […]","og_url":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-05-29T08:43:36+00:00","article_modified_time":"2023-01-20T13:25:21+00:00","og_image":[{"width":1137,"height":630,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/SQLite-2.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"SQLite database in React Native","datePublished":"2020-05-29T08:43:36+00:00","dateModified":"2023-01-20T13:25:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/"},"wordCount":468,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/SQLite-2.png","articleSection":["Mobile","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/","url":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/","name":"SQLite database in React Native - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/SQLite-2.png","datePublished":"2020-05-29T08:43:36+00:00","dateModified":"2023-01-20T13:25:21+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/SQLite-2.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/SQLite-2.png","width":1137,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/sqlite-database-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SQLite database in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6004"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6004\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6005"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}