CRUD Operations on SQLite Database in React Native Example

Hello guys, As we have learn about SQLite database in our previous tutorials. We had perform data insert, data view functionality but still 2 more unique features is remaining.  Which is Editing or Updating single data using ID and deletion of selected record in SQLite. Today we are making a fully advanced tutorial of SQLite database in react native performing all CRUD operations Create, Read, Update and Delete. We would also use React Navigation in our current tutorial in order to use the multiple screens. There are three screens present in our example one for inserting data, one for showing all entered data in FlatList component and finally one for updating data and also deleting current record. So in this tutorial we would learn about Crud Operations on SQLite Database in React Native in Android iOS Example.

React Native Libraries we’re using in our example:

  1. React Navigation : To use multiple screens in our tutorial.
  2. react-native-sqlite-storage : To use SQLite database in react native app.

Contents in this project Crud Operations on SQLite Database in React Native Example:

1. The first step is to install the react navigation and its supporting libraries. I had already make tutorial on Installing React Navigation 5.x Guide. So visit my tutorial and follow step 1, 2 and 3 .

2. Visit our react-native-sqlite-storage installation guide tutorial and follow step 1 and 2.

3. Now all the installation is finish, Next step is to start coding for app. So open your project’s main App.js file and import SafeAreaView, Text, View, StyleSheet, Alert, TouchableOpacity, TextInput, FlatList, useState, and useEffect component.

4. Import openDatabase from react-native-sqlite-storage, NavigationContainer, useIsFocused from @react-navigation/native and createStackNavigator from @react-navigation/stack library.

5. Creating a global variable named as db and here we would make our SQLite database named as SchoolDatabase.db.

6. Creating our first home screen functional component named as HomeScreen. This is the home activity of our application. I had already explained current screen on our previous tutorial. So read my previous tutorial for brief explanation and follow step 5.

7. Creating next screen functional component named as ViewAllStudentScreen. In this screen we would display all the entered records in SQLite database. When user clicks on any record then it will automatically navigate to next screen to Edit the current selected record.

8. Creating our final screen component named as EditRecordScreen. In this activity first we would fill the student records sent by previous screen into Text Input component and update as per user requires. We would also give the Delete current record option for user to delete the opened record and navigate to previous screen.

9. Creating createStackNavigator() component object named as Stack. Now we would make the export default function App and call all 3 above screens in NavigationContainer.

10. Creating Style sheet.

11. Complete Source Code for App.js file:

Screenshots:

CRUD Operations on SQLite Database in React Native Example

CRUD Operations on SQLite Database in React Native Example CRUD Operations on SQLite Database in React Native Example CRUD Operations on SQLite Database in React Native Example

Leave a Reply

Your email address will not be published. Required fields are marked *