- 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.
- 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.
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 :
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!