stream-chat-react-native-core

React Native Chat Components

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

You can sign up for a Stream account at https://getstream.io/chat/get_started/.

You can find detailed and set-by-step tutorial at https://getstream.io/chat/react-native-chat/tutorial/

You can find the design kit for this project at https://getstream.io/chat/ui-kit/

Keep in mind

• Navigation between different component is something we expect consumers to implement. You can checkout the example given in this repository

Library currently exposes following components:

• Avatar
• Chat
• Channel
• MessageList
• TypingIndicator
• MessageInput
• MessageSimple
• ChannelList
• Thread
• ChannelPreviewMessenger
• CloseButton
• IconBadge

You can see detailed documentation about the components at https://getstream.github.io/stream-chat-react-native

Usage (creating an example app)

Expo package

yarn global add expo-cli
expo init StreamChatExpoExample
cd StreamChatExpoExample
yarn add stream-chat-expo

Please check Example to see usage of the components.

OR you can swap this file for your App.js in the root folder with additional following steps:

yarn add react-navigation

and finally

yarn start

Native package:

react-native init StreamChatReactNativeExample
cd StreamChatReactNativeExample
yarn add stream-chat-react-native
react-native link @react-native-community/netinfo

# if you are plannign to use image picker or file picker or both
react-native link react-native-image-picker
react-native link react-native-document-picker

Please check Example to see usage of components.

OR you can swap this file for your App.js in root folder with additional following steps:

yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler

and finally

react-native run-ios

NOTE If you are planning to use file picker functionality, make sure you enable iCloud capability in your app

How to run example

Expo example

• Make sure node version is >= v10.13.0

• yarn global add expo-cli
  git clone https://github.com/GetStream/stream-chat-react-native.git
  cd stream-chat-react-native
  make
  cd examples/one
  yarn start
  

Native example

• Please make sure you have installed necessary dependencies depending on your development OS and target OS. Follow the guidelines given on official react native documentation for installing dependencies: https://facebook.github.io/react-native/docs/getting-started#

• Make sure node version is >= v10.13.0

• Start the simulator

• git clone https://github.com/GetStream/stream-chat-react-native.git
  cd stream-chat-react-native
  make
  cd examples/two
  

• • For iOS

    react-native run-ios
    

  • For android

    react-native run-android
    

While running native example, you may (not necessarily) run into following issues:

• When you execute react-native run-ios for the first time, it starts a metro bundler in parallel. It can result into some errors, since build process isn't complete yet. Try the following to fix this:

  • Close/stop the metro bundler process.
  • Let the build process finish completely, it can take usually around 2-3 minutes for the first time.
  • Start the metro bundler manually by executing yarn start inside stream-chat-react-native/examples/two directory.

• When you execute react-native run-android, you may (not necessarily) run into following error:

  info Starting JS server...
  info Building and installing the app on the device (cd android && ./gradlew app:installDebug)...
  Starting a Gradle Daemon, 1 incompatible Daemon could not be reused, use --status for details
  
  FAILURE: Build failed with an exception.
  
  * What went wrong:
  A problem occurred configuring project ':@react-native-community_netinfo'.
  > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
  
  * 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 13s
  error Could not install the app on the device, read the error above for details.
  Make sure you have an Android emulator running or a device connected and have
  set up your Android development environment:
  https://facebook.github.io/react-native/docs/getting-started.html
  error Command failed: ./gradlew app:installDebug. Run CLI with --verbose flag for more details.
  

  To resolve this, do the following

  • Craete a file named local.properties inside stream-chat-react-native/examples/two/android directory
  • Put the this line in that file. Make sure sdk path is correctly mentioned as per your system:

    sdk.dir=/Users/{user_name}/Library/Android/sdk/
    

  • Rerun react-native run-android in stream-chat-react-native/examples/two directory