getstream/stream-chat-react-native

💬 React-Native Chat SDK ➜ Stream Chat. Includes a tutorial on building your own chat app experience using React-Native, React-Navigation and Stream

Official React Native SDK for Stream Chat

The official React Native and Expo components for Stream Chat, a service for building chat applications.

Quick Links

• Stream Chat API product overview
• Register to get an API key for Stream Chat
• React Native Chat Tutorial
• Chat UI Kit
• Documentation
• Release Notes

Contents

• Official React Native SDK for Stream Chat
  • Contents
  • 📖 React Native Chat Tutorial
  • Free for Makers
  • 🔮 Example Apps
  • 💬 Keep in mind
  • 👏 Contributing
  • Git flow & Release process
  • We are hiring

📖 React Native Chat Tutorial

The best place to start is the React Native Chat Tutorial. It teaches you how to use this SDK and also shows how to make frequently required changes.

Free for Makers

Stream is free for most side and hobby projects. To qualify your project/company needs to have < 5 team members and < $10k in monthly revenue. For complete pricing details visit our Chat Pricing Page

🔮 Example Apps

This repo includes 3 example apps. One made with Expo, two in TypeScript. One TypeScript app is a simple implementation for reference, the other is a more full featured app example.

• Expo example
• Typescript example
• Fully featured messaging application

Besides, our team maintains a dedicated repository for fully-fledged sample applications and demos at GetStream/react-native-samples. Please consider checking following sample applications:

• Slack Clone
• iMessage Clone
• WhatsApp Clone

💬 Keep in mind

1. Navigation between different components is something we expect consumers to implement. You can check out the example given in this repository

2. Minor releases may come with some breaking changes, so always check the release notes before upgrading the minor version.

You can see detailed documentation about the components at https://getstream.io/chat/docs/sdk/reactnative/

👏 Contributing

We welcome code changes that improve this library or fix a problem, and please make sure to follow all best practices and test all the changes. Please check our dev setup docs to get you started. We are pleased to merge your code into the official repository. Make sure to sign our Contributor License Agreement (CLA) first. See our license file for more details.

Git flow & Release process

We enforce conventional commits and have an automated releasing process using workspaces and semantic-release. Read our git flow & release process guide for more information

We are hiring

We've recently closed a $38 million Series B funding round and we keep actively growing. Our APIs are used by more than a billion end-users, and you'll have a chance to make a huge impact on the product within a team of the strongest engineers all over the world.

Check out our current openings and apply via Stream's website.

stream-chat-react-native's Issues

Bug · ChannelList not always up to date

Describe the bug
Hello,
We've released our Chat app to a bunch of users and they have all reported that sometimes new messages / Channels are not appearing in the app (in this case, ChannelList)

I believe there seems to be some issue where ChannelList isn't rerendering with the latest data. So while the app is minimised, new messages come through, but channelList ignores them and doesn't rerender.

My solution at the moment has been to implement a onRefresh for the ChannelList

additionalFlatListProps={{
                refreshing,
                onRefresh: () => {
                  setRefreshing(true);
                  ChatHelper.refreshChat(chatClient, chatUser).then(() =>
                    setRefreshing(false),
                  );
                },
              }}

