11. React Native Real-World Projects | To-Do, News, Social Media Apps

Course Overview: In this module, you will apply your React Native skills by building real-world projects. You will create a To-Do List app, a News Reader app, and a basic Social Media app with user authentication and API integration. This helps reinforce concepts from previous modules while gaining hands-on experience.

✅ Project 1: To-Do List App

The To-Do List App allows users to create, update, and delete tasks stored locally on the device.

import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function TodoApp() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = async () => {
    if(task.trim() === '') return;
    const newTasks = [...tasks, task];
    setTasks(newTasks);
    setTask('');
    await AsyncStorage.setItem('tasks', JSON.stringify(newTasks));
  };

  const removeTask = async (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
    await AsyncStorage.setItem('tasks', JSON.stringify(newTasks));
  };

  return (
    <View style={{padding:20}}>
      <TextInput placeholder="Add Task" value={task} onChangeText={setTask} style={{borderWidth:1, marginBottom:10, padding:8}} />
      <Button title="Add Task" onPress={addTask} />
      <FlatList
        data={tasks}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item, index}) => (
          <TouchableOpacity onPress={() => removeTask(index)}>
            <Text style={{padding:10, borderBottomWidth:1}}>{item}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

✅ Project 2: News Reader App

The News Reader App fetches data from a public API and displays it in a list format.

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

export default function NewsApp() {
  const [news, setNews] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchNews = async () => {
      try {
        const res = await axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY');
        setNews(res.data.articles);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };
    fetchNews();
  }, []);

  if (loading) return <ActivityIndicator size="large" style={{marginTop:50}} />;

  return (
    <View style={{padding:20}}>
      <FlatList
        data={news}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => Linking.openURL(item.url)}>
            <Text style={{fontWeight:'bold', marginBottom:5}}>{item.title}</Text>
            <Text style={{marginBottom:10}}>{item.description}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

✅ Project 3: Social Media App

The Social Media App demonstrates user authentication, posting messages, and viewing posts in a feed.

import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function SocialApp() {
  const [posts, setPosts] = useState([]);
  const [message, setMessage] = useState('');

  const fetchPosts = async () => {
    const token = await AsyncStorage.getItem('userToken');
    const res = await axios.get('https://yourapi.com/posts', { headers: { Authorization: `Bearer ${token}` } });
    setPosts(res.data);
  };

  const addPost = async () => {
    const token = await AsyncStorage.getItem('userToken');
    await axios.post('https://yourapi.com/posts', { message }, { headers: { Authorization: `Bearer ${token}` } });
    setMessage('');
    fetchPosts();
  };

  useEffect(() => { fetchPosts(); }, []);

  return (
    <View style={{padding:20}}>
      <TextInput placeholder="Write a post..." value={message} onChangeText={setMessage} style={{borderWidth:1, marginBottom:10, padding:8}} />
      <Button title="Post" onPress={addPost} />
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => (
          <View style={{marginBottom:10, borderBottomWidth:1, paddingBottom:5}}>
            <Text style={{fontWeight:'bold'}}>{item.userName}</Text>
            <Text>{item.message}</Text>
          </View>
        )}
      />
    </View>
  );
}

✅ Summary

• Built a To-Do List App with local storage using AsyncStorage.
• Created a News Reader App using Axios to fetch and display API data.
• Developed a Social Media App with user authentication, posting, and fetching data from backend.
• These projects integrate core React Native concepts: navigation, state management, API handling, and component styling.
• Hands-on experience from these projects prepares you for real-world app development.