Learn React Native: introduction, Navigation, Data Storage, and a Native module
React Native Logo
This is part of the series React Native for Beginners and this article is the first installment towards it. It is assumed that you already know React.
The best way to learn anything is by doing it!
As a tech enthusiast, I always try to look for opportunities to learn new tools and tech. So when my brother wanted a native IOS app, it was a perfect opportunity to learn the famous React Native.
While creating the App, I learned about different components such as Navigation, Storing data, Calling APIs, and etc. Each are very important and I will explain each of them. One can create any application using these components.
What we are going to cover?
Create a Native App QR Scanner that scans a QR code, store it in local storage, and at the end make it beautiful. This is going to be a long tutorial so grab yourself a cup of coffee and sit tight. Roughly, it is going to take about 1:30–2 hour but …
The output will be something you can show to your colleagues and be proud of it.
Source Code
The application code is available on GitHub. You can get the application code according to the app version by checking out particular branch. For example, To get the v0.3.0 application code,
git clone https://github.com/drex44/QR-Scanner.gitgit checkout v0.3.0
The code has three branches,
- master: code for QR Scanner v1.0.0
- v0.3.0: code for QR Scanner v0.3.0
- v0.4.0: code for QR Scanner v0.4.0
Tutorial
We will design our app in incremental model. We will add new functionality in each iteration. I encourage you to copy the code and then look at it to understand the significance of each line. If you have any doubt then comment below. It will take time but I will surely answer all of your questions.
May the force be with you and let the hacking begin!
v0.1.0
Goals: Hello World App, Using a UI library, Testing your App
We can create our react native application using two famouse toolchains. One is expo and another is react-native.
As the official docs says,
Expo is a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React.
Expo provides a shared native runtime so you don’t write native code, you focus on writing your React app in JavaScript.
If you want to use any native module such as camera, location service etc then you have to use npm module which will contain some platform specific native code and then you have to link it. You can even create your own native modules by writing native code but then it won’t be pure javascript.
The main benefit of using expo toolchain is that they maintain the native module so that we can focus on building our application. Upgrading and maintaining the app is also very easy. But at the same time you have less control over your app than react-native-cli.
So when we want to create applications fast, use expo. Once the application grows large then one can perform eject (similar to CRA eject) and it will be converted to react-native toolchain.
Now let’s get to the coding and create our first application. Run below command to install expo-cli and then create a new project using it. It will ask you to select a template, choose “blank”.
npm install -g expo-cli
Open your favorite IDE and edit App.js. This is your main entry point in the application. We cannot use HTML elements in the React Native app. We have to use React Native components. Paste the below code in your App.js,
App.js
We have just changed the text inside Text component to “Hello World!”. “View” component is the building block in react native applications. It is used in the same way as a div element is used in the web app. Now it is time to run the application. Expo has IOS/Android client application. you will need the expo client to run the application or if you prefer using emulator then you have to setup android studio for android and xcode for IOS. Using expo client is fast and we can get started within minutes so we will use the expo client. Download it on your device and then run below command inside the project root,
npm start
Now open your expo client on the mobile device and scan the QR code. Make sure that both your computer and the mobile device are on the same network. if they are not then you can create and login to your expo account in your computer and mobile device to test the application over the internet. Congratulations, you have successfully created and ran a native application.
Result
v0.1.0
You can check out the official react native components from the docs and it is also possible to create our own UI components. As the need grew to create better components, various open source packages came forward with the solution. Some of the famous options are Native Base, React Native Elements, Shoutem-UI. We will be using Native Base.
Install Native Base, react-native-easy-grid(for layouts) and vector-icons(for icons),
npm install native-base --savenpm install @expo/vector-icons --savenpm install react-native-easy-grid --savenpm install
or
yarn add native-base --saveyarn add @expo/vector-icons --saveyarn add react-native-easy-grid --saveyarn
Now change the App.js with the below code,
App.js
Result
v0.1.1
For more information, check out Native Base Components.
The code written in componentWillMount() is to load the fonts before the component is rendered. These fonts are used by Native Base internally and it will throw a runtime error if those are not loaded before the component is rendered.
We won’t be using footer and custom header so we will delete them in the next step. I used the default example here to showcase how beautiful app can be created using existing UI libraries.
v0.2.0
Goals: Navigation
Just as one can use URL/routes to structure the web application, one has to use different screens in a native application. We basically create different screens and call each screen based on some user input and predefined conditions in the App.js(remember, App.js is single point of entry in our app). We can create our own Navigation mechanism and handle different screens by showing/ hiding different components inside our App.js but we don’t want to reinvent the wheel.
We will be using react-navigation which is also suggested on the official docs. So let’s install it.
npm install --save react-navigation
Create a new folder named components and a new file named Navigation.js in it. Copy the below code in Navigation.js,
components/Navigation.js
The code is very simple. We create three screens named, Scanner, History, and Result. Screens are nothing but a react component. Here, we have created three components named ScannerScreen,HistoryScreen, and ResultScreen. Then we create a RootStack where we define the names of the screens and assign React components to them. i.e. we have assigned Scanner name to the ScannerScreen component. Then we specify the initial screen to be shown by specifying initialRouteName. Finally, we export the RootStack by wrapping it inside createAppContainer.
This is very important step so don’t forget to wrap your RootStack inside the createAppContainer otherwise you will get an error.
React navigation automatically sets “navigation” object inside the Screen’s props when we create the stack. it is used to perform various navigations inside the screen. For example, here in the ScannerScreen, we have used it to navigate to the other screens, History and Result.
Finally, to see our Router in action, we will import it in App.js and use it. This is how it will look after the updates,
App.js
Congratulations, now you know how to handle multiple Screens.
Result
v0.2.0
If you’re curious about the navigation bar then it is added by react navigation by default and it can be controlled globally and also locally in each screen. Here we have configured the header bar locally in each component. i.e. In ScannerScreen, we have removed the header completely. In HistoryScreen and ResultScreen, we have assign header titles. For more information, check out configuring the header bar on react navigation official docs.
Fun Fact: Consider a stack navigator with screens A and B. After navigating to A, its
_componentDidMount_is called. When pushing B, its_componentDidMount_is also called, but A remains mounted on the stack and its_componentWillUnmount_is therefore not called. When going back from B to A,_componentWillUnmount_of B is called, but_componentDidMount_of A is not because A remained mounted the whole time. To overcome this, we have to use lifecycle events provided by react navigation.
v0.3.0
Goals: How to store data locally.
Every native application needs to store data such as user status, logged in status, app configuration etc. We can use SecureStore, AsyncStorage, SQLite, and Realm. This are most widely and easy to use services.
Realm is very famous and used widely but you have to perform expo eject to use it so we won’t be discussing it here. But it is useful to know about such tool so you may use it in future.
SecureStore and AsyncStorage both are key-value storage system. The only difference between them is the way they store the data. SecureStore encrypts the data while AsyncStorage stores it in plain text.
We won’t be using SecureStore or AsyncStorage. We will only use SQLite in our application but I have mentioned them here because they are very useful and easy to use.
SecureStore
iOS: Values are stored using the keychain services as kSecClassGenericPassword. iOS has the additional option of being able to set the value's kSecAttrAccessible attribute, which controls when the value is available to be fetched.
Android: Values are stored in [SharedPreferences](https://developer.android.com/training/basics/data-storage/shared-preferences.html), encrypted with Android's Keystore system.
we can use below methods to manipulate the data.
SecureStore.getItemAsync(key)SecureStore.setItemAsync(key,value)SecureStore.deleteItemAsync(key)- For more information, check out official SecureStore docs.
AsyncStorage
It has the similar API as SecureStore. we mainly use below methods,
AsyncStorage.getItem(key)AsyncStorage.setItem(key, value)AsyncStorage.removeItem(key)
For more methods, please check the official expo docs.
SQLite
When we want to save large amount of structured data then we can use SQLite. SQLite is local lightweight SQL database.
As mentioned above, An alternative to SQLite: Realm Database is a fast, easy to use, and open source alternative to SQLite and Core Data.
We will create a new Database object from the SQLite and perform some transaction on it.
Create a new file “components/SQL.js” and paste the below code in it,
As the Screen components grow, it will be tough to keep it in the Navigation.js. So let’s separate the Navigation and Screen components. Create a new folder named Screens. Create three files ScannerScreen.js, HistoryScreen.js, and ResultScreen.js. So the Navigation.js will look like this now,
components/Navigation.js
Use the below code for each screen.
Screens/ScannerScreen.js
Screens/HistoryScreen.js
Screens/ResultScreen.js
Finally, we have to call the InitDatabase method into App.js,
App.js
You can add a new row in the database using the input field. Type something and click on ADD TO DB. To check the stored results, check the history screen.
Result
v0.3.0
v0.4.0
Goals: Using the camera/BarCodeScanner modules from expo
When we build a native application, we will most likely use native features. Before using the native features, we need to ask for the permissions for using them. We can do this by using Permission component from expo. We will ask for Camera permission. Another module we will use is BarCodeScanner to scan the barcode. It is just a wrapper over Camera module(You can also use Camera module directly to scan the barcode).
Open ScannerScreen.js and paste the below code. Look at the code and notice that we are checking the permissions in componentDidMount() method. Once the permission is given, we render the BarCodeScanner in the full screen. We overlay one History button to check the previous scanned QRs.
Even when the QR code is scanned, it won’t stop the camera and will still try to scan the QRs. So when another screen will be in focus, still the camera will be active and it will keep scanning the QRs. To overcome this, we have wrapped our component in withNavigationFocus from react-navigation. It gives us a method isFocused in the props to check whether the ScannerScreen is shown(Focused) on the actual device. We use this prop to conditionally render the BarCodeScanner component.
Screens/ScannerScreen.js
Screens/ResultScreen.js
In ResultScreen component, We just fetch the qr from the navigation parameters and show it in the Text component.
Result
v0.4.0
Now the application is complete and is functioning but the UI is not very intuitive. So let’s correct it and improve the UI.
v1.0.0
Goal: Better UI
This code is pretty much self explanatory. I am just using style properties and other components to make the UI better. I am not changing any boilerplate code. So I haven’t written any explanation for the code. However, if you have any doubt then mention it in the comments below, I will answer them.
Create a new file inside components named “commons.js” and paste the below code,
components/commons.js
Change the code in the below Screens also.
HistoryScreen.js
ResultScreen.js
Screens/ScannerScreen.js
Result
v1.0.0
Source code
The application code is available on GitHub.
Homework
It would be a waste of time if you forgot what you learnt. So here is some homework. Take your time and finish it yourself. I haven’t provided any code for these tasks anywhere. if you face any difficulties then comment and I will answer them.
- Add a button to delete the QR code in the HistoryScreen and ResultScreen.
- Add a button (dots-three-horizontal) in the top right corner to open the SettingsScreen.
- Play a sound when the QR code is scanned successfully. Give option in the SettingsScreen to change the behavior.
- Vibrate the phone when the QR code is scanned successfully. Give option in the SettingsScreen to change the behavior.
Hint: Save the settings for Sound and Vibrate in AsyncStorage.
If you can think of other ways to improve this application then comment below, I will add it to this section.
Next Up
I tried to cover many topics in this article but it became very lengthy, and so I could not cover the APIs section. So I will cover how to perform user authentication and synchronize data with the server in React Native for beginners 2.0 article where we will create QR Scanner v2.0.0.
Conclusion
Keep learning and may the force be with you. If you need an article on any topic then do let me know. I will try my best to help you. If you have any questions or suggestions, then leave them in the comments below.
P.S. If you found this article helpful, clap! 👏👏👏 It feels rewarding and gives me motivation to continue my writing.
How I went from being a contributor to an Open Source project maintainer_I was a lone software developer. When I was in college, I attended the KDE conference. It was my first encounter with…_medium.freecodecamp.org
Concepts to become an advanced React developer_Increase you react level by using these techniques!_medium.com