I’ve known about the React Native for the last few years. It’s a truly appealing framework. You can use it for developing cross-platform applications. This framework was changed by a few people to develop software. And that’s super great.
You will find lots of similarities between the Native and the JS. However, you should know what’s the distinction before you begin developing your first native application. I want to share the major distinction that I have found as a pro web developer while building some native software.
Setup and configuration
Let me tell you a few words about the distinction that will cross a line between these two words or even phrases. The React-Native is a framework. If you start using it, you will notice one super huge thing that will make your life easier with every new day. It has everything that you need for designing your first applications. So you get it and you start coding. Right away. But what about the React JS?
Styling & DOM
It’s time to forget some old-school things like HTML for rendering the application when you use Native. How’s the process going? It’s mapping the native Android / iOS parts for this purpose. And these parts are look like HTML. Let’s think of an example, a Text component responds to a p tag or a View component looks like a div tag and so on.
If you have used a React JS library for rendering HTML, you cannot use it for the second time in case you don’t render your code in the HTML page. Don’t worry as there are various libraries for Native.
A stylesheet pattern for React-Native
None of my prior projects has made me take a look at Flexbox or even use it for work. I’m used to working with older browsers. However, building a great responsive application will make you start using Flexbox with Native. You may get confused at the first time, but you will soon get used to the fact that it’s not CSS and it has another behavior. You will see how great it is right after you get the idea.
Touches and Animations
Hopefully, we can forget about the days of using CSS animation. The Animated API is the element that you may use here. If you remember a well-know Velocity.js library, you will soon get to the point. You will have a wide variety of options for designing the animation that can be a timed one or go alongside with the gestures or anything else that you wish to see. There’s also LayoutAnimation that you can use for shifts, but exclusively for iOS. It’s really easy to use.
When talking about gestures, I’d like to mention the PanResponder. If you have ever heard of the JS touch events, you will easily understand what I mean here. If you are a beginner, you will probably have some troubles at your first stages. But the more you use PanResponder the better you will think about it.
You will then select the proper function from the variants for a different touch event. Some of the variants include the touchend, the touchmove, and the touchstart. You will have the chance to arrange the facts and the gesture states, the location and the directions of the taps, their speed and the origin of the touch.
There are a few things that may seem a bit hard to you and they are such for me. The thing is that you need to define one component that will control the gestures. And making the choice may become a long process. You can spend a few seconds if you are greatly inspired to finish the task as soon as possible or you can prolong this process up to a few days thinking hard about the way out. My advice is to test several variants and choose the one at the end.
Let’s imagine that we have two scenes in one of our first apps that you have built with React. Of course, you might start looking for an analog of the react-router which is a well-known library and you have probably used it for your web apps already. Yeah, we could use it for navigating from one scene to another one. Are there any other libraries available?
There a few attempts to find something alike to the react-router, but they have almost failed. And there are a few reasons for that. Some libraries seem too hard to understand while others don’t offer a normal set of tools for customizing the animation. Or that animation works properly neither on iOS nor on Android. These attempts have led me to Navigator that is one of the React components. And this is the most suitable solution.
I don’t recommend anyone to repeat my way and my experience unless you have plenty of free time and you wish to fail in all the cases but the last one with the Navigator. Choosing this way may be too obvious for some of my readers, so just start using it and that’s it.
Navigator: shifting from scene to scene
If you take a look at modern mobile apps, you will notice one weird thing. You don’t have an opportunity to shift from one scene to another one the way you can do it in the web application. Navigator is a great component for managing the transition or the shift from one scene to another one. It seems hard to understand, but you will love it after a few tries. You can use Navigator for huge mobile software with a huge amount of scenes. One more variant for you is NavigatorExperimental. You can test its work.
There’s one thing that you should keep in mind while coding. It’s not a big secret. The interface and the user experience are not alike.
There are two ways how you can find out the way your software will act out and how it will look like:
- Using one single design for all the applications for all the systems. The design is user-friendly;
- A new DOM, logic, stylesheets, and animations for a certain US and UX.
If you pick up the last list item, Native will easily define the platform that you are using for running the code. It’s good to put the logic of the parts into one file and name it as index.js. Other things can be out in separate files. Mind that the names will differ for iOS and Android and they will be index.ios.js and index.android.js correspondingly.
Here’s an example of how you can organize your folders and files:
You can also try using a Platform module that contains a conditional line in case you don’t want to have two separate files.
Tools for developers
There’s no need to look for any tools or additional packages for React if you are a beginner. In most cases, you will be just fine with the set of components and tools that come with it. You can use Hot Reloading when you need to adjust some slight changes. If you tend to make some changes in the logic of the app, it’s better to use Live Reload.
There’s one thing that can make you a bit happier. If you use React, you have a chance to use most of the tools that you are using with ReactJS. You can run the Chrome Dev Tools to analyze the requests from the network, see the logs in the console and use the debuggerstatements to stop the code. Or you can think of using Redux Dev Tools for viewing the redux store. The Inspector is not a good idea if you wish to analyze DOM as if you were on the web. It won’t work.
If you are planning or you are already developing an application for Android and iOS, you will have to learn the policy of the Xcode and Android Studio. The reason for doing this is preventing any problems when distributing your software to the stores. You will need to publish a native software for the Apple store and you should carefully read the React guide to find out steps for publishing the APK file in the Google Play Market.
I’d like to say a few words about the updates to your software. If you cannot publish an update of the application as you were used to doing with the web apps, you have a chance to make your life easier with the Code Push. This tool will help you distribute the code directly to the user. You will skip the steps of archiving, sending the application to the market and waiting for its approval. If you need to make some huge edits, you cannot use Code Push. But it will fit you for a few minor edits.
I’ll add a few words about the people who work with the Native. And the number of these people is always growing. If you are or you just plan to become a great web developer, you dream to make something unique, it’s high time to start using React-Native. You will definitely love it.