Introduction
React has become a popular library to build websites, earning second place in the most loved libraries according to the 2018 Stack Overflow survey. In the same way, React Native has also been increasing its popularity. However, there are some differences between these two technologies that we would like to discuss with you today: React vs React Native.
Library vs Framework
The main difference between these two languages is that while ReactJS is a JavaScript library to build UI interfaces on the web, React Native is a whole framework to create native mobile apps using the React library. For that reason, web developers with React experience can easily build native mobile apps on Android and iOS using React Native; they only have to learn the main differences between these languages.
UI components
React on the web modifies the browser DOM using a browser-independent DOM system for performance and cross-browser compatibility. When using React Native, mobile apps are rendered natively; therefore, an Android project can create an Android native LinearLayout with a Text inside. Similarly, an iOS app will render a UILabel inside a UIView.
For that reason, the naming convention is different on both platforms. The React library lets us use the same HTML tags we use on the web, for example, “div”, and “p”, while in the React Native framework, we have to use a more generic naming for UI components like View and Text.
Styling
Styling is done differently on both platforms. On React, we can use plain CSS, Sas or choose an alternative like CSS-in-JS. However, in React Native there is no special language or syntax for defining styles. You just style your application using JavaScript through an API called “StyleSheet” that uses flexbox styling.
Animations
Animations are another feature that is done differently on React and React Native. On the web, we can use the famous CSS animation, but on React Native we should use the Animations API. We can see an example on the official documentation:
Libraries
It is usually difficult to share a library between React and React Native. There are exceptions when the library is just JavaScript code and doesn’t use HTML, SVG or canvas components. In that case, the library can be used on both platforms.
Navigation
Of course navigation on the web is different from navigation on the native code. In this case, the number of libraries to navigate between pages and screen is too high and the choice is personal. We recommend react-router for React and React Navigation for React Native.
React Native on the web
What if you want to build a single app and use it in Android, iOS and the web? During his time in Twitter, Nicolas Gallagher created a library to achieve this, which is currently used by Twitter, Major League Soccer, Flipkart, PlayStation, Uber, and The Times. React Native for the web makes it possible to run React Native components and APIs on the web using React DOM.
You can see a list of examples here: http://necolas.github.io/react-native-web/examples/
Conclusion
React vs React Native: They have several similarities that allow developers to build modern websites and native mobile apps in less time. Learning these differences allows a developer to build websites and mobile apps indistinctly. Additionally, new libraries like React Native web make it even easier to share code between web and mobile environments.
