What is React Native?

It is a JavaScript framework that is used to build cross-platform applications. React Native uses React.js. Because of this, opening a file from a React Native project, a Reactjs developer will find the structure and syntax used quite familiar. A Reactjs Native project can be packaged for both Android and iOS.

What are the differences between Reactjs and React Native code?

There are many things that are different between Reactjs and React Native. These differences become more prominent the closer we are to production.

During development, the differences might not seem much, but when pushing the code to a production environment, there is a noticeable difference between the two. After all, for Reactjs, the final result would most probably be a website. For React Native, it would be a mobile app.

Here are 3 primary differences a Reactjs developer will encounter when working with React Native for the first time.

1. Grouping elements

In React, to group some elements together and to create visual blocks of code, we mainly use div. Here's an example:

However, this code will not work in React Native. Since React Native code needs to map to native components on mobile, we need to use the View component instead of div. Let's change the above example to work in React Native:

Even though React Native uses Reactjs, in the end, the code needs to run on mobile devices. UI components like View help to map React Native code to native UI code.

So, in a React Native application, divs are no longer used. The View component needs to be used instead. You can think of the View component as React Native's alternative for div. When it comes to differences between Reactjs and React Native, these UI components stand out easily.

Speaking of differences, did you notice how the row and container classes were applied in React Native? That is the second difference.

2. Styling without CSS files

Unlike React, React Native does not style components with CSS files. Any styles needed are supposed to be created with the StyleSheet component. Let's use the example from the first point. This time, take a look at the styles as well:

Does this look familiar? It should. This is similar to how inline styles are written in React. There are also a few differences.

In React, padding: '20px' would be a typical line in an inline style. In React Native, this would instead be padding: 20. Of course, something like padding: '5%' is written the same way in React Native.

Do keep in mind that some style attributes might not work with relative units like % em rem. If you want to use these relative units for these attributes, there is a package available. It will be linked at the end of this article.

Another thing to keep in mind is that the shorthand syntax for various CSS attributes is not available in React Native. For example, take a look at the following comparison between a property inside a CSS file and its equivalent in React Native:

Although these longhand forms can also be used in CSS, it's the shorthand form that is usually used for convenience. In React Native, however, these shorthands cannot be used.

3. Default layout for all elements

In React Native, all components have a display of flex and direction of column applied by default. So there is no need to specify display: flex. Since flexbox is enabled everywhere by default, it becomes easier to style the layout.

I found it a little confusing in the beginning since I was used to the default flex direction of row. Over time I did get used to the column direction, but do keep that flex direction in mind before you start styling a bunch of nested components.

I think this default direction makes sense if you consider how a mobile device is usually held in portrait mode.

Wrapping up

These are some of the few differences that will seem unfamiliar to you when working with React Native for the first time. Pushing a React Native app to production can seem confusing to a developer who has never experienced that before.

If you have worked with Reactjs before, it will at least make the developing process a bit easier. But remember, what works in Reactjs might not always work in React Native.

The differences between React Native and Reactjs are because of different targets - a mobile application instead of a web application. Other than that, the rest of the development experience is similar to working with Reactjs.

Helpful resources

1. This package is a workaround for using the percentage unit for a responsive UI.
2. The official documentation on deploying React Native applications for both Android and iOS is well written.
3. Here is another great article on deploying React Native applications.
4. Expo is a framework that helps quickly develop, build, and deploy React Native applications.
5. Does your React Native application have a complex navigation structure? This article might help you out.