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:

• C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\lib\index.js(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\lib\index.js\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) at DependencyGraph.resolveDependency (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\node-haste\DependencyGraph.js:311:17) at Object.resolve (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\lib\transformHelpers.js:129:24) at resolve (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33) at C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26 at Array.reduce () at resolveDependencies (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33) at processModule (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31) at async addDependency (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:230:18) at async Promise.all (index 2) at async processModule (C:\Users\sriva\Downloads\react-native-chat-ui-main (1)\react-native-chat-ui-main\example\node_modules\metro\src\DeltaBundler\traverseDependencies.js:198:5)

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.

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!

https://user-images.githubusercontent.com/57716026/120024352-f2186380-bfe6-11eb-93fe-e0973188c4ba.mp4

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)

https://github.com/flyerhq/react-native-chat-ui/blob/242a30a6aba85ea379fb690d60079ec034858acc/src/components/Chat/Chat.tsx#L223

Expected: The activityindicator should be shown loading, until new information is received

Is there some other way to handle the activityIndicator?

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>
        );
    }

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!

fontFamily "Avenir" is not a system font and has not been loaded through Font.loadAsync

What bug do you experience? 🐞

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.

How can it be reproduced? 🤔

The issue can be reproduced by simple using the sample code in the documentation website

Code snippets 📝

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",

Platform

Samsung Galaxy Note 4

OS version (Android 6.0.1):

Bumps moment from 2.29.1 to 2.29.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps hosted-git-info from 2.8.8 to 2.8.9.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps hosted-git-info from 2.8.8 to 2.8.9.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

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.

Title is self-explanatory, I can't see to find anything about this and it seems like an important detail.

bonus questions:

• any way of making urls into links?
• if I were to detect code to syntax highlight it, how would I proceed? I guess I’d need to fork the code?

Thank you!

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;

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

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. ✌