Fullstack Django + React Native Guide

Overview → Architecture Diagram

High-level flow between backend and frontend:

[ Django Backend ]
+--------------------------
| models.py               |
|  class User(models.Model)|
|      username, email    |
+--------------------------
           |
           v
+--------------------------
| serializers.py           |
|  class UserSerializer    |
|  -> fields: id, username |
|     email               |
+--------------------------
           |
           v
+--------------------------
| views.py                 |
|  @api_view('GET')        |
|  list_users() -> JSON    |
+--------------------------
           |
           v
[ /users/ API endpoint ] ---> JSON:
[
  { id:1, username:"Alice", email:"a@a.com"},
  { id:2, username:"Bob", email:"b@b.com"}
]

           |
           v
[ React Native Frontend ]
+--------------------------
| types.ts                 |
|  interface User {        |
|    id: number            |
|    username: string      |
|    email: string         |
|  }                       |
+--------------------------
           |
           v
+--------------------------
| api.ts                   |
|  async getUsers(): User[]|
|  fetch('http://.../users')|
+--------------------------
           |
           v
+--------------------------
| App.tsx                  |
|  useEffect(fetchUsers)   |
|  setUsers(users)         |
|  <FlatList               |
|     data={users}         |
|     renderItem={({item})=>|
|         <Text>{item.username}</Text>}|
|  />                       |
+--------------------------
            

Prerequisites

• Python 3.10+
• Node 18+ and npm or Yarn
• Expo CLI (recommended for React Native + TypeScript)
• Git (optional)

# Python & pip: usually come with Python
# Node / npm: install from nodejs.org

# Install Expo CLI globally
npm install -g expo-cli
# or with Yarn
yarn global add expo-cli
            

Django Backend

Project Setup

mkdir fullstack-mobile
cd fullstack-mobile
python -m venv .venv
# Activate
# macOS/Linux:
source .venv/bin/activate
# Windows:
.venv\Scripts\activate
            

Install Dependencies

pip install --upgrade pip
pip install django djangorestframework django-cors-headers
            

Create Project & App

django-admin startproject backend .
cd backend
python manage.py startapp app
            

Settings (backend/settings.py)

INSTALLED_APPS = [
  ...
  'rest_framework',
  'corsheaders',
  'app',
]

MIDDLEWARE = [
  'corsheaders.middleware.CorsMiddleware',
  ...
]

CORS_ALLOW_ALL_ORIGINS = True
# or more secure:
# CORS_ALLOWED_ORIGINS = ["http://localhost:19006","http://192.168.x.y:19006"]
            

Models (app/models.py)

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=100)
    email = models.EmailField()

    def __str__(self):
        return self.username
            

Serializers (app/serializers.py)

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'email']
            

Views (app/views.py)

from rest_framework.decorators import api_view
from rest_framework.response import Response
from .models import User
from .serializers import UserSerializer

@api_view(['GET'])
def list_users(request):
    users = User.objects.all()
    serializer = UserSerializer(users, many=True)
    return Response(serializer.data)
            

URLs (app/urls.py)

from django.urls import path
from . import views

urlpatterns = [
    path('users/', views.list_users, name='list_users'),
]
            

Include in project urls.py

from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('app.urls')),
]
            

Migrations & Test Data

python manage.py makemigrations
python manage.py migrate
# Optional: create superuser
python manage.py createsuperuser
# Optional test data
python manage.py shell -c "from app.models import User; User.objects.create(username='Alice', email='a@a.com'); User.objects.create(username='Bob', email='b@b.com')"
            

Run Development Server

python manage.py runserver 0.0.0.0:8000
# Check JSON at: http://127.0.0.1:8000/api/users/
            

React Native Frontend

Create App

cd fullstack-mobile
npx create-expo-app frontend --template expo-template-blank-typescript
cd frontend
npm install axios
            

Types (frontend/types.ts)

export interface User {
  id: number;
  username: string;
  email: string;
}
            

API Fetch (frontend/api.ts)

import axios from 'axios';
import { User } from './types';

const API_BASE = 'http://192.168.X.Y:8000/api'; // adjust IP or localhost

export const getUsers = async (): Promise => {
  const response = await axios.get(`${API_BASE}/users/`);
  return response.data;
};
            

Main App (frontend/App.tsx)

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, SafeAreaView } from 'react-native';
import { getUsers } from './api';
import { User } from './types';

export default function App() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const data = await get
Users();
        setUsers(data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchUsers();
  }, []);

  return (
    <SafeAreaView style={{ flex: 1, marginTop: 50 }}>
      <FlatList
        data={users}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Text>{item.username} ({item.email})</Text>}
      />
    </SafeAreaView>
  );
}
            

Final Checks

• ✅ Django server running at http://127.0.0.1:8000/api/users/
• ✅ React Native app fetching data correctly
• ✅ CORS headers configured if using device/emulator
• ✅ Optional: Test users in Django admin

Essential Commands

# Django
python manage.py runserver
python manage.py makemigrations
python manage.py migrate

# React Native / Expo
npm start
expo start