Part three of my “quick job board” series, this time for React Native — and deployable on mobile devices. This follows on from “quick job board in 48 lines of code” with Meteor, and the “quick job board with meteor and React” version.

The beautiful thing about React is the syntax and structure is very similar, regardless of platform — so the React Native for devices code is very similar to any web based version.

For this app we have 2 files: Index and Results. The app is only a single feed on one page, but I have broken the App into two components to keep the “pages” in separate files (as well as being better practice).

So, after installing React Native on your Mac and creating a blank app, Let’s create the index file:


First we import the modules of React Native that we are going to use (above). Then we will “import” our Results page (below). The Results page we will create later.

The index page is used simply as a navigation stack container. Our app only has one page, so this is fairly simple. We use React and NavigatorIOS as our “router”: we give the page a title and set the contents (component) as our Results page (the one we imported above).

Now two small things are left on our Index page. We add a small amount of style to the page, to use Flexbox mainly, and we register our React app to the App Registry so that xCode can compile it.

Easy, no? Now let’s build our job results page. Create a file called Results.js. This is little more complex.


First, we need access to the React components that we need, the same as we called above except we need a few extra modules this time:

We will use the Github jobs board again as our supplier. For now we will just set the URL to be fetched by our code later.

Now we start to write our component. First the class and constructor:

With the contructor we are setting the initial state of the component, i.e. that the data hasn’t yet loaded, for example. And we also set the datasource and type, which we will fill with data later.

Now we fetch our data. This could be written in one module, but I like to keep things separate.

The first method calls fetchData when the component has mounted, this is important. The fetchData() method then will use fetch API (More info here about this). All it does is call the Github API url we set above, parses the JSON response and places it in the dataSource variables we set in the Constructor, which will automagically create our Listview of jobs using the iOS Listview component. Magic! We also set the loaded state to true, because now we *do* have our data.

So, in order to let users know we are actually loading data, and the app hasn’t crashed, we use a small method which shows a loading icon while the data is being fetched, and is triggered by our constructor “loaded” variable. For now just define these “renderings”, which are called in turn in the main React.render method at the end.

Now we must also prepare the View template for each Job listing that is returned from Github, and will be placed in our Listview:

This method makes use of various React components that will translate into Native ones. You can look up these React components with the Native link I pasted earlier, but briefly: Touchable highlight is a link, the web equivalent of the <a> tag; the View tag is the equivalent of the web <div> (a container) and Text might roughly translate to <span>, I guess — We can’t say the coding world doesn’t keep us on our toes!

The elements in curly braces are references to our styles component that applies the “css” to the view: eg. styles.container will refer to the styles object we define at the end. React uses objects to hold styling data. And the second type of data in our curly braces are the job list results: eg. job.title. Job is the object Github return to us. You can see what Github returns to us from their page here

Now we can pull the awaiting render methods together in the main method: When the data has loaded we call the ListView component (otherwise we show the “loading” component) and we pass to it the datasource, the Jobs View object we created and the stylings as “props”, thusly:

After that all that is left is to apply the styles, and export the Results component so that the Index page can reference it.

You will need to compile this in xCode and run. You can even run it on your own device if you have an Apple developer account and watch the magic.

As before if you *really* have any problems, you can ping me — or — you can pull my repo. Sharing code is caring, er.. code.

Onwards, to React Desktop…

I love coffee, so if you liked this article and wish to share happiness consider buying me a coffee! I will be very happy.




Thoughts, stories and ideas from a UX Designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Group Project — Part 2

How To Make Your Site 25x Faster With A Few Lines Of Code

Web Assembly with C# II — Blazor Components

七 (Japanese Kanji) — seven

Typescript: Tips and Tricks for Improving Your Coding Skills [Part 1]

Integrating Firebase with React(CRUD): No dependency on BackEnd

An Introduction to React Testing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Derry Birkett

Derry Birkett

Thoughts, stories and ideas from a UX Designer.

More from Medium

Is React used in 2022?

React Components

React overview: what is react and why it is vitally important for your business?