Currently, I am working with my teammates on building a cross-platform crowd-sourced fitness challenge application. The goal of the application is for users to be able to create and participate in fitness challenges, allowing anyone to find an appropriate challenge for their fitness level and personal goals. Our team are working with React Native Expo.
In this post, I would like to talk about my initial experience working with React Native.
As a flutter user, I found React Native mostly very inconvenient due to the lack of hot reload feature. And the ambiguity when it comes to debugging. As shown in the picture below.
I kept running into the error, the simulator did not clearly indicate which file or which line of code, or which object is causing it. After spending the whole afternoon searching for an answer, I found out that I have condition resolves to undefined when there were no components as opposed to null or an empty array. The cause of error has nothing to do with “ Text String Rendered in Text Component”. And React Native debugger could be misleading.
Another example is that there tends to be a lot of dependency conflict, and the debugger does not pinpoint exactly where it should be fixed at. Please see the picture below. It says I should change the rules setting somewhere but it does not pinpoint where. Which has resulted in hours of researching online.
Another feature I do not like about React Native is that it tediously requests spacing between curly brackets or indention between certain lines, while flutter has gotten rid of those requirements entirely, so that developer saves a lot of time implementing save software idea using flutter.
Right now, our team is following the schedule. Each person takes one page to develop, and there is a set due date. While working on the project schedule there is pressure to quickly put out something that while working while I should take some time to understand how all the different types of navigators work together, especially how do I put an headbackbutton to existing bottom tabs. since we are building an app for existing users, there is authentication flow, we also have to implement a switch navigator to prevent users from going back to the sign-in screen after logging in.
While I am happy that I finally get my back button feature working, I feel like there is a lot of room for react native to improve as a framework.
