DEV Community

loading...
Cover image for Learning React Native | Week 1

Learning React Native | Week 1

krymspree profile image Clayton Jensen ・3 min read

The Backstory

In the age of JavaScript, where every possibility is fully envisioned, it was inevitable that even the mobile space would be populated by JavaScript frameworks. We've seen this with the browser, where Svelte, React, Vue, Next.js, and so many more frameworks all compete for the top spot among website frameworks. In the mobile space, it's not nearly as contested.

Android consists mostly of Java and Kotlin, with some frameworks simplifying development, but not by much. Apple went another route with iOS by developing Swift, which some developers see as too much of a burden to learn, especially when it lacks Android support. The fact that these two devices use completely different languages, frameworks, and backends means the experience of creating cross-platform apps is very agonizing. That's where a cross-platform framework comes in.

I initially began learning Flutter, which is a framework for Dart, about a year ago. With Flutter being heavy, and the requirement to learn Dart on top of a new framework was also a bummer. I eventually gave up learning mobile development for a while, focusing my attention on React and later Next.js (which I highly recommend anyone try out!) Then, for my senior-project through my high school we were requested to "find a passion and work on it", which for a senior essentially means "actually learn something". I was initially uncertain of what I wanted to make my true passion. I've solved Rubik's cubes and have gotten fairly fast, I didn't want to take up streaming even though I probably could have, and I was never good at music. What I was good at, though, was programming.

I picked up React Native the next day, refusing to touch Flutter again. I know React Native is slow and clunky, and somewhat unappealing, but I knew React, I new Next.js, so it was a good branch from those two frameworks. After watching React Native For Beginners by ProgrammingWithMosh, I felt confident in jumping into a project.
I later found an API that provided advice slips, and even had a search endpoint, which may prove useful later on.

I instantly knew what I wanted my project to be.

Coding Cat

Week 1

Week 1 was mostly setting up my project, "advisor". Installing XCode onto my Mac so I could emulate an iOS device. Installing Expo (a server backend that helps development) on my phone so I could test on an Android device, and other dependencies that may have arose. I got a quick mockup of how I wanted the app to behave, where the user could fetch a new slip of advice on button press. The goal was the app to be simple: something a user would open once or twice a day to get a quick dose of advice. At the end of the week, the app could have been fully published, but I wanted to improve user-experience and possible loading issues.

Week 1's Struggle

Any developer comes across some sort of roadblock that may seem impassable. My only advice for these roadblocks are to sleep on them. Take a break a let your mind rest, and soon the motivation will flow and you'll find a fix. This week I had a fairly major problem regarding the API fetching: Android devices would cache the response and refuse to load new data.
I was initially calling my API this way: const response = fetch(API).json()), which worked fine on iOS. To fix the issue on Android, I had to supply request headers:
const response = fetch(API, {headers:{"Cache-Control": "no-cache, no-store, must-revalidate"}}).json(). This has fixed that issue, and so far hasn't caused any further issues.

I don't feel comfortable sharing the code for my Advisor app yet, but it wouldn't take Sherlock Holmes to find it.

On To Week 2!

Discussion (0)

Forem Open with the Forem app