React and React Native - a Must-Know Duo for Developers

Nowadays, people use various kinds of devices. Almost everything is digitized, from booking cabs, shopping online, ordering food to online banking. In addition, users want easy access to the same apps and services on different devices, that will have good responsiveness and user experience.

Having this in mind, as a developer with the basic knowledge of JavaScript, CSS and React, you can speed up your performance because you will be able to apply different and adequate solutions, depending on the device you want to create your app for. To begin with, let’s go over the main points of these two technologies and why it is useful to understand them.

React vs. React Native

React is an open-source JavaScript library intended to build user interface for web applications. Its simple syntax makes it easier to write and read code, and in return offers more functionality.

Thanks to the virtual DOM, React compares previous states and re-renders the only that part of tree that has been changed, which contributes to higher performance of the app.

 React Native represents an extension of React and is used to build mobile apps for Android and iOS applications. It comes with the group of embedded Native components.

Building Blocks

To understand React Native, you need to know the React core concept.

The building blocks of that core are

• Components – it comes in two types of Class components and Function components, unifies JavaScript code, and returns HTML
• JSX – enables you to have the same file, working with state changes, data display and event handling.
• State and Props – state is an object integrated in React that contains information about the component and can be updated, while props are information that we are passing to child component, and they are not mutable
• React Hooks – reusable functions that access state and represent adapted logic from lifecycle methods. They arise from the complexity of class components when it comes to state management. More details about hooks can be found on react.dev site.

Knowing this, you can dive into React Native since they share in the base the same logic: components, props and state.

React uses HTML elements for creating Components, while React Native, since it has no DOM, uses native UI components of the target platform.

The basic building block in React Native is <View> component, which represents a container that matches with <div> element in HTML .

Styling

React styling uses classes, media queries, animations, and everything we know from web styling. Also, React can use units such as px, rem, em...while in React Native, all dimensions are unitless.

Recommended styling in React Native is using an Api Stylesheet that can control the layout of your components and is similar to CSS language. The stylesheet in React Native comes with couple of methods that create our style, such as the create() method. By calling the create() method on Stylesheet, we provide an object that contains our styles.

The best usage of style creator Stylesheets is to put it out of render function. React Native uses subset of CSS styling since there are limitations in usage such as supporting only flex layout. The inner elements do not inherit parent’s property, which means there is no cascade concept of styling. We can see these differences in the code example below:

Navigation

Let’s compare differences in the context of navigation.

React uses the React Router library to navigate between screens.

Component that contains paths for all pages, such as Navigation bar, has a <Link> element that accepts URL paths for all the pages that we want to access.The <Link> element is used to set the URL and keep track of browsing history. When a user clicks on a link, the URL is pushed to the browser history stack.

 By defining routes, we can allow users to navigate through different views and avoid sending request HTML page from server all over again.

It is possible to use React Router in React Native, but it comes with some disadvantages such as:

• no animations
• statically declare all screens
• no support for back button

Due to those disadvantages, the best solution is to use React Navigation in React Native. So, instead of <Link> tag that holds browser history, in React Navigation we have a native Stack navigator that enables screen switches and manages navigation history.

The useful features we get from React Navigation are already integrated components in the navigation system such as Drawer Navigator, tab bar at the bottom of the screen, Stack Navigator, Native Stack Navigator. To avoid performance issues during navigation, it is better to use native stack because react-navigation/stack is implemented in JavaScript, which can cause slower performance.

In React, the expected behavior of navigation is that when the user navigates from the current page, that page unmounts. In React Native, the previous page stays in stack, which can cause slower performance, and that is why React Native gives us React Navigation lifecycle events that can help React to detect whether the page is clicked or not. If you are interested in more details, here are links to take a closer look at the navigation lifecycle and the navigation event .

Sharing code between React and React Native

Using React for the web and React Native for app is the best approach in creating projects for all devices because each of them brings features that can be easily implemented in your code without wasting time on code repeating. React and React Native have different rendering engines, but they share the same core that allows the usage of reusable logic such as custom hooks, functions, types, themes and design tokens.

This brings us to one especially important part of knowing both, and that is code sharing between these two technologies.

To do that, we first need to put both React Native code in the same folder. In that folder, create a new folder named Controllers which will contain all the functions and hooks that we could use through the project.

This is the best way to avoid repeating domain logic wherever you want. To be able to use those functions, we can import that package into our package.json and use any function we need by importing in our component.

So, the UIs could look different, but you can still use hooks like existing logic, for example API calls. Thus, different views in your components can be arranged depending on the device you want to see.

Conclusion

This blog has covered the main differences between React and React Native, and found that knowing both could help us build an app effectively. Since they have mostly common syntax, applying code sharing will reduce the amount of unnecessary code and help other developers understand and reuse the code.

Sources:

https://reactnavigation.org/docs/navigation-lifecycle

https://www.freecodecamp.org/news/react-lifecycle-methods-and-hooks-for-beginners

https://react.dev/learn

https://reactnative.dev