Don’t Start React with React Native

Rafayel Hovhannisyan
SFL Newsroom
Published in
3 min readApr 17, 2019
Source

Most developers start their React journey with React Native (later I will call it RN). But this is not the best choice to make because you need to fundamentally understand the core concepts of a new framework before getting started. And there are reasons.

People usually miss out on the fact that React and React Native are two different things since they depend on different platforms: one is for web, and the other one is for mobile app development. So, switching between these two can make a developer’s life really tough because knowing JavaScript is not enough to handle the situation correctly. It’s like assuming that you can play football professionally just because you are a good runner. In fact, to become a great football player, you need to learn the rules and the concepts of playing football first.

So, in this article, I want to talk about some problems that developers could face should they decide to switch from React to React Native or vice versa.

Imagine a scenario where you are trying to learn something new. It’s an exciting experience, indeed. In the case of mobile development, you are learning two things: mobile app development and React. And here you can risk “spaggetizing” both things and reaching a wrong understanding of what you have learned from both sides.

At the very beginning, React Native can be tough to deal with. You might want to become friends with it, but this friendship is not that easy to achieve. You will burn in agony while trying to understand how to connect, decorate, customize, support both iOS and Android platforms, inject font family, etc.

In React Native, there are no:

  1. `border-radius: 50%;`
  2. `background-image: linear gradient`
  3. `CSS inheritance`
  4. And all building blocks by default display flex and there’s no other option :’(
  5. Ah yeah, you can’t set a background image with CSS :’(
Source

All of this can confuse you, that’s why you should know about these specifics before you dive in.

Since the React Native community is small, you might end up googling RN-related issues and coming across things related to React DOM only.

Another issue connected with using React Native is that its standard component library is not that rich in functions. So, you need to understand whether there is a need to import a third-party module or not. Let’s take a date picker as an example: If you are new to mobile, you cannot predict the upcoming features for it. So you need to figure out whether you should implement it yourself or use and customize an advanced third-party module. As a web developer, you can investigate problems like this much easier.

Issues you can face should you decide to implement forms

The problem is that most examples and code snippets available out there introduce mainly integrations to React DOM controls such as Formik and redux-form. It will be harder to find good integrations in RN.

You will also come across issues like a “dancing keyboard,” “focusing or unfocusing input,” “sliding keyboard over focused input.”

In React DOM, you can just import one of great UI component libraries and don’t care about controls. You cannot do the same in the case of RN because there is a very limited variety of UI component libraries there.

These issues can take some time to resolve, and they might eventually impact the quality of your app and the learning process you are undergoing. In the end, we all want to create valuable and maintainable apps, don’t we? And we also want to learn something new in the long run.

Summing up

So, if you are a mobile developer, you won’t have a lot of problems while working with RN since you are already familiar with all kinds of mobile-related stuff. But regardless of whether you are doing mobile development or web development, make sure to read both React documentation and React Native documentation. If you are to choose which platform to start with, just opt for something you are more fluent at.

Good luck and don’t forget to share your experience in the comments below.

Check out our open roles at https://sflpro.com/job/.

Let’s talk!

Read More:

--

--

Rafayel Hovhannisyan
SFL Newsroom

Senior Software Engineer - Driving Growth @ Podcastle AI. Writing about software engineering, productivity, and personal experiences.