Networking & API Calls

Networking & API Calls

Most mobile apps need to communicate with servers. Let's learn how to make HTTP requests, handle responses, and display data from APIs in both React Native and Flutter.

HTTP Request Flow

  ┌─────────────────────────────────────────────────┐
  │           API Request Flow                      │
  ├─────────────────────────────────────────────────┤
  │                                                  │
  │  Mobile App                                     │
  │      │                                          │
  │      ▼                                          │
  │  HTTP Request (GET/POST/PUT/DELETE)             │
  │      │                                          │
  │      ▼                                          │
  │  Server/API                                     │
  │      │                                          │
  │      ▼                                          │
  │  JSON Response                                  │
  │      │                                          │
  │      ▼                                          │
  │  Parse & Display Data                           │
  │                                                  │
  └─────────────────────────────────────────────────┘

React Native: Fetch API

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error:', error);
        setLoading(false);
      });
  }, []);

  if (loading) return <ActivityIndicator size="large" />;

  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id.toString()}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</Text>
          <Text>{item.email}</Text>
        </View>
      )}
    />
  );
};

Flutter: http Package

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class UserList extends StatefulWidget {
  @override
  _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
  List users = [];
  bool loading = true;

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  Future<void> fetchUsers() async {
    final response = await http.get(
      Uri.parse('https://jsonplaceholder.typicode.com/users'),
    );

    if (response.statusCode == 200) {
      setState(() {
        users = json.decode(response.body);
        loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (loading) return Center(child: CircularProgressIndicator());

    return ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(users[index]['name']),
          subtitle: Text(users[index]['email']),
        );
      },
    );
  }
}

Best Practices

• Error handling: Always handle network errors gracefully
• Loading states: Show loading indicators during requests
• Caching: Cache responses to reduce network calls
• Timeout: Set reasonable timeouts for requests
• Security: Never store API keys in client code