I am trying to change how the files get rendered, so instead on changing the whole message, only the file render can be changed. This will be very convenient.

I get the following error when trying to upload a document, on both iOS and Android
Uploading pictures/images works fine

[Error: Couldn't construct a file out of supplied options. URI or file data required.]

This error shows up only after trying to upload the file (where the name of the document should be shown in the MessageInput component I just get a blank space)

package.json:

"dependencies": {
    "@expo-google-fonts/inter": "~0.2.3",
    "@expo/html-elements": "~0.9.1",
    "@pubnub/chat": "~0.5.2",
    "@pubnub/react-native-chat-components": "~0.33.0",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@sentry/react-native": "~5.19.1",
    "@storybook/addon-actions": "~7.6.16",
    "@storybook/addon-ondevice-backgrounds": "~7.6.15",
    "@storybook/react": "~7.6.16",
    "@types/pubnub": "~7.4.2",
    "class-variance-authority": "~0.7.0",
    "clsx": "~2.1.0",
    "expo-constants": "~15.4.5",
    "expo-dev-client": "~3.3.9",
    "expo-document-picker": "~11.10.1",
    "expo-file-system": "~16.0.8",
    "expo-font": "~11.10.3",
    "expo-image-picker": "~14.7.1",
    "expo-insights": "~0.6.1",
    "expo-linking": "~6.2.2",
    "expo-media-library": "~15.9.1",
    "expo-router": "~3.4.8",
    "expo-sharing": "~11.10.0",
    "expo-status-bar": "~1.11.1",
    "expo-updates": "~0.24.9",
    "flat": "~6.0.1",
    "i18next": "~23.10.0",
    "kebab-case": "~1.0.2",
    "lodash.memoize": "~4.1.2",
    "lodash.merge": "~4.6.2",
    "nativewind": "4.0.33",
    "pubnub": "~7.6.1",
    "pubnub-react": "~3.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "~14.0.5",
    "react-native": "0.73.4",
    "react-native-drawer-layout": "~3.2.2",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-pager-view": "~6.2.3",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "~14.1.0",
    "react-native-tab-view": "~3.5.2",
    "recyclerlistview": "~4.2.0",
    "rn-emoji-keyboard": "~1.6.1",
    "tailwind-merge": "~2.2.0"
  },
  "devDependencies": {
    "@babel/core": "~7.20.12",
    "@babel/runtime": "~7.23.8",
    "@expo/fingerprint": "~0.6.0",
    "@react-native-community/datetimepicker": "7.6.1",
    "@react-native-community/slider": "4.4.2",
    "@storybook/addon-ondevice-actions": "~7.6.15",
    "@storybook/addon-ondevice-controls": "~7.6.15",
    "@storybook/react-native": "~7.6.15",
    "@tailwindcss/container-queries": "~0.1.1",
    "@types/lodash.memoize": "~4.1.9",
    "@types/lodash.merge": "~4.6.9",
    "@types/node": "~20.11.16",
    "@types/react": "~18.2.58",
    "@types/react-dom": "~18.0.10",
    "autoprefixer": "~10.4.16",
    "babel-loader": "^8.3.0",
    "eas-cli": "~7.3.0",
    "expo": "~50.0.8",
    "react-devtools": "~5.0.0",
    "react-native-css-interop": "~0.0.33",
    "react-native-web": "~0.19.10",
    "tailwindcss": "3.3.2",
    "typescript": "~5.3.3"
  }

import { Chat, MessageInput, MessageList } from "@pubnub/react-chat-components";
import { Picker } from "emoji-mart";
import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";

const pubnub = new PubNub({
	publishKey: PUBLISH_KEY,
	subscribeKey: SUBSCRIBE_KEY,
	uuid: "myFirstUser",
});
const currentChannel = "Default";
const theme = "light";

export const PubNubChat = () => {
	const onError = (error) => {
		console.log(error);
	};
	return (
		<PubNubProvider client={pubnub}>
			<Chat {...{ currentChannel, theme, onError }}>
				<MessageList />
				<MessageInput
					typingIndicator
					emojiPicker={<Picker />}
				/>
			</Chat>
		</PubNubProvider>
	);
};

When starting the development server, the below component is rendered.

When the emoji icon is clicked, it throws the following error

TypeError: Class constructor $724e43cd4d4265a7$export$2e2bcd8739ae039 cannot be invoked without 'new'
   at renderWithHooks (react-dom.development.js:16175:1)
   at mountIndeterminateComponent (react-dom.development.js:20913:1)
   at beginWork (react-dom.development.js:22416:1)
   at beginWork$1 (react-dom.development.js:27381:1)
   at performUnitOfWork (react-dom.development.js:26513:1)
   at workLoopSync (react-dom.development.js:26422:1)
   at renderRootSync (react-dom.development.js:26390:1)
   at recoverFromConcurrentError (react-dom.development.js:25806:1)
   at performSyncWorkOnRoot (react-dom.development.js:26052:1)
   at flushSyncCallbacks (react-dom.development.js:12009:1)

here is the console error

followed all the steps to run the sample app but keep getting "failed to compile message"

The text will be cut out after picking files on small screens

I think it should call autoSize after this line in MessageInput component?

I don't know whether this is feasible or if it i s too hard to implement.

Having a reference to the previous message would allow the message renderer to have some context to be able to render consecutive messages without the need to repeat the user name or even allow to render the date timestamp if a date between two messages changed(for example)

It would be great if I can customize the file/image upload button like sendButton.

Hello,
we are having some issues when trying to build our android app with eas build
the ios version is building without problems, this are the errors shown

> Configure project :app
 ℹ️  Applying gradle plugin 'expo-dev-launcher-gradle-plugin' ([email protected])
 ℹ️  Applying gradle plugin 'expo-updates-gradle-plugin' ([email protected])
FAILURE: Build completed with 2 failures.
1:Task failed with an exception.
-----------
* Where:
Build file '/home/expo/workingdir/build/mobile/node_modules/expo-document-picker/android/build.gradle' line: 40
* What went wrong:
A problem occurred evaluating project ':expo-document-picker'.
> Could not set unknown property 'classifier' for task ':expo-document-picker:androidSourcesJar' of type org.gradle.api.tasks.bundling.Jar.
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================
2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':expo'.
> compileSdkVersion is not specified. Please add it to build.gradle
* Try:
> Run with --stacktrace
option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================
* Get more help at https://help.gradle.org
BUILD FAILED in 2m 16s
15 actionable tasks: 15 executed

This are the package versions used

"@pubnub/react-native-chat-components": "^0.32.0",
"pubnub": "^7.3.3",
"pubnub-react": "^3.0.2",

Hi,

I am working on an application that requires subscribing to multiple channels to show notifications on a global header. Alongside, we have a need to chat with various people and groups within the application on different pages.

Platform we are using is Javascript/React. We are using React Chat Components to render the chats with people and groups. And leveraging pubnub client to listen to messages on other interactions that will help us render global header notifications.

The way we have organized this is:

1. A root level Listener component that uses Pubnub client to subscribe to global channels for global messages.
2. Individual React Components each with its own <Chat currentChannel: ch1> that facilitates chatting with either a direct user, or a group.

The issue we are seeing is:

1. When a component that uses <Chat currentChannel: ch1> gets rendered, we are seeing that the global notifications are no longer being received. Unless we refresh the page. Basically all the listeners that are set at the root level are no longer receiving messages.

What we did so far:
We thought it probably is because the component with <Chat currentChannel: ch1> is nullifying all the root level subscriptions and we started to include channels in all the <Chat currentChannel: ch1 channels: [all global level channels]>. This has started work but another issue started to show up:
As we go to another page with another <Chat currentChannel: ch2 channels: [all global level channels]>, the is not rendering the messages that we send unless we refresh the page.

I am beginning to think we are doing this all wrong it terms of how we setup the Chat component, i am thinking there are situations where things are either getting overridden by pubnub client and components.

Would greatly appreciate if you can advise on how to set this up so we can resolve this mess.

Hi Team,

I am using React native sdk for my app which is using PUBNUB. We have recently upgraded the app to use the pubnub react native components. But it seems like there is limitation on uploading images more than 5 mb, so we thought of reducing the size of the images before uploading.

Message Input component provide us with the onBeforeSend callback function, but it supports and intercepts only texts not the files.

Hello!. I'm getting crashes on Expo 48 latest. I think it has to do with hermes. This is the error:

 ERROR  TypeError: Cannot read property '__expo_module_name__' of undefined, js engine: hermes

This happens at:
node_modules/@pubnub/react-native-chat-components/dist/commonjs/index.js

        if (nativeModule.__expo_module_name__ && reactNative.NativeModules.EXReactNativeEventEmitter) {

Here's a repo I have which is crashing with this error:

https://github.com/lakardion/test-gesture-handler

I tried this out on SDK 47 but it works properly. Seems like this is specific to expo 48 ?

Thanks!

When using the MessageList component in my React app (using remix) it throws the error ReferenceError: ResizeObserver is not defined

Any idea how to solve this?

Hi

I have used MessageList component and for some reason, when I receive or send new messages it doesnt auto scroll to keep the latest message in the bottom (just above the MessageInput) component in view. I am sure I am missing something, just curious if you have any ideas on how I can fix this.

Thank you
Shyam

I build one version of my app before installing @pubnub/react-native-chat-components and it worked :

eas build -p android --local ✔️
npx expo install @pubnub/react-native-chat-components
eas build -p android --local ❌ :

FAILURE: Build completed with 2 failures.
[RUN_GRADLEW] 1: Task failed with an exception.
[RUN_GRADLEW] -----------
[RUN_GRADLEW] * Where:
[RUN_GRADLEW] Build file '/tmp/.../eas-build-local-nodejs/..../build/node_modules/expo-document-picker/android/build.gradle' line: 40
[RUN_GRADLEW] * What went wrong:
[RUN_GRADLEW] A problem occurred evaluating project ':expo-document-picker'.
[RUN_GRADLEW] > Could not set unknown property 'classifier' for task ':expo-document-picker:androidSourcesJar' of type org.gradle.api.tasks.bundling.Jar.
[RUN_GRADLEW] * Try:
[RUN_GRADLEW] > Run with --stacktrace option to get the stack trace.
[RUN_GRADLEW] > Run with --info or --debug option to get more log output.
[RUN_GRADLEW] > Run with --scan to get full insights.
[RUN_GRADLEW] ==============================================================================
[RUN_GRADLEW] 2: Task failed with an exception.
[RUN_GRADLEW] -----------
[RUN_GRADLEW] * What went wrong:
[RUN_GRADLEW] A problem occurred configuring project ':expo'.
[RUN_GRADLEW] > compileSdkVersion is not specified. Please add it to build.gradle
[RUN_GRADLEW] * Try:
[RUN_GRADLEW] > Run with --stacktrace option to get the stack trace.
[RUN_GRADLEW] > Run with --info or --debug option to get more log output.
[RUN_GRADLEW] > Run with --scan to get full insights.
[RUN_GRADLEW] ==============================================================================
[RUN_GRADLEW] * Get more help at https://help.gradle.org
[RUN_GRADLEW] BUILD FAILED in 7s
[RUN_GRADLEW] 5 actionable tasks: 5 executed
[RUN_GRADLEW] Error: Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information.

Build failed
Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information.
npx exited with non-zero code: 1

Same failure with IOS build.

My depedencies :

  "dependencies": {
    "@hookform/resolvers": "^3.3.1",
    "@pubnub/react-native-chat-components": "^0.32.0",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/material-top-tabs": "^6.6.3",
    "@tanstack/react-query": "^4.35.3",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
    "@typescript-eslint/parser": "^6.7.2",
    "axios": "^1.5.0",
    "eslint": "^8.49.0",
    "expo": "~49.0.11",
    "expo-checkbox": "~2.4.0",
    "expo-constants": "~14.4.2",
    "expo-image": "~1.3.4",
    "expo-image-picker": "~14.3.2",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-localization": "~14.3.0",
    "expo-radio-button": "^1.0.8",
    "expo-router": "^2.0.0",
    "expo-secure-store": "~12.3.1",
    "expo-status-bar": "~1.6.0",
    "i18next": "^23.5.1",
    "prettier": "^3.0.3",
    "pubnub": "^7.4.0",
    "pubnub-react": "^3.0.2",
    "react": "18.2.0",
    "react-hook-form": "^7.46.2",
    "react-i18next": "^13.2.2",
    "react-native": "0.72.5",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-pager-view": "6.2.0",
    "react-native-read-more-text": "^1.1.2",
    "react-native-reanimated": "~3.3.0",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-woodpicker": "^0.3.17",
    "zod": "^3.22.2"
  },

Overview

The MessageList component isn't rendering user meta information (see screenshot). I'm not sure it's even fetching it.

What it looks like on my system:

per docs here, it's supposed to look like this:

I'm calling set_uuid_metadata on the server for this UUID.

I have logVerbosity: true in the PubNub client object, and I'm not seeing fetches of the member list. The SDK is making API calls to /presence (2x), /history-with-actions (2x), and /subscribe (5x).

Code readthrough

From browsing code, it looks like the default message renderer calls getUser:

which searches the users collection

which is set from UsersMetaAtom, which doesn't have an async getter

Possible explanation -- typescript

I'm not using typescript in my project. Does react-chat-components require typescript?

I'm not familiar with jotai, so I may be misreading, or missing some behavior provided by typescript inheritance. The UUIDMetadataObject which react-chat-components uses here:

Isn't defined anywhere in the pubnub/javascript repo (at current 5.0 or at the v4.29 referenced by react-chat-components), but it is defined in the DefinitelyTyped for pubnub, here:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/pubnub/index.d.ts#L1414

Possible confounding factor -- access manager

I'm using the access manager, and I think the current authKey has access to the Channel but not all user UUIDs globally

Possible confounding factor -- only using MessageList

I'm not using the other chat components (MemberList, ChannelList). If MemberList is responsible for fetching the UUID metadata, that could explain why my MessageList doesn't have it.

Thanks

Sorry for long writeup, thanks for providing this library

The callback passed to Chat component onMessage is not updated. It appears that the first instance of the onMessage callback is always called by the Chat component, future instances of the callback are ignored.

Replication code

export const ChatContent = () => {
    const [number, setNumber] = useState(0);
    const onMessage = useCallback(() => {
        console.log(`onMessage number: ${number}`);
    },[number]);

    return (
        <Chat currentChannel="my-channel" onMessage={onMessage}>
            <MessageList />
            <MessageInput />
            <div>Number: {number}</div>
            <button onClick={() => setNumber(number+1)}>Increment</button>
        </Chat>
    );
};

Replication steps

1. Type "test" into the message input, press send
2. See "onMessage number: 0" in the console
3. Press "increment"
4. Type "test2" into the message input, press send
5. See "onMessage number: 0" in the console (BUG)

➜  getting-started git:(master) ✗ pwd
/home/joe/satori/react-chat-components/samples/react/getting-started
➜  getting-started git:(master) ✗ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native-svg
npm ERR!   react-native-svg@"13.4.0" from [email protected]
npm ERR!   samples/react-native/mobile-chat
npm ERR!     [email protected]
npm ERR!     node_modules/mobile-chat
npm ERR!       workspace samples/react-native/mobile-chat from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-svg@"^12.1.1" from [email protected]
npm ERR! node_modules/rn-emoji-keyboard
npm ERR!   rn-emoji-keyboard@"^1.1.0" from [email protected]
npm ERR!   samples/react-native/mobile-chat
npm ERR!     [email protected]
npm ERR!     node_modules/mobile-chat
npm ERR!       workspace samples/react-native/mobile-chat from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/joe/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/joe/.npm/_logs/2023-02-02T15_54_55_518Z-debug-0.log

Tried using Node 16 and Node 18

Hi,

Within your package.json you state this is MIT license. Would you be able to also provide a LICENSE file within this repo to the same effect?

Cheers :),
Simon

Hi,

I need to change the language of the components, but some labels and tooltips are not cusomizable, e.g. "Add a file" tooltip in the message input component.

It would be very useful to be able to override the component texts.

Dear team, we love your work, please help support porting this sample into react-native project,
Cheers,

I have a react native cli project, when i add @pubnub/react-native-chat-components package then use it, i got this error:TypeError: undefined is not an object (evaluating 'nativeModule.expo_module_name')
I guess that is caused by this package just support to expo project, so can you help me explain this.
Thank you so much

Project team and I were working on an mobile app that includes a feature for user activity in real-time, so we decided to see if we could add data from sensors to the mix.

However, while Expo Go functions without problems, iOS development builds through EAS have repeatedly crashed after connecting to dev server with the above error line, followed with the main not registered error. Removing the feature and expo-sensors from the relevant files (app.json, App.js, SensorData.js, package.json) and rebuilding prevents the crashes entirely. This issue has been reliably reproduced with the following packages, plus or minus [email protected]:

Packages when issue is not encountered:

+-- @babel/[email protected]
+-- @react-native-async-storage/[email protected]
+-- @react-native-community/[email protected]
+-- @react-navigation/[email protected]
+-- @react-navigation/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

While we encountered an earlier crash in Expo Go with [email protected] using npm install (this prevented native builds from completing), npx expo install installed @12.3.0 which functions with Expo Go. This is the version that is crashing iOS native development builds. However, the build process is not returning any errors, and expo-doctor has not found the issue.

Upon using MessageList, I seeing all messages have a default timestamp but there is no date information by default. I am looking towards a solution where in all the messages that are in the past have some kind of demarcation by date. Like how Whatsapp does. Just curious if its supported.

Thank you
Shyam

Hello!
We did an implementation of react-chat-components for react-native (bare react native project). We approached the auth of this by following https://www.pubnub.com/docs/general/security/access-control

In this it says we should setToken after creating the client, so we did as such. Everything seems to work fine except that when we go into a chat, the listener for new messages seems like it is not updating the MessagesList component:

Here's an extract of what we're doing:

Higher up in the tree we have our provider with our pubnub client instantiated. And we added an app listener that refreshes the token every a certain amount of time. It looks sort of like this

const refreshPubnubToken = async () => {
  const {
    client,
    isRefreshingToken,
    actions: { changeIsRefreshingToken },
  } = usePubnubStore.getState()
  if (isRefreshingToken) return

  changeIsRefreshingToken(true)
  const token = await getPubnubToken()
  changeIsRefreshingToken(false)

  if (!token) return

  console.log('token fetched', token, Boolean(client?.setToken))
  client?.setToken(token)
  usePubnubStore.getState().actions.changeTokenLastRefreshedTime(Date.now())
}

We confirmed that the token is set since we do actually get access to the chat. And it fetches the messages whenever we get into the chat screen. Which is pretty simple:

And then our chat looks like this:

export const ChatScreen = () => {
  const { channelId, users } = useRoute<RouteProp<ParamList, 'Chat'>>().params
  const chat = (
    <View className="flex-1 flex-grow">
      <Chat
        currentChannel={channelId}
        users={users}
        onError={(e) => {
          Config.logger.error(JSON.stringify(e))
        }}
      >
        <MessageList
          fetchMessages={10}
          style={{
            messageListScroller: { backgroundColor: 'white' },
          }}
        />
        <MessageInput />
      </Chat>
      <BackButton />
    </View>
  )
  return (
    <MultiPlatformSafeAreaView safeAreaClassName="flex-1 flex-grow">
      <KeyboardAvoidingViewWind className="flex-1" behavior={behavior}>
        {chat}
      </KeyboardAvoidingViewWind>
    </MultiPlatformSafeAreaView>
  )
}

So from what I could gather it seems like the problem is wherever the messages listener is being set.
Maybe something to do with setToken and react not properly handling this change in the client reference?

Let me know whichever more information you might need for this I'm all in helping out getting this fixed

Versions:

    "@pubnub/react-native-chat-components": "^0.30.0",
    "pubnub": "^7.2.2",
    "pubnub-react": "^3.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.4",

Thanks!

using like this purpose is reactjs to react native app chat.

import {
  MessageInput
} from "@pubnub/react-chat-components"

const onSend = message => {
    const newMessage = [
      {
        createdAt: +new Date(),
        _id: `${generateUUID()}`,
        text: message?.text,
        type: "default",
        user: user
      }
    ]
    sendMessage(pubnub, selectMember?.id, newMessage[0])
  }

<MessageInput onSend={onSend} />

like this in the picture:

Hey. I am trying to use a forked repo in order to enhance this package but installing by running eg yarn add itdsntwork/react-chat-components does not have the same output in node_modules as by adding the main package. Do you have a custom procedure for builds? Can you add info on how to use forked repos from this repo?

Title

Unable to delete device on Android using React Native

Description

I am trying to delete a device from PubNub's channels during logout, which should prevent sending notifications for the device. However, even after executing the deletion code, the device continues to receive notifications.

Code Snippet

const response: any = await pubnub.push.deleteDevice({
    device: deviceToken,
    pushGateway: "gcm"
});

Expected Behavior

The deleteDevice method should remove the specified device from PubNub's channels, preventing it from receiving any further notifications.

Current Behavior

Even after executing the deletion code, the specified device is still able to receive notifications.

Additional Information

• I have confirmed that the deviceToken being used is correct.
• The pushGateway parameter is set to "gcm".
• I have tested this on multiple Android devices with the same result.

Any help in resolving this issue would be greatly appreciated. Thank you!

Currently I'm trying to create a custom bubbleRenderer for MessageList . This are the properties I'm getting, when I try to access message it uses MessageEnvelope as its Type and the message type is always handled as FileMessage and not StandardMessage, even when it is a StandardMessage. What can I do for it to handle it as Standard Message or is there a bug?

Properties:

Message as FileMessage when it really is StandardMessage