Creating React Native apps with Django rest-api

Hassan Abid
Aug 18, 2017 · 3 min read
Image for post
Image for post

I will really appreciate if you support the project by clicking star on Github repository. I will publish new version soon!

Last week, I delivered a talk about Django for mobile applications at Pycon Korea. Over the past 6 years, I have been mostly developing mobile applications and contributing to company’s SDKs. Things have changed over past couple of years, as I am no more depending on backend developers to spin off a server for me. Neither I am interested to use automated services like Parse (RIP) or Firebase which hides the complexity and elegance of a backend for mobile applications. I decided to use Django as backend for my mobile applications. Its flexible, stable and customizable. In this blog post, I am going to share basic steps for developing a React Native app with Django rest-api.

So Why React Native? I have been mostly developing native mobile apps But sometimes it seems like time consuming to develop a simple app with same functionalities for both iOS and Android. Not that long ago, I started learning React Native and got more interested in it.

I will use an example of Restaurant (Pycon Lunch) app for this blog post. You can find the source code on Github. In the branch azure, You can find rest api code and other necessary files for deploying on Azure

First of all, I made a simple model for a restaurant object.

Second step is to create a serializer class using Django Rest framework.

Finally, we create an api function in which will server requests at /api/list end point

We are ready for creating our React Native app now. The JSON response is like this

For creating React Native app, we use CRNA (Create React Native App). Its an easy way to start building new applications. It works with expo sdk and apps so you can test your apps conveniently on mobile devices as well as simulator. Read the full guide about getting started here. The boilerplate code will give you an App.js main file and some other helper files like package.json and App.test.js.

Let’s start adding some code to App.js (Our Starting point of the app). We use react-navigation package for handling the navigation in the app. Create a StackNavigator which sets HomeScreen as landing page and DetailScreen as Detail page.

in HomeScreen component, we have to fetch data from server and render it to the view. Our api end point for this example is

In the fetchDataFromApi function, we user fetch api to pull in data and start rendering from their on. For convenience and fast prototyping, I used react-native elements package which provides useful UI components such as Avatar, List View and Search bar.

You can see the DetailScreen’s finished code here. It doesn’t do any network call, because we are passing on data parameters from home screen to detail screen using onPress callback and navigation props.

After you are done with code, you can test your app on Android or iOS devices. When you execute npm start. There is QR code that appears in the terminal which you can scan with Expo app (You don’t need to install Xcode or Android Studio in this case). Your device and computer should be on same network. If you want to test app on iPhone simulator. execute npm run ios in terminal. Make sure that you have installed Xcode on your Macbook. You can try out expo APIs here

Image for post
Image for post

In Short, React Native is powerful framework for building iOS and Android apps. It is ideal for small projects and fast prototyping. Find the full source code of React Native app (PyconLunch) on Github. The next part of this blog post will be about authentication and registration of users.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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