Recently I’ve been doing most of my programming with React. I love the streamlined set up and ease of creating complex and rich webpages. Having always wanted to create a mobile app of my own, I decided to try to utilize my React knowledge to build an iOS app with React Native. Both frameworks build on JavaScript. Going in, I expected the overlap to make things pretty straightforward. I would soon learn that several key differences made for a good challenge.
First is navigation. Unlike React, React Native does not allow for simple browser client-side routing. Instead, React Native utilizes different types of navigation - stack navigation, drawer navigation, tab navigation... Ultimately I used a combination of these navigation options to achieve the user experience I wanted. The most challenging aspect of this was getting the iOS native buttons and headers to appear as desired. With many possible modifications to each navigation type, setting this up is unique to each app implementation.
The next challenge was HTML and CSS - the absence of both to be precise. While React builds on JavaScript, HTML & CSS to allow for reusable components, React Native combines JavaScript with native mobile building blocks. React Native has many built-in tools, but there are also many available libraries as well as Apple/Android native tools.
Lastly, testing in React is awesome. Load your local server, and see changes to your DOM as you modify your code. React Native also offers instantaneous updates, though the interface is not quite as nice or efficient as a browser. I used a combination of a platform called Expo and Xcode's simulator to run and test my app on my computer and, while it was cool to see my app running on a simulated device, it was not as fast as testing in Chrome.
Ultimately, my experience coding with React Native was a lot of fun. Mobile apps have transformed the way society functions and getting to peek under the hood was both challenging and exciting. I plan to refine my React Native skills and look forward to learning more!
Top comments (0)