Native or Cross-Platform?

The most common question asked when I was doing research on building a mobile application is whether to build it native or use a framework (like a wrapper of a certain language) to make a cross-platform application.

Cross-platform troubles

In the midst of trying out the two cross-platform options, it was a whole mess of frustration and searching for answers just to get started. Let me explain what I faced for each platform,

React Native

React Native is a wrapper that allows a developer to immediately write code in JavaScript/TypeScript and then compile it as a mobile application. However, the problem was Installation was a pain in the ass, building time for the app was really slow (I didn't go the Expo Route). Overall after trying to figure out and start building and getting all the packages and setting up the linters, webpack, configs, just to get started it took me 2 nights of working and reading. And when I finally got to work building the parts, it just broke at every instance and hot reload just hang without recovering. So I eventually gave up and bit the bullet to start working with Flutter instead.

Flutter

Was so much more straight forward, I've always liked how Google writes its documentation of getting started. To me that's the gold standard of writing documentation, Installing was quick and easy. The only problem was having to read through how to get started and experiment on building the widgets. The experience was so much better than React Native that I just stuck with Flutter and starting building and improving the widgets and familiarising with how it works. There's so many building blocks to it too and best of all, it builds really fast and is more compact in the size of the application.

Why I chose Flutter

So I started out building my app on flutter and although it wasn't a breeze at the start. Where I faced an issue using the material dart package with bottom navigation. Originally, I added a bottomNavigation bar for every screen created. However, doing so created a problem with the UI. Whenever I used to bottom navigation bar, it would create a new screen, and it looked like the entire screen was moving. From a UX perspective, it was an incorrect application and this took me 2 days to find out what exactly went wrong. Stackoverflow, google, and medium all the sources and keywords to find out about the issue.

Mobile is fun

Since it took me 2 days of research and plenty of reading, and I managed to resolve it in the end. As it turns out, the reason for this is that the material package by default does not have a persistent bottom navigation bar this is a default based on just the material UI way of doing things. There are a few options to resolve this,

1. For bottom navigation, use the cupertino package.
2. Use a different package, persistent_bottom_nav
3. Handle the state of the Navigation Bar using the inbuilt states.

While I did manage to solve it by using the 2nd option, I still found that it didn't sit well with how I handled the state. using GetX to handle the state of my screens was something I had in mind, but was not successful in applying to it. So for now until I can figure out what is going on, it's the solution I have at the moment.

Finally, my current progress in building the app, it's still far off but the goal here is to get all the necessary UI components built first and get it working functionally before working on fine-tuning the design.