website·Indexed 32 days ago
https://docs.flyer.chat/A platform for creating in-app chat experiences using Flutter or React Native. It provides a chat UI and Firebase integration, including support for message types like text, image, and file, custom themes, localization, and Firebase Security Rules and Cloud Functions for backend management.
createUserInFirestore to initialize the user's chat profile. The id field is required and must match the uid provided by Firebase Authentication.import { createUserInFirestore } from '@flyerhq/react-native-firebase-chat-core'
await createUserInFirestore({
firstName: 'John',
id: credential.user.uid, // UID from Firebase Authentication
imageUrl: 'https://i.pravatar.cc/300',
lastName: 'Doe',
})
scrollToUnreadOptions parameter to the Chat widget. Provide the lastReadMessageId; the UI will automatically display a banner after the message with that ID.scrollToUnreadOptions: const ScrollToUnreadOptions(
lastReadMessageId: 'lastReadMessageId',
scrollOnOpen: true,
)@flyerhq/react-native-firebase-chat-core library requires React Native Firebase to be configured. Before installing the Flyer Chat core package, you must first configure your Firebase project and install the following React Native Firebase modules: Core, Authentication, and Cloud Firestore.yarn add @flyerhq/react-native-firebase-chat-coreFirebaseChatCore.instance.updateMessage(message, roomId). You should take a message object retrieved from the messages stream, modify the desired fields, and pass it back to the update method.onEndReached prop and isLastPage parameter. You can also pass onEndReachedThreshold via flatListProps to trigger the loading of more messages before the user reaches the end of the list.const handleEndReached = async () => {
const response = await fetch(`https://api.example.com/messages?page=${page}`)
const json = await response.json()
const newMessages = json.data.map((e: any) => ({
author: user,
id: e._id,
text: e.name,
type: 'text',
}))
setMessages([...messages, ...newMessages])
setPage(page + 1)
}
<Chat onEndReached={handleEndReached} />FirebaseChatCore.instance.createUserInFirestore. The id field is mandatory and must match the uid provided by Firebase Authentication.import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_firebase_chat_core/flutter_firebase_chat_core.dart';
await FirebaseChatCore.instance.createUserInFirestore(
types.User(
firstName: 'John',
id: credential.user!.uid, // UID from Firebase Authentication
imageUrl: 'https://i.pravatar.cc/300',
lastName: 'Doe',
),
);react-native-safe-area-context is installed in your project. If you are using React Navigation, this dependency is likely already present. Otherwise, install react-native-safe-area-context before adding the chat UI package.yarn add @flyerhq/react-native-chat-uiThe Chat widget is the primary component for rendering a chat interface in flutter_chat_ui. It requires three core properties to function:
messages: A list of messages to be rendered. These must be based on the abstract message types defined in flutter_chat_types. Custom message types must be mapped to these supported types.onSendPressed: A callback function triggered when the user sends a message. It receives a PartialText object. The developer is responsible for converting this PartialText into a full TextMessage (including author, id, and text) to maintain control over message metadata.user: A User object (requiring at least an id) used to identify the current user and determine message authorship.import 'package:flutter/material.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<types.Message> _messages = [];
final _user = const types.User(id: '82091008-a484-4a89-ae75-a22bf8d6f3ac');
@override
Widget build(BuildContext context) => Scaffold(
body: Chat(
messages: _messages,
onSendPressed: _handleSendPressed,
user: _user,
),
);
void _addMessage(types.Message message) {
setState(() {
_messages.insert(0, message);
});
}
void _handleSendPressed(types.PartialText message) {
final textMessage = types.TextMessage(
author: _user,
createdAt: DateTime.now().millisecondsSinceEpoch,
id: DateTime.now().toString(), // Use a unique ID (e.g., uuid package)
text: message.text,
);
_addMessage(textMessage);
}
}