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/
- 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
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
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
- 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
-
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
- For iOS
-
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
insidestream-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
insidestream-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
instream-chat-react-native/examples/two
directory
- Craete a file named