This unmounts our entire chat component while we run client.disconnect() and client.setUser()

 {refreshing && <LoadingState />}
 {!refreshing && (
    <Chat client={chatClient} style={theme}>
    ...

This seems to fix it, as it forces a rerender and requery of ChannelList.

However this issue should not be happening in the first place, any ideas on how to properly fix this?

Dev environment info (please complete/provide the following information):

• Package version: ^0.6.0
• react-native or expo version: 0.61.5
• Device/Emulator (android/ios) and OS version: Android & IOS, all versions

To Reproduce
Steps to reproduce the behavior:

1. Open chat on one device (i used a physical iphone 7)
2. minimise your app, and screen lock your device
3. Use another device to talk to the first device ( i used an android simulator), and create new channels
4. Open the app on the first device (iphone 7)
5. Notice that there are no new messages / channels. You have to fully close the app and reopen it to see the new messages / channels

Expected behavior
ChannelList should show latest information

Additional context

Screenshots

Other member name and avatar is not displayed when using ChannelList with ChannelPreviewMessenger

Repro steps:

1. Create new react native project via react-native init
2. Add stream-chat-react-native per directions on this github repo
3. Set current user via:

    const user = {
      id: userId,
      name: userName,
      image: userAvatarUrl
    }
    chatClient.setUser(user, userToken)

userId is a guid permanently associated with the current user that users will never see. userName and userAvatar are what we expect to see in the channel list channel preview

4. Create a channel via:

chatClient.channel('messaging', {
          members: [user.id, recipientId]
        })

where user.id is the userId of the current user and recipientId is the userId of the other user in a 1:1 chat.

5. Display channel list via

  <ChannelList
              filters={{ type: 'messaging', members: { $in: [userId] } }}
              sort={{ last_message_at: -1 }}
              Preview={ChannelPreviewMessenger}
              onSelect={channel => { Actions.streamChannel({ channel }) }}
            /> 

where userId is the userId of the current user.

Result:

• Channel previews display with:
  • No channel name (expected the name of the other participant in the channel)
  • A solid blue avatar (expected the avatar of the other participant in the channel)

Expected something like:

Note:

• Mentions by name work properly within a channel
• Other participant is typing indicator works properly by name within a channel
• Avatars work properly within a channel

Compatibility with expo 33

Hi there, I'm getting this warning when using your library:

1. Add correct versions of these packages to your project using:

   expo install expo-image-picker expo-permissions

   If "install" is not recognized as an expo command, update your expo-cli installation.

2. Change your imports so they use specific packages instead of the "expo" package:

 - import { ImagePicker } from 'expo' -> import * as ImagePicker from 'expo-image-picker'
 - import { Permissions } from 'expo' -> import * as Permissions from 'expo-permissions'

And

The following APIs have moved to separate packages and importing them from the "expo" package is deprecated: DocumentPicker.

1. Add correct versions of these packages to your project using:

   expo install expo-document-picker

   If "install" is not recognized as an expo command, update your expo-cli installation.

2. Change your imports so they use specific packages instead of the "expo" package:

 - import { DocumentPicker } from 'expo' -> import * as DocumentPicker from 'expo-document-picker'```

Connection on background / locked screen

I've a question i didn't test it, maybe any of the developers did and can answer it, in case i launch my app in android or ios and leave it in background, and i lock the screen, and i leave the app hanging around in the bg, my question is the socket connection keeps alive or gets closed? from what i've seen if its get closed it tries to connect again, another question related to this, once the connection gets recovered it retrieves all the missed messages in the meanwhile? that would help me to take the correct actions once the app is back to foreground.

Maybe its more related to stream-chat-js library because i'm using outside the steam-chat-react- reactive, by my side lets say.

Thanks in advance

App Crashed when uploading photo / taking photo on android

Describe the bug
Reactive Native: 0.61.5

App is crashing on android (both emulator (pixel 3) and physical (samsung s10)) when i attempt to attach a photo or take a photo in a conversation
I've made a few changes to the styles of some of your stock components but otherwise no changes, so i believe this is to do with code in this package.

Gif example:

I've also noticed that attaching stuff like pdf's does not work at all on either android and iphone. Is that a known bug? is there a solution?

I've also noticed that sometimes photos of a presumably large size don't send properly.

Dev environment info (please complete/provide the following information):

0.6.0
Reactive Native: 0.61.5
Pixel 3xl latest android

To Reproduce
Steps to reproduce the behavior:

Go to a channel
Click on attach image/file
attempt to attach image/file
notice that the app crashes

Expected behavior
It shouldnt crash

Additional context
We recently upgraded from RN 0.59 to RN 0.61.5. This error may be due to something related to that upgrade

Can't open thread - TypeError: undefined is not an object (evaluating 'this.props.eventHistory.none.forEach')

Describe the bug
When I try to press replies button under message component, it gives me error.

Dev environment info (please complete/provide the following information):

• stream-chat-react-native (0.4.0)
• react-native (0.60.0)
• iPhone 11

To Reproduce
Steps to reproduce the behavior:

1. Go to Channel screen
2. Click on 2 replies button under message
3. See error

Expected behavior
It should open the thread or replies screen

Screenshots

Could not receive push notification

Hi team,

I can receive push notification using stream CLI stream chat:push:test --user_id 'user_123'. But I could not receive any notification when a new message is sent to a channel that I'm a member. Can you suggest if there is any further step that I need to setup?

Regards.

Push notification preferences

How the setup specific push notification preferences (like mute specific channel, or send push only when @mentioned)

Minor Bug: SendButton component receives an improper prop 'title'

Describe the bug
The SendButtonProps are documented (in TypeScript) as receiving a title, editing, sendMessage()

The the value in the title, appears to be related to a camera image picker however as seen in this screenshot:

Dev environment info (please complete/provide the following information):

• Package versions:

"stream-chat": "1.3.x",
"stream-chat-react-native": "0.6.5",

• react-native version
• Detected on iOS Simulator Version 10.3 (SimulatorApp-880.5 CoreSimulator-681.17.2)

To Reproduce

Render the title parameter passed to the SendButton component that you pass into the MessageInput component

Expected behavior

Expected behavior -- remove the title prop or document what it's for / how its supposed to be used.

I would naively assume that the title should just be "Send" or "Send Message" (but localization is a concern).

Screenshots

Cropped Screenshot Provided Above, Full Screenshot here:

MessageInput shows AttachButton even when both hasFilePicker and hasImagePicker are set to false

Describe the bug
MessageInput shows AttachButton even when both hasFilePicker and hasImagePicker are set to false. Clicking on this button does not do anything (which is fine). However, the MessageInput should not show AttachButton .

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo): stream-chat-expo
• react-native or expo version - expo
• Device/Emulator (android/ios) and OS version - all

To Reproduce
Steps to reproduce the behavior: follow getting started with react native guide and update the MessageInput

<MessageInput hasFilePicker={false} hasImagePicker={false} />

Expected behavior
the MessageInput should not show AttachButton if both hasFilePicker and hasImagePicker are set to false

npm i stream-chat-react-native can't import chat ui components

Cannot receive push notification

First, stream chat document(ios push) need to update!!
https://getstream.io/chat/docs/#rn_push_ios

Because push notification ios library is updated.
Android is also different code in Manifest.
So Document need to be updated or tell me version

I do all document. But I cannot receive push.

app id = 56395
user_id = chatdemo01

please help me..

Use PropTypes.elementType instead of PropTypes.func

The current props that expect a React element (rendered or not) require it to be either node or func:

PropTypes.oneOfType([PropTypes.node, PropTypes.func])

But a React component wrapped in React.memo (or redux connected) is actually an object. I wonder if you could change their propType to expect elementType instead of func:

PropTypes.oneOfType([PropTypes.node, PropTypes.elementType])

That would fix a lot of warnings in my project.

Latest message only show first 20 chars

Describe the bug
Latest message only show first 20 chars. I want to show more than 20 chars.

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo): stream-chat-expo
• react-native or expo version: expo
• Device/Emulator (android/ios) and OS version: all

To Reproduce
Steps to reproduce the behavior:

Follow react native tutorials https://getstream.io/chat/react-native-chat/tutorial/#custom-preview. I think the problem is at https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview.js#L75

Expected behavior
Return full text of the latest message. You can use Text element and truncate to 1 line.

Does stream support iOS 13 push notifications?

Push notifications were working on friday. Today morning we updated testing phone to iOS 13+ and push notifications stops working:
seems to be related to https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/sending_notification_requests_to_apns?language=objc

In the dashboard I see that push notification claims to be delivered, but I don't see them on the phone

copied from:
GetStream/stream-chat-js#191 (comment)

Latest message time

When implementing custom ChannelPreview component, need to display the time since last message

we have two fields:

1. latestMessage.createdAt
   pre-formatted, so that it's quite tricky to convert to a normal date format (to supply it to moment lib and make something like "1min ago"
2. channel.data.last_message_at
   But this value is not getting updated when a new message arrived.

Am I doing something wrong, or how can I achieve customization of date format?

Open ReactionPicker on Message LongPress, without opening the context menu first

We are looking to rewrite the existing functionality of the openReactionSelector in the MessageContent component. Instead of the long press to open the menu and then having to click on “Add Reaction”, we would like to have the longPress immediately open the reaction picker.

In order to achieve this - we have tried creating a custom component for MessageSimple and MessageContent where our custom MessageSimple component would render the custom MessageContent component. However, it seems to be an endless cycle of having to create custom components (ex: ReactionPicker and MessageReplies) which can not be imported. Is there a way to adjust the openReactionSelector function without having to create custom components?

React-native-web dependencies

Yo GetStream!
Kudos to your Sass.

I am trying to make a react-native-web app with stream-chat-react-native. I know there is a separate react-web repo for the chat but I am trying to use only the react-native implementation for my needs.

My problem is one dependencies which I'm trying to use for the rest of the app which is
styled-components that tells this:

"It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes your application bigger without a good reason." (this happens only on the web)

"Invariant Violation: NetInfo has been removed from React Native. It can now be installed and imported from 'react-native-netinfo' instead of 'react-native'. See https://github.com/react-native-community/react-native-netinfo" (this happens in react-native, only after upgrading expo sdk to 36, on 35 it worked fine)

How can I keep using styled-components and fix the react-native-netinfo dependency for stream-chat-react-native.

"react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"stream-chat-expo": "^0.3.12",
"styled-components": "4.2.1"

MessageInput with imagepicker and filepicker doesn't open actionsheet to choose properly

When hasImagePicker and hasFilePicker are both set to true for the MessageInput component, attempting to do either action often fails to properly open their respective action sheets (opens and then closes immediately). Seems to be some sort of race condition between the intermediate menu closing the the action sheets opening.

MessageInput not working correctly with SafeAreaView on Android

Working fine on iOS but on Android the message box gets covered by the keyboard.

Code is straight out of the example on https://getstream.io/chat/react-native-chat/tutorial/

<SafeAreaView>
  <Chat client={chatClient}>
    <Channel channel={channel}>
      <View
        style={{ display: "flex", height: "100%", background: "#FFF" }}
      >
        <MessageList />
        <MessageInput />
      </View>
    </Channel>
  </Chat>
</SafeAreaView>

System message displays current time, not sent time

Describe the bug
When we send a system message is displays the time sent as the current time, not the time the message was sent.

• Package version: 0.6.0
• react-native
  -iOS and android

To Reproduce
Steps to reproduce the behavior:

1. send a system message
2. observe that time always displays current time

Expected behavior
Time displays time sent

Support date in MM/DD/YY format

Describe the bug
Channel Preview currently shows date in DD/MM/YY format. unfortunately, this date format does not work for US based users.

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo): stream-chat-expo
• react-native or expo version: expo
• Device/Emulator (android/ios) and OS version: all

To Reproduce
Steps to reproduce the behavior:
Follow react-native tutorials at https://getstream.io/chat/react-native-chat/tutorial/#custom-preview . I think the problem is at https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview.js#L89

Expected behavior
Allow clients to specify the date format.

Longpress on attachment (image) in chat locks app in unusable state

If you press on an image attachment and have it open the viewer, if you then long press on the image (which most users believe will let you copy the image to the clipboard), the app gets stuck in an unusable state.

RNCNetInfo.getCurrentConnectivity is not a function

How to reproduce

  const ThreadScreen = (props: IProps) => {
  const [thread, setThread] = useState(null)
  const [channel, setChannel] = useState(null)

  useEffect(() => {
    getChannel('tempID').then(c => {
      setChannel(c)
      getThread('3d3ba947-f589-4e70-9bcf-06510e6e5498').then(t => {
        setThread(t)
      })
    })
  })

  return (
    <SafeAreaView>
      <Chat client={StreamIOClient}>
        <Channel client={StreamIOClient} channel={channel} thread={thread} dummyProp="DUMMY PROP">
          <View
            style={{
              display: 'flex',
              height: '100%',
              justifyContent: 'flex-start',
            }}
          >
            <Thread thread={thread} />
          </View>
        </Channel>
      </Chat>
    </SafeAreaView>
  )
}

Environment
RN: 0.60.4
@react-native-community/netinfo: 4.1.4
Screenshot

Chat not working with Expo SDK 36.0.0 due to missing NetInfo dependencies

Invariant Violation: NetInfo has been removed from React Native. It can now be installed and imported from 'react-native-netinfo' instead of 'react-native'. See https://github.com/react-native-community/react-native-netinfo This error is located at:     in Chat (created by Context.Consumer)     in ThemeProvider (created by Context.Consumer)     in ThemedChat (at ChannelScreen.js:31)     in RCTSafeAreaView (at SafeAreaView.js:55)     in SafeAreaView (at ChannelScreen.js:30)  
I am following the tutorial at https://getstream.io/chat/react-native-chat/tutorial/
This happens with latest expo sdk 36.

I think the problem is here - https://github.com/GetStream/stream-chat-react-native/blob/master/expo-package/src/index.js

{
import { NetInfo } from 'react-native';
}

Potential issue with KeyboardCompatibleView

Describe the bug
In my app I was having an issue where, when I focused on MessageInput and the keyboard came up, the Channel didn't animate to a smaller height to accommodate the keyboard.

Not sure exactly why this doesn't happen in all apps. For example, I couldn't reproduce it in the example expo app. I've created a fix that works for me, see "Additional context below".

Dev environment info (please complete/provide the following information):

• Package version: stream-chat-expo 0.6.5
• expo version 35
• iOS 13.3.1

Additional context
I was able to fix the problem by editing inside node_modules and adding initialHeight in KeyboardCompatibleView to the component state and using setState. My theory is that it wasn't rerendering after onLayout where initialHeight was set and therefore not applying channelHeight to the Animated.View.

Different background and text colour for your own messages

I'd like to customize the MessageList component to look something like this:

The current user's message should have a dark background and white text.

I tried to use the theme functionality but didn't find a solution.

It'd be great if most of the colors where named in theme.colors like:

theme.message.text.ownBackgroundColor
theme.message.text.ownTextColor
theme.message.text.otherBackgroundColor
theme.message.text.otherTextColor

StreamChat.createToken(id) throws `TypeError: Cannot read property 'sign' of null`

Repro steps:

1. Create new react native project via react-native init
2. Add stream-chat-react-native per directions on this github repo
3. Create new StreamChat client via const chatClient = new StreamChat(key, secret)
4. Call chatClient.createToken(userId)

Result:

• Throws TypeError: Cannot read property 'sign' of null on line 2848 of stream-chat/dist/browser.js
• Debugger shows jwt is null in jwt.sign(payload, apiSecret, opts)
• It appears var jwt = null is declared on line 2831 but is never initialized to anything

Expected:

• Token is generated without an exception

Note:

• The same exception is thrown when calling chatClient.devToken(userId) and subsequently calling chatClient.setUser({id, name, image})

react-native info
info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 13.37 GB / 32.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.9.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3
        System Images: android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom_64
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8.3 => 16.8.6 
      react-native: ^0.59.10 => 0.59.10 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-rename: 2.3.2

Warning: Failed prop type: Invalid prop `editing` of type `boolean` supplied to `MessageInput`, expected `object`.

editing of type boolean throws an error in both MessageList and MessageInput.

import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';
import { StreamChat } from 'stream-chat';
import { Chat, Channel, MessageList, MessageInput } from 'stream-chat-expo';

const Chatroom = props => {
  const { navigation } = props;
  const channel = navigation.getParam('channel');
  const chatClient = navigation.getParam('chatClient');
  channel.watch();

  return (
    <SafeAreaView style={{ padding: 10 }}>
      <Chat client={chatClient}>
        <Channel channel={channel}>
          <View style={{ display: 'flex', height: '100%' }}>
            <MessageList />
            <MessageInput />
          </View>
        </Channel>
      </Chat>
    </SafeAreaView>
  );
};

Chatroom.defaultProps = {
  channel: 'messaging',
};

export default Chatroom;

Channel List update events apparently stop upon customising the Preview component

Describe the bug
Upon adding a custom Preview component to the ChatList component the channel deleted, channel added callbacks don't appear to work.

Dev environment info (please complete/provide the following information):

 "react-native": "^0.61.5",
 "stream-chat": "^1.3.1",
 "stream-chat-react-native": "^0.6.5",

• Non device specific.

To Reproduce
Steps to reproduce the behavior:

1. Customise the ChatList preview component with your own chat preview component
2. Cause a channel change by deleting/hiding a channel from another device

Expected behavior

• Customised ChatList updates as it would without the Preview component

Additional context

• Having added a custom Preview component the added/deleted callbacks appear to stop?

I must be doing something wrong.

Help wanted: is "channel.watch" needed with react native component?

react native tutorials at https://getstream.io/chat/react-native-chat/tutorial/#stream-app is using "channel.watch()"

class ChannelScreen extends React.Component {
  render() {
    const channel = chatClient.channel("messaging", "raspy-paper-5");
    channel.watch();

    return (
      <SafeAreaView>
        <Chat client={chatClient}>
          <Channel channel={channel}>
            <View style={{ display: "flex", height: "100%" }}>
              <MessageList />
              <MessageInput />
            </View>
          </Channel>
        </Chat>
      </SafeAreaView>
    );
  }
}

However, the examples provided in your github repo ( https://github.com/GetStream/stream-chat-react-native/blob/master/examples/ExpoMessaging/App.js#L81 ) does not mention "channel.watch"

I am not sure if we need to use "channel.watch" with react native component. If "channel.watch" is required, how to remove the listener when component unmounts?

When Cancelling add attachment app crashes

Describe the bug
Application throws an unhandled error due to a rejected promise.
When a user clicks to add an attachment, then clicks 'Upload a file', then 'Cancel' I receive "mimeType.startsWith is not a function".
The error is surfaced from stream-chat-react-native-core.

Dev environment info (please complete/provide the following information):

• stream-chat-react-native-core: v0.5.1
• react-native
• Simulator: iPhone 8 and iPhone 11

To Reproduce
Steps to reproduce the behavior:

1. Open a chat
2. Select to add an attachment
3. Select "Upload a file"
4. Click "Cancel" in top right corner

Expected behavior
A user should be returned to the chat and handle the error correctly

Screenshots

Feature Request: (optionally) show unread count for each channel in ChannelList

I want to show the unread count for each channel. I am able to do that by customizing ChannelPreviewMessenger the as suggested in https://getstream.io/chat/react-native-chat/tutorial/.

However, it would be nice to have an option in ChannelList component to show the unread count.

<Chat client={chatClient} style={theme}>
                <ChannelList  filters={filters}  sort={sort}  options={options}
                 showUnreadCount={true}/>
</Chat>

Bug Reports

Hello @jaapbakker88 i want to report some issues those are not working good in iPhone X OS 12.3 (I didn't try it on android or other iPhone versions)

I'm running example two

First one related to the initialization of the app, it shows the next error:

I fixed it upgrading to react native 0.59.10 and the error is gone

Second one, it happens randomly when i want to attach a photo

I get the next error in the Xcode debugger

[LayoutConstraints] Unable to simultaneously satisfy constraints.
	Probably at least one of the constraints in the following list is one you don't want. 
	Try this: 
		(1) look at each constraint and try to figure out which you don't expect; 
		(2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x281cee850 UIView:0x113f45a50.width == - 16   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x281cee850 UIView:0x113f45a50.width == - 16   (active)>

The screen remains in grey and no interaction with the rest of the components.

I could got it working once but the spinner in the image kept working and seems the image was never getting uploaded (maybe backend issue)

This is my react-native info:

React Native Environment Info:
   Binaries:
     Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
     Yarn: 1.16.0 - ~/.nvm/versions/node/v10.16.0/bin/yarn
     npm: 6.10.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
     Watchman: 4.9.0 - /usr/local/bin/watchman
   SDKs:
     iOS SDK:
       Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
     Android SDK:
       API Levels: 21, 22, 23, 24, 25, 26, 27, 28
       Build Tools: 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.2, 28.0.3
       System Images: android-25 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
   IDEs:
     Android Studio: 3.4 AI-183.6156.11.34.5522156
     Xcode: 11.0/11M336w - /usr/bin/xcodebuild
   npmPackages:
     react: 16.8.3 => 16.8.3 
     react-native: 0.59.5 => 0.59.5 
   npmGlobalPackages:
     react-native-cli: 2.0.1
     react-native-git-upgrade: 0.2.7
     react-native: 0.59.10

Thanks

How can I fork this repo ?

Hi, I am trying to setup Stream in a react native app, but for customization issues I need to fork it and change some components. From what I understand this repo actually contains 3 npm packages, and the changes I need are in the stream-chat-react-native-core package. But then when I add the url to the fork in my package.json, I am stuck because yarn fetches stream-chat-react-native-core instead of stream-chat-react-native.
I know this might be a basic question, but I am not used to the way npm packages work. Is there a way to make it work just by forking or do I need to publish it on npm to make it work ?

Thanks !

Avatar initials are not displayed in ChannelList

Describe the bug
A clear and concise description of what the bug is.
Avatar initials are not displayed in ChannelList. Channel Screens shows the avatar initials correctly.

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo): latest stream-chat-expo
• react-native or expo version: expo
• Device/Emulator (android/ios) and OS version: all

To Reproduce
Steps to reproduce the behavior:
Follow getting started with react native tutorial at https://getstream.io/chat/react-native-chat/tutorial/
I think the problem is at https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreviewMessenger.js#L84. This method does not pass name to Avatar

Expected behavior
Avatar initials are shown by ChannelPreviewMessenger in ChannelList.

Help needed: How to put "SendButton" outside of MessageInput?

I want to put SendButton outside of MessageInput.

This is similar to how other chat platforms such as WhatsApp/Telegram do. I also think it is a better user experience since having a large button outside with extra padding helps with sending messages quickly.

I tried this but I am not sure how to use existing "sendMessage" method from MessageInput

 <MessageInput hasFilePicker={false}/>
<SendButton editing={false} sendMessage={() => {}} />

I will really appreciate it if you can suggest how to how to put "SendButton" outside of MessageInput. If it is not possible, please suggest to me how to add extra padding around SendButton and make it large.

Message Input bug

When I open channel.
In no message, Message input box is dissappear!

react-native:0.59.10
stream-chat-react-native": "0.1.17" || 0.1.18

How to fix this error

when i send link message

ChannelList doesn't perform queryChannels when filters or sort change

The channelList component doesn't update correctly when the filter or sort props change.
When props change you should perform queryChannels to update results automatically. Currently it ignores the prop change.

As a temporary workaround users can change the key value of the component to force a componentDidMount event. As an example:

You would expect this to work. So if you change the array of ids you expect the results to update.

<ChannelList filters={{id: {$in:[**ARRAY_OF_IDS**]},}}/>

Currently, you need to do something along these lines to work around this

<ChannelList key={ARRAY_OF_IDS.join('-')} filters={{id: {$in:[**ARRAY_OF_IDS**]},}}/>

Crash caused by events 'member.added' and 'member.removed' in ChannelInner of a channel with no messages

If the active channel has no messages and a 'member.added' or 'member.removed' event occurs, ChannelInner.addToEventHistory() attempts to get the id of the last message (which is undefined), causing a crash.

Realtime is not working

react-native: 0.59.10
stream-chat-react-native: 0.1.17
@react-native-community/netinfo: 2.0.7

<SafeAreaView> <Chat style={theme} client={chatClient} > <Channel client={chatClient} channel={channel} > <View style={{ display: 'flex', height: '100%' }}> <MessageList /> <MessageInput /> </View> </Channel> </Chat> </SafeAreaView>

In this screen,
Sending message is working.
But, if other sender send to me, it is not working to me at real time.
If I back and into screen, it is appear.

And, after sending message, below warning is appear.
I think this is related issue

Please help!!
We will use this chatting solution by enterprise.
Buy why doesn't it work????

ImagePicker fails to open

pickImage in registerNativeHandlers passes null to ImagePicker.showImagePicker which causes an error in React-Native-Image-Picker. For now, should probably pass and empty object or allow for users to pass their own options to the image picker.

Still getting notification from muted user

Hi,

There is an issue with the muted users. The documentations says that the messages from muted users are not sent. However a user is still receiving messages and push notifications from a user that he muted.

The muteUser function provided in the API is used and it's successfully called. Is there anything else needed to mute a user? Because this function is called and still messages and notifications are coming from the muted user.

Theming Message Text

How do we change message text color and font size? Looks like the text is render using a separate Markdown lib?

Custom attach icon of MessageInput component

Describe the feature
I would like to provide a custom attach icon to the MessageInput component

Currently its hard coded, see:

• stream-chat-react-native/src/components/MessageInput.js

  Line 762 in fa5e2b6

  <AttachButtonIcon source={iconAddAttachment} />

• stream-chat-react-native/src/components/MessageInput.js

  Line 25 in fa5e2b6

  import iconAddAttachment from '../images/icons/plus-outline.png';

Missing SendButton prop of MessageInput on typescript type definition

This prop exists but isn’t declared on the .d.ts file.

stream-chat-react-native/src/components/MessageInput.js

Lines 179 to 182 in fa5e2b6

	SendButton: PropTypes.oneOfType([
	PropTypes.node,
	PropTypes.elementType,
	]),

stream-chat-react-native/types/index.d.ts

Line 198 in fa5e2b6

export interface MessageInputProps

Avatar initials are not displayed in ChannelList for one-one converstations

Describe the bug
A clear and concise description of what the bug is.
Avatar initials are not displayed in ChannelList for one-one converstations. Channel Screens shows the avatar initials correctly.

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo): latest stream-chat-expo
• react-native or expo version: expo
• Device/Emulator (android/ios) and OS version: all

To Reproduce
Steps to reproduce the behavior:

1. Follow getting started with react native tutorial at https://getstream.io/chat/react-native-chat/tutorial/
2. create a one-one conversation (a channel with only 2 members and no name) by following instructions at https://getstream.io/chat/docs/channel_conversations/?language=js - (please note that there is no channel name since it is one-one)

Expected behavior
Avatar initials should be displayed in ChannelList for one-one conversations

Additional context
problem is here - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreviewMessenger.js#L107 . It takes channel.data.name which is empty for 1-1 conversations. You should send initials of 2nd member in this case.

Screenshots
If applicable, add screenshots to help explain your problem.

RN - Arguments[0].indexOf is not a function

Describe the bug
When rendering ChannelList, I get this error.

Dev environment info (please complete/provide the following information):

• Package version: stream-chat-react-native -> 0.6.1
• Device/Emulator: ios emulator iphone 11 -> 0.65

To Reproduce
Steps to reproduce the behavior:

1. Render ChannelList as provided by example documentation

Screenshots

Support offline mode

I don't see it in the docs, but maybe you have some caching and offline support?
So that once user loaded messages, he can access(see) them later without an internet connection?

I know that it's possible to do using such tools as Redux or Apollo. But I wonder might be there is support for that out of the box. Thanks!