@package/chat/react-native

Composants React Native pour le système de chat utilisant le pattern Compound Components avec intégration des hooks React.

Installation

``bash
bun install
`

Configuration initiale

Enveloppez votre application avec le ChatProvider :

`tsx
import { ChatProvider } from '@package/chat/react-native';
import { createChatClient } from '@siran/chat-client';

function App() {
const chatClient = createChatClient({
engine,
eventSubscriber,
});

return (



);
}
`

Utilisation

Tous les composants utilisent automatiquement les hooks de @siran/chat-react-hooks :

`tsx
import { ChatProvider, Chat } from '@package/chat/react-native';
import { createChatClient } from '@siran/chat-client';

function ChatScreen() {
return (



Conversation


{/ Charge automatiquement les messages via useMessages /}


{/ Affiche automatiquement les utilisateurs en train de taper via useTyping /}


{/ Combine Input + SendButton avec useSendMessage /}



);
}
`

$3

Vous pouvez personnaliser le rendu de chaque message :

`tsx
renderMessage={(message) => (


{message.senderId}
{message.content}
{message.sentAt.toLocaleString()}


)}
/>
`

Slots disponibles

$3

En-tête de la conversation.

Props:
- children?: ReactNode - Contenu de l'en-tête
- style?: ViewStyle - Styles personnalisés

$3


Conteneur scrollable pour la liste des messages. Utilise toujours useMessages et useSubscribeToConversation.

Props:
- conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
- userId?: string - ID de l'utilisateur (optionnel si fourni dans Chat)
- autoLoad?: boolean - Charger automatiquement les messages (défaut: true)
- showLoading?: boolean - Afficher l'indicateur de chargement (défaut: true)
- showError?: boolean - Afficher les erreurs (défaut: true)
- renderMessage?: (message: ChatMessage) => ReactNode - Fonction pour personnaliser le rendu de chaque message
- style?: ViewStyle - Styles personnalisés

Requis: conversationId et userId doivent être fournis (via props ou contexte Chat)

$3

Composant pour afficher un message individuel.

Props:
- children?: ReactNode - Contenu du message
- messageId?: string - Identifiant du message
- style?: ViewStyle - Styles personnalisés

$3

Champ de saisie pour les messages.

Props:
- placeholder?: string - Texte placeholder (défaut: "Tapez votre message...")
- value?: string - Valeur contrôlée
- onChangeText?: (text: string) => void - Callback de changement
- style?: ViewStyle - Styles personnalisés
- Toutes les props de TextInput de React Native

$3

Bouton pour envoyer un message.

Props:
- onPress?: () => void - Callback au clic
- disabled?: boolean - État désactivé
- children?: ReactNode - Contenu personnalisé (défaut: "Envoyer")
- style?: ViewStyle - Styles personnalisés

$3


Composant combiné qui intègre Chat.Input + Chat.SendButton avec useSendMessage. Utilise toujours les hooks pour envoyer les messages.

Props:
- conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
- senderId?: string - ID de l'expéditeur (optionnel si userId fourni dans Chat)
- placeholder?: string - Texte placeholder (défaut: "Tapez votre message...")
- style?: ViewStyle - Styles du conteneur
- inputStyle?: ViewStyle - Styles de l'input
- buttonStyle?: ViewStyle - Styles du bouton

Requis: conversationId et senderId doivent être fournis (via props ou contexte Chat)

$3


Indicateur de frappe en cours. Utilise toujours useTyping pour récupérer les utilisateurs en train de taper.

Props:
- conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
- style?: ViewStyle - Styles personnalisés

Requis: conversationId doit être fourni (via props ou contexte Chat)

Hooks disponibles

$3

Pour accéder au contexte du composant Chat dans vos propres composants :

`tsx
import { useChatContext } from '@package/chat/react-native';

function CustomComponent() {
const { conversationId, userId } = useChatContext();
// Utiliser conversationId et userId
}
`

$3

Tous les hooks de @siran/chat-react-hooks sont disponibles et peuvent être utilisés directement :

`tsx
import { useMessages, useSendMessage, useTyping } from '@siran/chat-react-hooks';

function MyComponent() {
const { messages } = useMessages('conv-123', 'user-456');
const { sendMessage } = useSendMessage();
const typingUsers = useTyping('conv-123');
// ...
}
`

Composition flexible

Les slots peuvent être utilisés dans n'importe quel ordre et vous pouvez créer votre propre layout :

`tsx


{/ Votre propre structure /}








`

Personnalisation

- Tous les composants acceptent une prop style pour personnaliser l'apparence
- Chat.MessageList accepte renderMessage pour personnaliser le rendu de chaque message
- Les composants Chat.Input et Chat.SendButton` peuvent être utilisés séparément si vous préférez gérer l'envoi manuellement