There are many things that are different between React 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.
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 React and React Native, these UI components stand out easily.
Speaking of differences, did you notice how the
container classes were applied in React Native? That is the second difference.
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.
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.
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.
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.
This is also what makes React Native easier to get started with if you have worked with Reactjs.
The differences between React Native and React 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.
- This package is a workaround for using the percentage unit for a responsive UI.
- The official documentation on deploying React Native applications for both Android and iOS is well written.
- Here is another great article on deploying React Native applications.
- Expo is a framework that helps quickly develop, build, and deploy React Native applications.
- Does your React Native application have a complex navigation structure? This article might help you out.