SQLite is a RDBMS which full form is Relational Database Management System. To store data locally in mobile application SQLite Database is used. In today’s tutorial we would learn about Creating SQLite Database and Table in React Native. We would use React Native’s NPM react-native-sqlite-storage plugin to perform all the various task on SQLite. In this tutorial we would highlight 3 basic concepts of SQLite.
Contents in this project Example of Creating SQLite Database Table in React Native:
1. The first step is to download and install react-native-sqlite-storage NPM plugin in your current react native project. So open your react native project Root folder in Command Prompt in Windows and Terminal in MAC OS and execute below command.
|
1
|
npm install —save react–native–sqlite–storage
|
Screenshot:
Screenshot after done installation:
2. In React Native version bigger than 0.60 there is no need to execute any additional command in Android, However for iOS we have to execute pod installation command to link the newly installed SQLite Storage Plugin to project. So execute below command in MAC OS for iOS react native project.
|
1
|
cd ios && pod install && cd ..
|
Screenshot:
Now our both Android and iOS project is ready to use with SQLite Storage.
3. Open your project’s main App.js file and import SafeAreaView, Text, View, StyleSheet, Alert and TouchableOpacity component.
|
1
2
3
|
import React from ‘react’;
import { SafeAreaView, Text, View, StyleSheet, Alert, TouchableOpacity } from ‘react-native’;
|
4. Import openDatabase from ‘react-native-sqlite-storage‘ plugin.
|
1
|
import { openDatabase } from ‘react-native-sqlite-storage’;
|
5. Creating a new database named as SchoolDatabase.db and assign the database control to variable db.
|
1
|
var db = openDatabase({ name: ‘SchoolDatabase.db’ });
|
6. Creating our main export default functional component named as App. This is our main View component.
|
1
2
3
4
5
|
export default function App() {
}
|
7. Creating a function named as createTable(). Inside the method we would make a table named as Student_Table with fields student_id, student_name , student_phone and student_address. In this method first we would check whether there are already a table named as Student_Table is present or not if not present then it will create a new table and if present then it’ll not create a new table.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const createTable = () => {
db.transaction(function (txn) {
txn.executeSql(
“SELECT name FROM sqlite_master WHERE type=’table’ AND name=’Student_Table'”,
[],
function (tx, res) {
console.log(‘item:’, res.rows.length);
if (res.rows.length == 0) {
txn.executeSql(‘DROP TABLE IF EXISTS Student_Table’, []);
txn.executeSql(
‘CREATE TABLE IF NOT EXISTS Student_Table(student_id INTEGER PRIMARY KEY AUTOINCREMENT, student_name VARCHAR(30), student_phone INT(15), student_address VARCHAR(255))’,
[]
);
}
}
);
})
Alert.alert(‘SQLite Database and Table Successfully Created…’);
};
|
8. Creating return block. In the return block we would make Safe Area View component -> View component and make a Touchable Opacity component. We would call the createTable() method on button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.mainContainer}>
<TouchableOpacity
style={styles.touchableOpacity}
onPress={createTable}>
<Text style={styles.touchableOpacityText}> Click Here To Create SQLite Database and Table in React Native </Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
padding: 10,
},
touchableOpacity: {
backgroundColor: ‘#1B5E20’,
alignItems: ‘center’,
borderRadius: 8,
justifyContent: ‘center’,
alignItems: ‘center’,
width: ‘100%’
},
touchableOpacityText: {
color: ‘#FFFFFF’,
fontSize: 23,
textAlign: ‘center’,
padding: 8
},
});
|
10. Complete Source Code for App.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import React from ‘react’;
import { SafeAreaView, Text, View, StyleSheet, Alert, TouchableOpacity } from ‘react-native’;
import { openDatabase } from ‘react-native-sqlite-storage’;
var db = openDatabase({ name: ‘SchoolDatabase.db’ });
export default function App() {
const createTable = () => {
db.transaction(function (txn) {
txn.executeSql(
“SELECT name FROM sqlite_master WHERE type=’table’ AND name=’Student_Table'”,
[],
function (tx, res) {
console.log(‘item:’, res.rows.length);
if (res.rows.length == 0) {
txn.executeSql(‘DROP TABLE IF EXISTS Student_Table’, []);
txn.executeSql(
‘CREATE TABLE IF NOT EXISTS Student_Table(student_id INTEGER PRIMARY KEY AUTOINCREMENT, student_name VARCHAR(30), student_phone INT(15), student_address VARCHAR(255))’,
[]
);
}
}
);
})
Alert.alert(‘SQLite Database and Table Successfully Created…’);
};
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.mainContainer}>
<TouchableOpacity
style={styles.touchableOpacity}
onPress={createTable}>
<Text style={styles.touchableOpacityText}> Click Here To Create SQLite Database and Table in React Native </Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
padding: 10,
},
touchableOpacity: {
backgroundColor: ‘#1B5E20’,
alignItems: ‘center’,
borderRadius: 8,
justifyContent: ‘center’,
alignItems: ‘center’,
width: ‘100%’
},
touchableOpacityText: {
color: ‘#FFFFFF’,
fontSize: 23,
textAlign: ‘center’,
padding: 8
},
});
|
Screenshots:
Also Read :
React Native JSON Parsing ListView From MySQL Database Android iOS
Get Image from Local Resource Folder in React Native Android iOS Tutorial
React Native Pass TextInput Entered Value From One Activity Screen to Another
Add Custom External Text Fonts in React Native App Android iOS Tutorial
React Native Highlight Some Text Within Text String Yellow Color
