25 September 2018
8 minutes read
When you are passionate about technologies you can't stay indifferent about some new popular tools. When we started a project using React Native our front-end engineers took two contradictional positions - the ones who enjoy the technology, and the ones who strongly dislike it.
Let's start with some React Native "Сons", sharing the opinion of our developer Igor after he got acquainted with RN.
Meet Igor.
Igor is a full-stack developer at UKAD. He is a big fan of car racing, Japanese culture, Node JS, and Ionic technology.
And he sincerely dislikes React Native.
Here is why:
I am unsatisfied with React Native consistency. The scarcity of the react library makes a developer find and pick the modules he requires:
There are no guarantees that the found elements will work well together and will have the similar design. NativeBase is a comprehensive UX library but it still has only basic elements.
There are many options for features like localization or storage but you may find problems with localizing the text in the header for example, while the rest of the app is localized without any issues.
The community is new and sometimes most of what you do in your app depends on some packages that could be on the early stage of development. And for example, the navigation could be problematic. I personally use React Navigation in my projects and I have spent days fixing issues. Packages, in general, are bound to break here and there.
I experienced a few conflicts such as:
Markup, component logic and styling are not separated. JSX is the official React Native file type that contains JavaScript, CSS and HTML. Usually, developers look for structural elements in HTML files, style attributes in CSS files and functionality in JS files. But in React Native they all are kept in the same file that is difficult to navigate.
By default, CSS is wrapped into a JavaScript object and attributes are in camelCase as opposed to the default convention (lowercase separated by hyphens).
import React, { Component } from 'react';
import {
View
} from 'react-native';
import * as Progress from 'react-native-progress';
export default class App extends Component<{}> {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Progress.Pie progress={0.2} size={50} color="#2245FF" />
</View>
);
}
}React Native is still under development and is largely unstable. The current version is 0.57. With every update, some things break while others get fixed. When that happens, a lot of outdated packages break. This is when a developer has to fork the package and figure out the solution by himself.
There are so many components which behave differently between the two platforms simply because of how the two platforms are different at the core. Anyone who has been using React Native for a while would suggest developing both platforms in parallel.
Your CSS knowledge will help you, no doubt! But then again there are things which will work on iOS but not on Android. Usually, you can use alternative styling to display the UI elements the same way (or close enough) which can present you a similar effect though. For example, shadows work in iOS but you have to use elevation in Android.
To my mind, state management is not as extensive or well arranged as it should be, plus you don't find all your answers with a simple Google search. You may have to visit GitHub issues to find answers and also to realize that the bug you are facing is many months into the discussion with no potential solution.
React has its own inbuilt state management, but it is not suitable for large projects in most cases.
I do understand that the apps based on React Native usually work faster, especially if you display a lot of media in the app. But from a developer's perspective, the actual development process is more complicated.
We are encouraging our developers to be open about their experience and to share their opinions. And we are happy to see that they are ready to do so. Soon we plan to post the alternative point of view, from another member of our team Andrew.
