Learning React Native as a designer – Bart Simons – Medium

Learning #ReactJS Native as a designer:

  • I was obviously building a very easy app that for more experience programmers shouldn’t be any problem to build at all, but still.
  • Eventually a google search led me to a github page detailing on how to get a Listview to look like a grid.
  • I wasn’t going to send it to the App store, but it just had to look good.
  • Everything gets explained very thoroughly in the Udemy Course, but me being an ultimate beginner to even Javascript made it difficult at times.
  • I used React-Native-Router-Flux for navigation (which I think works surprisingly easy) and created the rest of the empty pages so the flow of the app would be finished.

Ever since I started designing apps I’ve also wanted to be able to build them myself. When I was still studying I primarily focused on design so there wasn’t much time for me to learn how to program…

@ReactiveConf: Learning #ReactJS Native as a designer:

Ever since I started designing apps I’ve also wanted to be able to build them myself. When I was still studying I primarily focused on design so there wasn’t much time for me to learn how to program. I started the Standford iOS Objective-C course once and quickly abandoned that. Once Swift came around I tried a few courses and built a few small apps, but I still didn’t have enough time (and probably motivation) to really start focussing on learning app development. Recently however I’ve started working on that app-building dream again by learning React Native.

Looking back now and I might say that I’ve started learning RN in the wrong way. With basically no Javascript experience, and absolutely no React experience, I bought this course. I want to give a big shout-out to Stephen Grider because the course is fantastic. But it might’ve been better if I started by doing some Javascript or even just React before I took the course. One of the reasons why I think this, is the fact that I found it very hard to remember what kind of code I was exactly writing. Everything gets explained very thoroughly in the Udemy Course, but me being an ultimate beginner to even Javascript made it difficult at times. After a while I kind of knew what I had to write to make something happen on my screen, but I wouldn’t be able to say exactly what it was that I just did. Did I write a helper function? Create a class? Component? These are very general examples and while I know quite a few of them now, it took me a while to learn some of these fundamentals.

Building my own App

So courses and tutorials are fun, but even though they address styling, the end-result never really looks or feels like a finished app. Something that you would find in the app store. I started to work on my own project and set up a few goals for it to succeed for myself. I’m not, and probably never will be, a die-hard developer. So my main goal was to create something that looked like an actual app. I wasn’t going to send it to the App store, but it just had to look good.

One of my ideas was to do a simple image-search app. The user enters a keyword, it will search for pictures from some API and then return them to the user. Pretty easy, but for a beginner such as myself quite a challenge. While starting on it I found out one more important thing: there’s so much stuff to think of while building an app. I did a really simple mock-up of the app in Sketch (which can be found here). But I wasn’t thinking about what would happen when there wouldn’t be any results for the search. Or what would happen when the user didn’t enter anything but still pressed send. So I made a small list of ‘MVP’ must-have’s. If I had these in my project, the first version would be finished :

I was already planning on using Unsplash as a source since I was familiar with the website through Invision’s Craft plugin. I use it a lot to fill up designs with good quality placeholder pictures. What I didn’t know before was that they actually provide a really simple Javascript wrapper for using their API in React Native. This helped me out a ton. Because setting up a connection was similar to some Firebase stuff I did in the Udemy course, I got my search-bar up and running pretty quick.

Flexbox turned out to be more challenging than I eventually thought, but I managed to build out the first screen really quick. I used React-Native-Router-Flux for navigation (which I think works surprisingly easy) and created the rest of the empty pages so the flow of the app would be finished. I struggled a bit with getting the header component to be transparent, but I had to revert it to a solid color again once I finished my results page. The pictures kept scrolling through the nav and statusbar, and I couldn’t find a way to let that not happen besides letting the navbar have a solid color. In the end it’s all good since you can barely see the header on the first page.

I encountered some more things I hadn’t been thinking about before, like switching the colors of the statusbar. Surprisingly most of these small fixes that I had to google were really easy to fix or there were already a lot of good answers online. When I was looking for some general info on RN before I started all of this, I got the idea that RN was still pretty undeveloped and that it would be hard to fix something if I got stuck. That wasn’t the case at all. I was obviously building a very easy app that for more experience programmers shouldn’t be any problem to build at all, but still. There wasn’t any issue that couldn’t be fixed with a quick google search.

It wasn’t all smooth sailing though. I’ve done some of the most unnecessary stuff possible before realizing how to fix something. There’s probably hundreds of things I could’ve (or should’ve) done differently. But I guess that’s all part of the learning process. At one point I was struggling to get the user’s input to the next screen so I could do a search with the keyword. I tried so much stuff to get it working, at one point I convinced myself I just had to use Redux. I used it in the course a few times, so I just had to use it again. I spend the next hour or 2 setting up Redux, creating Actions & Reducers, only to have it still not work in the end. I eventually found out that I could just pass the input while calling Actions when navigating to the next page and then acces it using props. I’m happy that I got some more practice with Redux, even though it didn’t do anything for my project in the end.

A similar thing happend when I tried to find a way to display the results in a grid. I went looking for different libraries to do it, and tried some really outdated ones that didn’t fully work. Eventually a google search led me to a github page detailing on how to get a Listview to look like a grid. Which again, worked really easily. I spent a few hours getting my stuff to look like a grid, and eventually fixed it in a few minutes with a simple google search.

As far as my personal project goes, for now I’m done with it. There’s a bunch of stuff I’d still like to add one day such as the form-validation, panning/zooming on the picture, downloading it to your phone etc. But I’m not in a hurry right now. I reached my goal of building an app that actually looks like one.

React Native is enabling me to build stuff I wasn’t able to do before. It takes a much smaller amount of time to actually build something compared to using Swift or Obj-C. For me, this might be one of the better tools for starting with app development. As of now I have no desire to become just an app developer, I love doing UI/UX work a whole lot too. But it’s a great way for me to be able to just build stuff and experiment. I’m not expecting to have the next big Appstore hit in 2017, but I do expect to build some more similar small apps like this one.

You can find the Repo for ‘Neptune Image Search’ over here if you’re interested (first time using Git too, so be gentle). I’d love to hear your comments & feedback!

Learning React Native as a designer – Bart Simons – Medium