If you're thinking about building a mobile app, this article is for you. It is kind of obvious that almost everyone has a smartphone these days. However, the mobile development ecosystem is complex. The most popular options to create an app are React Native and Ionic React. Both have a wide community around them, with a strong adoption by big companies and mobile applications used by a very large number of customers. But, which one is better though? What are the differences? Keep reading.
Little context first
React is a JavaScript library used for building user interfaces, specifically for single-page applications. With React, you could create web, mobile or desktop apps. But, in this blog post, we are going to focus only on mobile apps.
If you are a Software Developer (if you are not, FYI), you should know that the most popular options to create an app are React Native and Ionic React. Therefore, for being a React Native developer, we have to know the differences between React Native and Ionic frameworks.
So, let's see which differences are those.
The Setup
The setup process is very similar in both: You need to install Android Studio, Xcode and set up the environment variables. However, to create an application, you need to use a different command in each one of them.
- For Ionic React:
ionic start photo-gallery tabs --type=react --capacitor
- For React Native:
npx react-native init AwesomeProject
The Code Syntaxis
Syntax is the same as React apps, but with the difference that Ionic uses @ionic/react component and React Native uses core components to create views, buttons, text, tabs, etc.
The following code is an example of how to create a list.
- For Ionic React:
- For React Native:
The libraries installation
We can install libraries via yarn or npm in both cases. However, we came to the conclusion that some libraries are not easy to install on Ionic React since Capacitor does not have good documentation or does not exist on Ionic React. We tried with Google Maps, but we did not find documentation for Ionic React. You can find more information about libraries...
- For Ionic React:
- For React Native:
The testing environment
When an Ionic React and React Native application is generated using the Ionic CLI, it is automatically set up for unit testing and integration testing with Jest and React Testing Library. We can use the Jest library to create the snapshots and unit testing.
The Global State Management
We can install Redux to use the state management from React. All Redux library installations (react-redux, redux, middlewares, redux-devtools) are exactly the same for both. The store-provider config is as simple as react-redux documentation explains; getting and updating the global state (mapStateToProps & mapDispatchTopProps) is the same process too.
The navigation between screens
Navigation works differently in Ionic React and React Native. Ionic uses React router (used on react web apps), meanwhile React Native uses React Native navigation. Navigation is one of the most significant differences.
The styles
When it comes to creating styles, we can see a slight difference. When you use Ionic React you need to create the CSS file or use the attribute style of the component; when you use React Native you need to import stylesheets from React Native.
- For Ionic React:
- For React Native:
Firebase
Firebase is a platform for developing web and mobile applications that help us use a lot of features, such as Auth, Database, push notifications, and app distribution. The installation process is different in React Native and Ionic React.
- For Ionic React click here
- For React Native click here
Wrap-up
Both are good options to develop on React, but React Native is one step ahead because of its community and libraries. Nevertheless, Ionic React is gaining ground since it is very good for people coming from web development with React because the syntax is almost the same. In the end, you will choose the best framework for you and your project.
Which one do you prefer?
Let us know your experience with your comments.
