Building a Modern Chat App in React Native: Complete Guide (2025)

1npx expo init ChatAppRN --template blank
2cd ChatAppRN
3expo install firebase react-navigation react-native-gifted-chat react-native-image-picker react-native-maps redux react-redux @react-navigation/native @react-navigation/stack
4

1/ChatAppRN
2  /components
3  /screens
4  /redux
5  /services
6  App.js
7

1// services/firebase.js
2import firebase from "firebase/app";
3import "firebase/auth";
4
5const firebaseConfig = {
6  apiKey: "YOUR_API_KEY",
7  authDomain: "YOUR_AUTH_DOMAIN",
8  projectId: "YOUR_PROJECT_ID",
9  storageBucket: "YOUR_STORAGE_BUCKET",
10  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
11  appId: "YOUR_APP_ID"
12};
13
14if (!firebase.apps.length) {
15  firebase.initializeApp(firebaseConfig);
16}
17
18export const auth = firebase.auth();
19

1// screens/LoginScreen.js
2import { auth } from "../services/firebase";
3
4const handleSignUp = async (email, password) => {
5  try {
6    await auth.createUserWithEmailAndPassword(email, password);
7  } catch (err) {
8    alert(err.message);
9  }
10};
11

1// screens/ChatScreen.js
2import React, { useState, useEffect, useCallback } from "react";
3import { GiftedChat } from "react-native-gifted-chat";
4import { firestore } from "../services/firebase";
5
6export default function ChatScreen({ user }) {
7  const [messages, setMessages] = useState([]);
8
9  useEffect(() => {
10    const unsubscribe = firestore
11      .collection("chats")
12      .doc("room1")
13      .collection("messages")
14      .orderBy("createdAt", "desc")
15      .onSnapshot(snapshot => {
16        setMessages(
17          snapshot.docs.map(doc => ({
18            _id: doc.id,
19            text: doc.data().text,
20            createdAt: doc.data().createdAt.toDate(),
21            user: doc.data().user
22          }))
23        );
24      });
25    return () => unsubscribe();
26  }, []);
27
28  const onSend = useCallback((messages = []) => {
29    const { _id, createdAt, text, user } = messages[0];
30    firestore
31      .collection("chats")
32      .doc("room1")
33      .collection("messages")
34      .add({
35        _id,
36        text,
37        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
38        user
39      });
40  }, []);
41
42  return (
43    <GiftedChat
44      messages={messages}
45      onSend={messages => onSend(messages)}
46      user={{
47        _id: user.uid,
48        name: user.displayName
49      }}
50    />
51  );
52}
53

1// services/firebase.js
2import "firebase/firestore";
3export const firestore = firebase.firestore();
4

1// Image picker
2import * as ImagePicker from "react-native-image-picker";
3const pickImage = async () => {
4  const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images });
5  if (!result.cancelled) {
6    // Upload image to Firebase Storage and send URL as message
7  }
8};
9
10// Location sharing (using react-native-maps)
11import * as Location from "expo-location";
12const shareLocation = async () => {
13  let { status } = await Location.requestForegroundPermissionsAsync();
14  if (status === 'granted') {
15    let location = await Location.getCurrentPositionAsync({});
16    // Send location coordinates as a message
17  }
18};
19

1// theme/ThemeContext.js
2import React, { createContext, useState } from "react";
3export const ThemeContext = createContext();
4
5export const ThemeProvider = ({ children }) => {
6  const [theme, setTheme] = useState("light");
7  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
8  return (
9    <ThemeContext.Provider value={{ theme, toggleTheme }}>
10      {children}
11    </ThemeContext.Provider>
12  );
13};
14

1// __tests__/ChatScreen.test.js
2import React from "react";
3import renderer from "react-test-renderer";
4import ChatScreen from "../screens/ChatScreen";
5
6test("renders correctly", () => {
7  const tree = renderer.create(<ChatScreen user={{ uid: "1", displayName: "Test" }} />).toJSON();
8  expect(tree).toMatchSnapshot();
9});
10

1expo build:android
2expo build:ios
3