React Native Tutorials -5
Welcome to the part-5 of the series. You can find part-4 here. We will learn to integrate SQLite database in this part.
You can also learn to integrate Async Storage in my app from my blog here. Also, read abot Custom fonts from my blog here.
To start with SQLite, we will first have a basic structure in our project. We will have Stack Navigation back in App.js file
After that create a new LoginComponent.js file and add the below content in it. Here, we have two TextInput and a Button.
It will show like below in our emulator.
Now, create a HomeComponent.js file and inside it put the below content.
It will show like below in our simulator.
We will use this github to add sqlite in our project. So, we will install the module as per the below command.
npm i react-native-sqlite-storageBecasue we are using a Mac M1 machine, we need to run the below commands.
After that in LoginComponent.js file, we will first import SQLite and after that open the database.
Inside the useEffect(), we are calling the createTable function. Here, we are creating a table with Name and Email.
We have also added an INSERT query inside the setData, which will update the name and email. After that we are navigating to the Home
Next, in the HomeComponent.js file, we will again open the connection to the database. After that in useEffect we are calling the getData(). Inside the getData, we are selecting the Name and Email and putting it in the respectative state variables.
Now, in the Login screen, enter the Name and Email and press Login button. We will be taken to the Home Screen with our data saved in local SQLite database.
Now, we will add the functionality to update and delete the data in our HomeComponent.js file.
Now, we are able to update and remove the data sucessfully.
We will next use redux in our application for state management. For this we need to install redux, react-redux and redux-thunk in our project. We will be implementing Redux in the way we implement in web
npm i redux react-redux redux-thunkFor this first create a redux folder and add four files inside it. In the types.js file, add the below content. Here, we are creating two variables.
After that in the actions.js file, add the below content. We have a simple action creator to set the anem and email.
Next, in reducers.js add the below content. Here, we have a initialState and a userReducer function for the two cases.
Lastly, we will create the store.js file, which will use the reducer.
Now, as per redux logic we have to wrap the main component with provider. It is App.js in our case.
Now, in the LoginCompoent.js file, we will use the useDispatch and useSelctor hooks. We will use them to get the latest state of name and email. And also to dispatch the values.
Also, in the HomeComponent.js file we will use the useDispatch and useSelctor hooks.
Now, in our app we are able to store the data permanently, even when we refresh the app.
Lastly, we will learn to fetch data in our app using redux. For this first in the types.js file add a new variable for GET_USERS.
After that in actions.js file add the import for GET_USERS. After that the json placeholder endpoint, through which we are going to get the data.
After that in the getUsers function, wea re using the fetch api to get the data. Also, dispatching the payload to reducer here.
Now, in the reducers.js file, we will add the new state of users. And also a case for the same in the switch case.
Now, in the HomeComponent.js file we will first dispatch the getUsers from useEffect hook, after doing the required imports.
Now, we will show our data through a FlatList and will also add styles for it.
In the home screen, we are able to get all the data from our API endpoint.
You can also learn to add Google maps in our project by following this blog.
This completes our part-5 and also the final part. You can find the code for the same here.
