Journeying from React to React Native: Differences & Similarities

As a React / JS developer, you’ve probably had the thought: "Should I learn React Native?"

It’s a fair question and one I asked myself a few years ago. Turns out, learning React Native was definitely the right decision. It's what landed me my role as a Sr. Developer Advocate @ Amazon, where I now use React Native to build apps across Android, Fire TV & Fire Tablet devices.

If you’re debating whether to make the jump beyond web apps, here are some thoughts on:

Why learn React Native?

• The learn once, write anywhere philosophy extends beyond just iOS and Android – it now includes platforms like tvOS, VisionOS, and even desktop environments like react-native-macos

• Industry relevance: Major companies like Amazon, Meta, and Microsoft are all adopting React Native. Why? Code reusability, cost effective and it allows you to build cross platform.

• Strong community support: React Native has over 100k stars and 24k forks on GitHub, with regular updates and active development.

• High developer satisfaction: According to the State of React Native Survey, 90% of developers would use React Native again!

• Unified ecosystem: The React Native community rallies around Expo, leading to faster improvements, well-integrated third-party libraries, and abundant shared resources.

• Familiar developer experience

React vs React Native: Similarities & Differences

Architecture and Compiling

Similarities:

Both use a reconciliation process often referred to as the "virtual DOM." This process diffs one tree against another to determine which parts of the UI need updating. Due to this, they both support fast refresh, enabling you to see UI changes in real-time.

Differences:

React compiles to render in web browsers, leveraging the DOM and web APIs. Even when accessed via mobile browsers, it's still constrained by the browser's capabilities and limited access to native device features.

React Native, on the other hand compiles to native code, allowing direct access to platform-specific APIs and features. This means React Native apps can utilize device capabilities like camera access, push notifications, providing a native user experience. Due to this, it takes a different approach to its architecture, with whats called the "bridgeless" architecture, and instead of the DOM it has native components. It uses Turbo Native Module’s and leverages a JavaScript Interface (JSI) allowing for direct communication between JavaScript and native code. This architecture is new and you may hear the term ‘new architecture’ being thrown around. If you are interested in learning more I covered this in a previous article.

JSX and Hooks

Similarities

Both use JSX for describing the UI and support React hooks (useState, useEffect, etc.). This allows you to maintain a consistent coding style and state management approach across both libraries.

Components

Similarities

Both React and React Native follow a component-based architecture and components follow the same lifecycle methods under the hood.

Differences:

1. Component Imports: In React Native you import UI components from react-native, unlike React where HTML elements are globally available. This difference is actually one of my favourite things about React Native as you have access to a set of pre-built components out of the box e.g. View, Text, Image, TextInput, ScrollView.
2. Platform-Specific Components: React Native also offers components and API's tailored for iOS and Android out of the box.
3. Text Handling: In React Native, all text must be wrapped in a <Text> component, unlike in React where text can be placed directly in many elements. This ensures proper styling and behaviour of text across different platforms, improving consistency and accessibility.
4. Event Handling: React uses onClick for click events, while React Native uses onPress for touch interactions, reflecting the different nature of interactions.

Styling

Similarities

Both React and React Native offer flexible approaches to styling components. They both support inline styling, allowing you to apply styles directly to components. Additionally, both enable the creation of reusable style objects.

Differences

1. Styling Language: React typically uses CSS or CSS-in-JS libraries for styling whereas React Native uses a JavaScript object-based styling system with some differences:
   • Property Names: React Native uses camelCase for property names (e.g., fontSize instead of font-size).
   • Value Units: In React Native you don’t need units for properties like width, height, or fontSize, it automatically assumes dimensions are in density-independent pixels.
2. StyleSheet API: React Native provides a StyleSheet.create() method for creating style objects. This API improve’s performance by reducing the need to recreate style objects on each render.
3. Style Application: Unlike in React where class names can be used to apply styles, React Native applies styles directly to components using the style prop.
4. Limited CSS Subset: React Native only supports a subset of CSS properties, focusing on those that make sense for different layouts. This means some web-specific properties (like float) are not available, while others (like flex) might behave differently.

Libraries & Tooling

Similarities

React and React Native share many core libraries. You can use the same state management libraries like Redux, MobX, and data fetching libraries like Axios or the Fetch API.

Differences

Navigation: While in React you might typically using React Router for web navigation, React Native has its own React Navigation library. This is because React (Web) typically uses URL-based navigation, where different components are rendered based on the current URL path. Whereas React Native uses stack-based navigation, mimicking the native mobile app experience. Screens are ‘stacked’ on top of each other, with transitions pushing new screens onto the stack or ‘popping’ them off.

💡 Note: Remember to name your folder ‘Screens’ instead of ‘Pages’ when structuring your app.

Testing: concepts remain similar across both libraries, focusing on component rendering and event simulation, but the specific testing libraries differ. React uses the React Testing Library, while React Native you would use React Native Testing Library (RNTL), but don’t be put off as RNTL just provides light utility functions on top of React Test Renderer.

💡 Some React libraries may not be compatible with all React Native platforms due to DOM dependencies, however you can check the platform compatibility of all the libraries at: (https://reactnative.directory)

Bridging the Gap with Universal React Apps

If you're still on the fence, the rise of Universal React Apps is a really exciting space that is further closing the gap between React and React Native. Universal React libraries and tooling, usually powered by react-native-web enable you to create cross-platform applications that run on iOS, Android, and the Web all from a shared React Native codebase. This lets you share navigation, styling, state management, and business logic saving you time and effort while respecting the unique conventions of each device type.

So as the lines between DOM and Device continue to blur, embracing React Native opens doors to the exciting world of multi-platform app development!

If you are ready to get started check the comments for my favourite resources or comment with yours below ⬇️