Thoughts on React Native vs Ionic Framework Developer Experience and Application Quality

Aaron K Saunders - Mar 23 '23 - - Dev Community

As mobile app development continues to evolve, developers have an increasing number of tools and frameworks at their disposal. Two popular options are React Native and Ionic Framework. Both of these frameworks allow developers to build cross-platform apps using web technologies like CSS, and JavaScript. However, there is ongoing debate about which framework is better.

I don't think one is "better" than another, i think you need to use what is best for you based on the skills you have and what are the parameters of the problem you are trying to solve

Ionic presents it's User Interface with web component, React Native uses native components.

In the videos linked in this post, we'll compare the development experience of React Native and Ionic Framework by walking through the source code used to build a multi-step wizard in both frameworks. The second video is where I give my thoughts on what my preference is and how I came to that conclusion.

These are some quick thoughts, although I am considering a more detailed analysis by continuing to build out the application using common features found in mobile solutions. Leave a comment if it is something you would be interested in seeing.

Ionic Framework

In this video we used React Hook Form for form validation and Pullstate for state management between the pages of the wizard. We chose Ionic Framework for its built-in animations and clean user interface, cross-platform visual components and the ability to leverage existing web development experience. It is literally a website in a container running on a native device.

React Native

In this video, I walk through the React Native code I wrote to replicate a multi-step wizard I previously built using Ionic Framework. I also share my thoughts on the debate between React Native and Ionic that's going on online. My goal with the video was to compare the development experience (DX) of the two frameworks, although I might need to write more code to make a definitive judgment. If you're interested in this topic, please leave a comment below.

To achieve form validation, I used React Hook Form. Pullstate was used for managing the state between the different pages of the multi-step wizard, and React Native Paper was used for a simple, clean UI.

To get my thoughts you will have to checkout the videos!!

Source Code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .