Example of Insert Data Into SQLite Database in React Native

In our previous tutorial we had learn about Creating Database and Table in SQLite, This tutorial is the second part of SQLite tutorials. Today we would learn about how we can insert data into SQLite database in react native using TextInput component on button onPress onClick event. We would use the same Database and Table we had earlier created in previous tutorial as base of current example. We would also show the entered data on Terminal window after insertion to make sure.

Contents in this project Example of Insert Data Into SQLite Database in React Native Android iOS:

1. Before getting started, you have to visit our previous tutorial about Creating Database & Table in react native. Because all the installation guide and basic database creating quires I’d explained there. Here is the link of my previous post.

2. Open your project’s main App.js file and import useState and useEffect methods. We are using functional component in our current tutorial with States. As you all know to use State in functional component we have to import the useState method useEffect. If you want to learn about functional component then here is the link.

3. Import SafeAreaView, Text, View, StyleSheet, Alert, TouchableOpacity and TextInput component in your project.

4. Importing openDatabase from react-native-sqlite-storage plugin. If you’re enable to know about SQLite Storage plugin then read my this tutorial.

5. Creating a global variable named as db and here we would make a new Database named as SchoolDatabase.db . This is our SQLite database in which we would perform all the data insertion.

6. Creating our export default main App functional component.

7. Creating 3 States named as S_Name, S_Phone and S_Address. We would use these states to store the entered data into Text input component and form there we would enter this data into SQLite table. We would also make 3 State updating method named as setName, setPhone and setAddress to update the State values.

8. Creating useEffect() method which works as Component Did Mount method we had use in class components. We would pass an empty argument in useEffect to call it once. In this method we would execute the command of creating Table in our SQLite database. Our table name is Student_Table. Our table has 4 fields student_id, student_name, student_phone and student_address.

9. Creating a function named as insertData(). In this function we would enter data into SQLite database table. The data we would use to enter is came from typed text in Text input component States.

10. Creating a function named as viewStudent(). Inside this function we would simply print all the entered data on Terminal window. This would make sure the data is successfully entered.

11. Creating return() block. Here we would make 1 Text component, 3 Text input components and 1 Touchable opacity component.

12. Creating Style.

13. Complete Source Code for App.js file:

Screenshots: