Creating React Native apps with Django rest-api
I will really appreciate if you support the project by clicking star on Github repository. I will publish new version soon! https://github.com/hassanabidpk/react_pyconlunch
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 views.py 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 http://pyconlunchbeta.azurewebsites.net/api/list
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
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.