How to Build a Social Media App Using React Native + Firebase (Step-by-Step Guide)

React Native + Firebase is one of the most effective stacks to build a modern social media app. This guide explains the setup, core features, and sample code to help you start building a real project.

Why Choose React Native + Firebase?

React Native:

Single codebase for Android and iOS

Faster development cycles

Firebase:

Authentication (Email, Google, Phone, Apple)

Firestore Database for posts, profiles, feed

Firebase Storage for media uploads

Cloud Messaging for notifications

Suitable for MVP, startup, or portfolio-level apps.

Step 1: Create a React Native Project
npx react-native init SocialApp
cd SocialApp

Install dependencies:

npm install @react-navigation/native @react-navigation/stack
npm install firebase
npm install react-native-image-picker

Step 2: Firebase Setup

Go to Firebase Console > Create Project
Add your Android/iOS app and copy the config keys.

Create a file:

/config/firebase.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_BUCKET.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

Step 3: Authentication (Sign Up / Login)
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../config/firebase";

export const registerUser = async (email, password) => {
await createUserWithEmailAndPassword(auth, email, password);
};

export const loginUser = async (email, password) => {
await signInWithEmailAndPassword(auth, email, password);
};

Optional login methods:

Google Login

Phone OTP

Apple Sign-in

Step 4: Posting System (Create + Fetch Feed)

Create Post

import { collection, addDoc } from "firebase/firestore";
import { db } from "../config/firebase";

export const createPost = async (text, imageUrl) => {
await addDoc(collection(db, "posts"), {
content: text,
image: imageUrl,
createdAt: Date.now()
});
};

Fetch Posts / Feed

import { getDocs, collection } from "firebase/firestore";

export const getFeed = async () => {
const snapshot = await getDocs(collection(db, "posts"));
return snapshot.docs.map(doc => doc.data());
};

Step 5: Upload Images (Firebase Storage)
import { launchImageLibrary } from "react-native-image-picker";
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { storage } from "../config/firebase";

export const uploadImage = async () => {
const result = await launchImageLibrary();
const imageFile = result.assets[0];
const imgRef = ref(storage, images/${Date.now()}.jpg);

await uploadBytes(imgRef, imageFile);
return await getDownloadURL(imgRef);
};

Step 6: Real-Time Chat (Optional Module)
import { collection, onSnapshot } from "firebase/firestore";
import { db } from "../config/firebase";

const chatRef = collection(db, "chat");

onSnapshot(chatRef, (snapshot) => {
const messages = snapshot.docs.map(doc => doc.data());
console.log(messages);
});

Core Features Checklist

User profiles (Avatar, Bio, Followers)

Post feed (sorted by timestamp)

Likes, comments, and engagement

Follow/Unfollow feature

Image + video upload

Push notifications (Cloud Messaging)

Suggested App Folder Structure
/src
/screens
/components
/services
/config
/navigation
/utils

Conclusion

React Native + Firebase is an ideal stack to build a scalable social media app. It offers:

Cross-platform app delivery

Real-time feed updates

Secure authentication

Quick development cycle

You now have the foundation to start building. Continue by adding UI, navigation, and optimized architecture.