flyerhq / react-native-chat-ui Goto Github PK
View Code? Open in Web Editor NEWActively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
Home Page: https://flyer.chat
License: Apache License 2.0
Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
Home Page: https://flyer.chat
License: Apache License 2.0
When using with Expo web, I get a build error.
Create a new Expo project, and use the example here.
No build errors
If applicable, add screenshots or videos to help explain your problem.
Stack trace
./node_modules/react-native/Libraries/Performance/Systrace.js:216:3
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
214 | // with numeric IDs
215 | // TODO(davidaurelio) Scan polyfills for dependencies, too (t9759686)
> 216 | (require: $FlowFixMe).Systrace = Systrace;
| ^
217 | }
218 |
219 | module.exports = Systrace;
Please specify the react, react-native, react-native-chat-ui versions.
react: 17.0.1
react-native: 0.64.3
react-native-chat-ui: 1.4.3
npx react-native info
output ๐
System:
OS: Windows 10 10.0.19043
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 2.84 GB / 15.90 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 7.16.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Not Found
Visual Studio: Not Found
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-windows: Not Found
npmGlobalPackages:
*react-native*: Not Found
Device (e.g. Android emulator, iOS simulator, Samsung Galaxy S21): Chrome (web)
OS version (e.g. iOS 14.5, Android 11): Windows 10
Error goes away if I remove so feels like the Chat component is causing this.
Works fine w/ Android emulator.
Hello,
I am trying to override emptyChatPlaceholder using l10nOverride but it's not working
tested on iphone 5s, iOS 10
Thank you in advance.
Hi,
https://github.com/flyerhq/react-native-chat-ui/blob/main/src/components/Chat/Chat.tsx#L173-L185
Forces an automated scrolling. Since I am using a customBottomComponent, I am handling things differently.
Also does this not play nicely with facebook/react-native#31402
I'll have to patch-package this for now but it would be awesome to make this
a) configurable (default activated for the normal user)
b) forwardRef of FlatList so we can actually make custom scroll decisions.
I am getting this error message for font not being loaded on my Samsung note 4, although I get nothing like that on my iphone 8 plus.
The issue can be reproduced by simple using the sample code in the documentation website
import React, { useState } from "react";
import { Chat, MessageType } from "@flyerhq/react-native-chat-ui";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
const [messages, setMessages] = useState<MessageType.Text[]>([]);
const user = { id: "06c33e8b-e835-4736-80f4-63f44b66666c" };
return (
<SafeAreaProvider>
<Chat
messages={messages}
onSendPress={() => console.log("sent")}
user={user}
/>
</SafeAreaProvider>
);
}
function uuidv4() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r = Math.floor(Math.random() * 16);
const v = c === "x" ? r : (r % 4) + 8;
return v.toString(16);
});
}
Please specify the react, react-native, react-native-chat-ui versions.
"@flyerhq/react-native-chat-ui": "^1.4.2",
"expo": "~42.0.1",
"react": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-safe-area-context": "3.2.0",
Samsung Galaxy Note 4
OS version (Android 6.0.1):
Integrating in React Native Expo app.
1 issues in ios:
Works fine with Android.
Integrate into a react native ios app and build it.
Same behavior as in android.
Just using normal example from docs.
<SafeAreaProvider style={styles.chatContainer}>
<MemoizedChat
messages={memoizedMessages}
onPreviewDataFetched={handlePreviewDataFetched}
onSendPress={handleSendPress}
onEndReached={handleEndReached}
user={{
...user,
id: user?._id as string,
}}
theme={{
...defaultTheme,
colors: {
...defaultTheme.colors,
background: '#02020349',
inputBackground: "#5260D1FF",
},
}}
showUserNames={true} />
</SafeAreaProvider>
Please specify the react, react-native, react-native-chat-ui versions.
react: 18.2.0
react-native: 0.71.6
react-native-chat-ui: 1.4.3
expo: 48.0.7
npx react-native info
output ๐
info Fetching system and libraries information...
System:
OS: macOS 13.3.1
CPU: (8) x64 Apple M1
Memory: 20.11 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.0/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.6 => 0.71.6
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Device (e.g. Android emulator, iOS simulator, Samsung Galaxy S21): iPhone 11
OS version (e.g. iOS 14.5, Android 11): iOS 16.3.1
Add any other context about the problem here.
There is a serious issue when we want to include a header in this chat ui. I tried multiple approaches:
Thank you so much for looking into this
Is there a way to disable date header component completely? I'm including message time inside a custom message bubble and I would like to disable the date component completely.
Title is self-explanatory, I can't see to find anything about this and it seems like an important detail.
bonus questions:
Thank you!
Hi,
right now I have to manually pass all the needed props (beside of i10n, theme, user which can be accessed via context) to my custom renderCustomComponent. It would be nice to have some kind of a Base Component which has access to all the props without the need to make so much prop drilling.
everytime i try to tun the example it says:
Error: While trying to resolve module @flyerhq/react-native-chat-ui
from file C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\src\App.tsx
, the package C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\package.json
was successfully found. However, this package itself specifies a main
module field that could not be resolved (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\lib\index.js
. Indeed, none of these files exist:
By default when sending a message a user expects the chat thread to scroll up a bit in order to show the newly sent message. But that's not a default behaviour here I guess. Is there any way, workaround to solve this? Below is a short video to demonstrate the issue.
THANKS!
In the following example, User2
's messages are getting erased from the state as soon as the User1
sends a message.
I'm persuaded it's a React setState
mistake but I've followed the react-native-chat-ui
's docs as much as possible but somehow there is something going wrong and I cannot put my finger on it.
To test, just type a message and wait 1 second for the User2
to reply and you'll see that as soon as the User2
replies, the User1
's messages disappear.
What's weird is that the User2
's messages persist which boggles my mind and makes me think it might be related to the project and not only a React setState
mistake. (I thought maybe I don't wait for setState
to be done executing but this doesn't seem to be the case)
I've been scratching my head for a hour on this so I thought I'd ask here.
Here is a video of the bug in action: https://streamable.com/rxbx18
Anybody has an idea?
Amazing project by the way!
Thanks!
import React, { useEffect, useState } from 'react';
import { Chat, MessageType } from '@flyerhq/react-native-chat-ui'
import { SafeAreaProvider } from 'react-native-safe-area-context'
const uuidv4 = () => {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = Math.floor(Math.random() * 16)
const v = c === 'x' ? r : (r % 4) + 8
return v.toString(16)
})
};
const user = { id: uuidv4(), firstName: 'User1' };
const chatbot = { id: uuidv4(), firstName: 'User2' };
const App = () => {
const [messages, setMessages] = useState<MessageType.Any[]>([])
const addMessage = (message: MessageType.Any) => {
setMessages([message, ...messages]);
};
const handleSendPress = (message: MessageType.PartialText) => {
// display user message
const textMessage: MessageType.Text = {
author : user,
createdAt: Date.now(),
id : uuidv4(),
text : message.text,
type : 'text',
};
addMessage(textMessage);
// display bot message
// NOTE: adding a timeout so that you can see user's message for a second...
setTimeout(() => {
const chatbotTextMessage: MessageType.Text = {
author : chatbot,
createdAt: Date.now(),
id : uuidv4(),
text : `Response that will erase user's messages...`,
type : 'text',
};
addMessage(chatbotTextMessage);
}, 1000);
};
return (
<SafeAreaProvider>
<Chat
messages={messages}
showUserNames={true}
onSendPress={handleSendPress}
user={user}
/>
</SafeAreaProvider>
);
}
export default App;
In this section, the activityIndicator will only be activated without onEndReached it is asynchronous, but firestore isnt asynchronous so it will never generate an activityIndicator
setNextPageLoading(true)
await onEndReached?.()
setNextPageLoading(false)
Expected:
The activityindicator should be shown loading, until new information is received
Is there some other way to handle the activityIndicator?
Hi There! Thanks for this amazing library but I'm finding it a bit hard to show users names in group chat, how can I archive that, please??
.
The new GitHub feature, called Discussions, allows us to keep better track of new features, also giving an ability to vote for the most wanted ones, so they are clearly visible. There will also be important announcements.
In there you can find a ๐ Feedback category where you can say a kind word or two. It keeps us going!
Hello ๐
I finally found this package to be exactly what i needed, but i dont seems to understand some things about the package.
There is no documentation on some aspect of things. eg (the [ ] of message has basic stuff like {author,id,text,type and createdAt}
).
so whats key to stuff like sender{imageUrl, name,isRead}.
i also when through the example code, but didnt see any of those values been passed!
Any help will be very much appreciated. โ
Hello ๐
This project has really made my chat setup a lot faster...
I use firestore to push my messages.
But I have an issue with showing a progress loader when uploading an image (base64) to a backend and then updating the message as well..
How Can i to update status for a single message, so after i get the fileMessage and push to firestore i can just update the status as 'sent'
try {
const response = await DocumentPicker.pickSingle({
type: [DocumentPicker.types.allFiles],
})
const fileMessage: MessageType.File = {
author: {
id: currentUser.id,
},
createdAt: Date.now(),
id: uuidv4(),
mimeType: response.type,
name: response.name,
size: response.size,
status:'sending',
type: 'file',
uri: response.uri,
}
addMessage(fileMessage)
const renderBubble =({
child,
message,
nextMessageInGroup,
}: {
child: ReactNode
message: MessageType.Any
nextMessageInGroup: boolean
}) =>{
return (
<View
style={{
backgroundColor: currentUser.id !== message.author.id ? '#ffffff' : '#1d1c21',
borderBottomLeftRadius:
!nextMessageInGroup && currentUser.id !== message.author.id ? 20 : 0,
borderBottomRightRadius:
!nextMessageInGroup && currentUser.id === message.author.id ? 20 : 0,
borderColor: '#1d1c21',
borderWidth: 1,
overflow: 'hidden',
}}
>
{child}
</View>
);
}
Hello, I'm not sure if this is a problem with the library or with my code, but I feel like the React 18 hook useSyncExternalStore is not supported on the message prop of the Chat component.
I have a service which provides data for the Conversation component, in the Conversation component I use the react-native-chat-ui Chat component to render the chat. In my first iteration I used React's state hook to supply the messages to the Chat component, but as I have been refining the design I wanted to refactor out the server communication into a separate piece of code. I evaluated that the useSyncExternalStore should do the trick. After rolling out some code for the custom store and trying it out, I'm getting an infinite loop in the React render.
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
Step 1. Define a service to be used with useSyncExternalStore
Step 2. Use the defined service in a component that renders the Chat component
Step 4. Pass the service data to the Chat messages prop.
The Chat component should use the passed prop as the source of the displayed messages and rerender when the external store calls the listener callback.
// ConversationService.ts
export const conversationService = (id: string) => {
let messages : Message[] = [];
let messagesListeners : any[] = [];
let lastMessagesResponse : GetMessagesResponse;
const updateMessages = () => {
const toTimestamp = new Date();
const fromTimestamp = lastMessagesResponse?.latestMessageTimestamp ?? new Date(0);
Server.Conversations.GetMessagesBetween(id, fromTimestamp, toTimestamp)
.then(resp => {
messages = [...messages, ...resp.selectedMessages]
lastMessagesResponse = resp ?? lastMessagesResponse;
emitMessagesChanged();
})
.catch(err => console.error(err));
}
const subscribeMessages = (listener: any) => {
messagesListeners = [...messagesListeners, listener];
return () => {
messagesListeners = messagesListeners.filter(l => l !== listener);
}
}
const getMessagesSnapshot = () => {
return messages?.map(mapMessage) ?? [];
}
const emitMessagesChanged = () => {
for (const listener of messagesListeners) {
listener();
}
}
const sendTextMessage = (message: MessageType.PartialText) => {
Server.Conversations.PostMessage(id, { encryptedTextData: message.text })
.then(_ => updateMessages())
.catch(err => console.error(err));
}
const mapMessage = (message: Message): MessageType.Any => {
if (message.encryptedTextData) {
return {
id: message.timestamp.valueOf().toString(), // WARN: temporary hack, should return id with message dto
type: "text", text: message.encryptedTextData,
createdAt: message.timestamp.valueOf(), author: { id: message.sender.phoneNumber }
};
}
}
return {
messages: {
subscribe: subscribeMessages ,
snapshot: getMessagesSnapshot
}
}
}
// Conversation.tsx
const Conversation = ({ route, navigation }: ConversationProps) => {
const id = route.params.convId;
const service = conversationService(id);
const conversationMessages = useSyncExternalStore<MessageType.Any[]>(service.messages.subscribe, service.messages.snapshot);
return (
<View style={{ flex: 1 }}>
<Chat messages={conversationMessages} />
</View>
);
}
Please specify the react, react-native, react-native-chat-ui versions.
react: 18.2.0
react-native: 0.71.6
react-native-chat-ui: 1.4.3
expo: 48.0.11
npx react-native info
output ๐
System:
OS: Windows 10 10.0.22623
CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
Memory: 35.52 GB / 63.82 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
Versions: 10.0.17763.0, 10.0.19041.0
IDEs:
Android Studio: Not Found
Visual Studio: 17.5.33530.505 (Visual Studio Community 2022)
Languages:
Java: 11.0.16.1 - C:\Program Files\Microsoft\jdk-11.0.16.101-hotspot\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.6 => 0.71.6
react-native-windows: Not Found
npmGlobalPackages:
*react-native*: Not Found
Expo Go (managed React Native app)
https://github.com/marcocesarato/react-native-big-list, has a better perfermance.
I am not completely sure whether my codes follows good PRACTICE, that's why I'm here.
In a room chat, I want the current room members to be notified of newly joined member through rendering customMessage.
my code:
import { Dimensions } from 'react-native'
import { Chat, defaultTheme } from '@flyerhq/react-native-chat-ui';
//first off, let's get the screen width
const { width } = Dimensions.get('screen');
const ChatWindow = () => {
return (
<Chat
...
renderCustomMessage={(message) => {
if (message?.type !== 'custom') return;
return (
<View
style={{
width: width - 20,
backgroundColor: background,
paddingVertical: 10,
alignItems: 'center',
}}
>
<Paragraph>{message?.text}</Paragraph>
</View>
);
}}
/>
)
}
Please, if there's a better approach to archive this, let me know. And I think more examples are needed In the documentations, Thank you so much for this amazing Lib, words can't describe how amazing it was!!
PS: Screenshot provided below.
Flyer chat ui is really good, but I can not find a Vue implementation for this?
is there any plans for supporting Vue?
I have no issue with this package, but just wanted to share my appreciation and say thank you for releasing this package open source, it works well as described in the docs.
Firstly I will like to say a big thank you for this amazing and wonderful project that will soon overtake most of the unmaintained libraries out there. As I'm currently in need of something similar to this and came across your library but had one question, **does it support Expo Platform? ** Because my current development setup uses Expo.
Thank you so much once again!
Hi thanks for your beautiful work
i'm using your react-native chat ui,
I'm trying to modify the avatar image view and
get a event when avatar image is touched
but i coulnd't find it in your docs
could you give me some hint regarding modifying avatar image view?
again thanks for your work!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.