react-native-with-django-rest's Introduction

React Native with Django REST Framework

Integrate your React Native Mobile App frontend with Django Rest Framework backend with REST APIs

Backend:

Install the django-cors-headers package:

pip install django-cors-headers

Add 'corsheaders' and 'api' to your INSTALLED_APPS in your project's settings.py:

Add 'corsheaders.middleware.CorsMiddleware' to your MIDDLEWARE in settings.py. It should be placed after CommonMiddleware:

Configure CORS settings in settings.py.

Allow all origins and methods

Type ipconfig in command prompt and put the IPV4 address from under the 'Wireless LAN adapter Wi-Fi' section to allowed hosts

Ensure that your Django development server is running and listening on the correct IP address (0.0.0.0) to accept connections from devices on the local network:

python manage.py runserver 0.0.0.0:8000

The main advantage of using 0.0.0.0 is that it enables you to access the development server from other devices on your local network, such as your React Native app running on a different device or emulator/simulator. This can be very useful for testing and development, as it allows you to see how your app behaves when interacting with the server from different devices. Ensure that your firewall and security settings are configured to allow incoming connections on this port if you want to access the server from devices other than the one running the server.

Frontend:

Create a React Native App:

npx create-expo-app frontend

Download the Expo Go app and scan the QR code

Install axios for fetching data from Django REST

npm install axios

Type ipconfig in command prompt and put the IPV4 address from under the 'Wireless LAN adapter Wi-Fi' section with port 8000 as the base URL with endpoint '/students/' to get the list of all students

Display the list using the map() function

Output on mobile device

Recommend Projects

siddhantkodolkar / react-native-with-django-rest Goto Github PK