---
title: 'Créer une application de chat avec Firebase et React Native'
description: 'Créer une application de chat en temps réel avec React Native, Firebase Auth et react-native-gifted-chat : inscription, connexion et messagerie avec Expo.'
pubDate: 2023-11-14
family: 'javascript-frontend'
tags: []
heroImage: '/images/creer-une-application-de-chat-avec-firebase-et-react-native.webp'
videoUrl: 'https://youtu.be/26EjdKKnnp0'
---

Firebase et React Native forment un duo puissant pour créer des applications de chat en temps réel. Ce tutoriel montre comment construire une application de messagerie complète avec authentification, du zéro à la démo fonctionnelle.

## Fonctionnalités de l'application

- **Inscription et connexion** par email/mot de passe via Firebase Authentication
- **Messagerie en temps réel** avec Firestore comme base de données
- **Interface de chat** grâce à la librairie `react-native-gifted-chat`
- **Déconnexion** depuis l'interface

## Créer le projet Expo

```bash
npx create-expo-app MonChat --template
```

Expo simplifie le développement React Native en gérant la configuration native iOS/Android automatiquement.

## Configurer Firebase

1. Créer un projet sur [console.firebase.google.com](https://console.firebase.google.com/)
2. Activer **Authentication** → Email/mot de passe
3. Activer **Firestore** en mode test
4. Copier la configuration Firebase dans l'application

## Intégrer react-native-gifted-chat

```bash
npm install react-native-gifted-chat @firebase/firestore
```

La librairie `GiftedChat` gère l'affichage des messages (bulles colorées, date, avatar) et expose un callback `onSend` pour envoyer les nouveaux messages vers Firestore.

## Architecture des données Firestore

Les messages sont stockés dans une collection `messages` :

- `_id` : identifiant unique du message
- `text` : contenu du message
- `createdAt` : timestamp
- `user` : objet avec `_id` et `name`

La lecture en temps réel se fait avec `onSnapshot` de Firestore.

## Pour aller plus loin

On peut enrichir l'application avec des salons de discussion privés, des statuts de lecture ou des notifications push. Retrouvez la démo sur [YouTube](https://youtu.be/26EjdKKnnp0).