Introduction to react native

React native is a complete framework for the development of native Android and iOS applications created by Facebook. It uses JavaScript as the scripting language and have some predefined formats to create programs. Due to these formats, it compiles the code into native, application specific code. You just need to write in JavaScript and it will handle everything by itself.

The idea of converting a script into native one is quite simple. You need to follow a predefined format for adding components in your scripts like text, images, input fields, Webview etc. and it replaces them by the native components during compilation.

 Beginners View of React Native

While developing in react native, you will become friend of beautiful red screen. Believe me, you are going to see it in your dreams. Write something and you will be offered a red screen. Update something and you will again be offered a red screen. Red screen – red screen – red screen and more red screens. These screens are for showing you the errors. Although error reporting is bad in react native. Most of the times it won’t give you any useful info to debug your code and sometimes it becomes nightmare. But with practice you will know that errors are generally the same. React native is very simple to work on.

The node package provided by Facebook has many components. But when you are building a complex app, you will need to install components created by communities and 3rd parties. Since the technology is not quite stable, you will face trouble with versions. It changes at rapid speed and breaks the code. Like, we were using the navigator module provided by Wix (react-native-navigation, because react native do not provide universal navigator component in its package) and the version of React Native was 0.51. Navigator installed properly in our application. After 2 days, we installed react native on different computer and started installing react-native-navigation, but we were welcome with scary error. We spent hours in understanding what just happened. It was working just before 2 days and now its not. Why? We looked at the version of react-native and found that we had new one (0.52). There was a file missing in it which Wix was using in its module. We had two options, either copy that file from version 0.51 or downgrade from 0.52 to 0.51. We took the safe side and downgraded the installation.

The major problem we faced was to deal with errors. We are web developers and never worked on mobile applications. Android is new and so its errors. During compilation you will get errors mostly from Android side. Most of the times, you don’t commit mistakes but build fails and it requires to clean the gradle. But since you are a beginner, you have to spend hours understanding this fact.

What our application is about

Our application name is Krishna Kutumb. It is a devotional social networks of India. We share all kinds of religious, spiritual, Yoga and Ayurvedic content. People can share posts, chat with each other, ask question, read stories etc. The overall design is complex. We need to synchronize user data with the feed and different profiles on our platform. Keeping tracks of likes, comments, shares, visits etc. Since the platform is religious, we monitor all the posted content before approving it. So, a separate section for approving content and providing access permission was required too. Overall it is much more than what meets the eyes.

The mission of Krishna Kutumb is to create a large community of Indians and later encourage people to work in groups in their respective areas for social causes. We believe that community is super powerful thing. It can change the whole map of a nation. With proper leadership, it can bring happiness in the society. With the help of a single platform we can bring those together who solely works for the welfare of society, animals and environment. Such people can lead others and improve the present situations. We aggressively search for such people to join us, as a leader for a mass, in our mission.

Role of React Native in Krishna Kutumb

Our application is not entirely native else its hybrid. At places, we have used webview to display the web content. For example, we have placed our Krishna Kutumb Blog in one of the tabs in our application. Also, for audios and videos, we are using webview. We tried many audio-video native component libraries but nothing worked for us. React native is still unstable and that’s why libraries get outdated pretty soon. Also, for displaying external links, we are using webview so that users shouldn’t need to leave our application.

Some of the libraries we have used in our app includes-
1. react-native-navigation – Navigation is the essential part of an application. React native do not provide an inbuilt navigator component and that’s why we used external library. The major reason for using library created by Wix is to get native navigator. All other libraries provides javascript implementation of navigator. But Wix has created the native navigator library.

2. react-native-device-info – This library is used to get the unique id of mobile phone. With the help of this unique id, people can chat with app admin without the need of logging in.

3. react-native-fbsdk– This is the sdk of Facebook for react native. We have used it for Facebook login, share and keeping track of app installs.

4. react-native-fetch-blob– A single library to deal with everything related to images, be it downloading or converting to base64. We used it to download images when people opt to share on whatsapp.

5. react-native-htmlview – The text component of react native is not like websites. It won’t convert a unicode into a symbol. The data retrieved from our servers contains unicodes which works alright on website but not on app. So we used this library to convert unicodes into symbols.

6. react-native-onesignal– This library provides functionality for sending tray notifications in our app. Since we were using onesignal in our website, we decided to use it for app too.

7. react-native-image-crop-picker – A wonderful library to select images and videos from the gallery of mobile phone. Our application is a social community, so posting images and videos are quite common. This library makes it very easy. At first we built our picker from cameraroll (built in react native bundle), but there was issue with fetching video thumbnails.

8. react-native-restart – When a user starts our application for first time, it asks for their language preference. To globally change the language of app and content, we needed to restart our application. The requirement gave birth to search of this library.

9. react-native-share – Although there is a built in share component in react native, but it didn’t allow us to share on particular app like Whatsapp. We needed the functionality to share on Whatsapp only. Also sharing of image on whatsapp wasn’t working with built in share component. That’s why we decided to use react-native-share.

10. react-native-socket.io-client – This library allows us to use socket.io in react native apps. Our chat functionality is based on socket.io.

we used Notepad++ to develop our entire react native app but we will recommend VsCode to beginners, we have also shared an article featuring 5 best react native IDE. We will keep updating you guys with the extensions and changes we make in future. Also, we will try to create an article describing the scripts behind the creation of this application.