This is a React Native Expo project using Firebase Authentication and Realtime Database to provide a simple chat functionality. Any user who registers in the app can chat with other registered users in real time.
- User registration and login with Firebase Auth
- Real-time messaging using Firebase Realtime Database
- List of registered users
- Simple chat interface with messages sorted by timestamp
- Logout functionality
- Clone the repository and install dependencies:
npm install- Create Firebase Configuration:
Create a firebaseConfig.ts file in the root of the project and paste your Firebase config object:
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import { getReactNativePersistence, initializeAuth } from "firebase/auth";
import ReactNativeAsyncStorage from "@react-native-async-storage/async-storage";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
databaseURL: "REALTIME_DB_URL",
};
export const app = initializeApp(firebaseConfig);
export const auth = initializeAuth(app, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage),
});
export const db = getDatabase(app);- Start the app:
npx expo start-
Open in Expo Go, Android emulator, or iOS simulator
-
Edit files inside the
app/directory
- Register a new user or log in
- Select a user from the horizontal user list to start a chat
- Messages are sent and received in real-time
- Logout using the button in the header
- Messages are sorted by timestamp automatically
If you want a fresh project setup:
npm run reset-projectThis moves the starter code to app-example and creates a blank app/ directory for development.
app/– Main app directory with screens and routingproviders/– React context providers for Auth and Chatcomponents/– Reusable UI componentsfirebaseConfig.ts– Firebase setup file
[Abdulah Dzankic]
🌐 Website