<Chat client={chatClient} i18nInstance={streami18n}>
<Channel channel={channel} thread={thread}>
<MessageList onThreadSelect={setThread} />
<MessageInput />
</Channel>
</Chat>
Troubleshooting
There are a few common problems users have reported when setting up Stream Chat for React Native, to help you if you run afoul of these problems we have created a list of common issues and solutions. If you encounter something that is not listed here, try searching for the issue in GitHub.
Cannot run remote debugger
React Native is undergoing major architecture changes, Reanimated 2 has capitalized on the already released improvements and taken advantage of the JSI to provide an amazingly powerful library. Currently though there are a list of limitations that Reanimated 2 has, one of which is that the use of the JSI prevents debugging without using Flipper, therefore you must use Flipper for remote debugging.
Messages sending in thread instead of channel
There is an internal thread state that is used to track the current thread.
When you click on a thread and take an action such as navigating to another screen the thread
is set within the Channel
component in the current screen to the selected thread
.
When you return to the original screen you need to reset the thread to ensure it is not being set on the messages when they are sent.
We suggest you keep track of a thread
state on your own and provide it to any Channel
component you use whether on a channel or thread.
<Chat client={chatClient} i18nInstance={streami18n}>
<Channel channel={channel} thread={thread}>
<Thread onThreadDismount={() => setThread(null)} />
</Channel>
</Chat>
You may be wondering why this is all necessary, this is because in most cases there is only a single OverlayProvider
.
The OverlayProvider
keeps track of the currently selected images in the image picker, and the images available to view in the image gallery from a given channel or thread.
To keep these in sync with the currently visible screen some logic is used to determine whether or not they should update, this logic is dependant on the thread
state.
Undefined is not a function
Stream Chat for React Native relies heavily on context, in instances where the Render Error undefined is not a function
occurs it is almost always the case that a context provider is not wrapping a component appropriately.
If you encounter this error please ensure the OverlayProvider
, Chat
, and Channel
components are wrapping your application correctly.
Incorrect input position
If the MessageInput
is at the incorrect height when the keyboard is displayed a setting could being incorrect.
Ensure the keyboardVerticalOffset
prop passed to Channel
is correct and accounts for any header height that may need to be adjusted for.
Android
On Android if the StatusBar is set to translucent, that is StatusBar.setTranslucent(true)
then there may be some inaccurate layout calculations occurring.
If you are using the standard React Native Android keyboard setting of android:windowSoftInputMode="adjustResize"
, you can disable to layout adjustments on Android using the prop disableKeyboardCompatibleView
and this will ignore the incorrect measurements.
Wrong images in gallery
The image viewer is created in the OverlayProvider
so it can cover the entire screen, thus if you are wrapping your navigation in the OverlayProvider
there is only copy present throughout the application.
The images present in the viewer are determined by logic based off of both the current channel
and thread
provided to the Channel
component.
You therefore must keep these props up to date as you navigate to ensure when returning to a channel from a thread the images in the viewer are once again updated to those from the channel.
To do this make sure your Channel
components are always aware of the thread state, even when being used for a channel.
<Channel channel={channel} thread={thread}>
<MessageList onThreadSelect={setThread} />
<MessageInput />
</Channel>
<Channel channel={channel} thread={thread}>
<Thread onThreadDismount={() => setThread(null)} />
</Channel>
Image gallery not full screen
If the image viewer or message overlay is not covering the full screen, for instance it is rendering below or behind a Header, it is likely the OverlayProvider
is not setup in the correct location within the application.
Please refer to the Stream Chat with Navigation documentation to properly place the OverlayProvider
in relation to your navigation solution or other components.
Image picker incorrect height
The image picker opens the gallery to a height based on the location of the MessageInput
, if there is space below the MessageInput
, for instance a Safe Area or a Tab Bar, this must be taken into account.
To account for this the prop bottomInset
can be provided to the OverlayProvider
.
<OverlayProvider bottomInset={/** number */}>
Similarly if the gallery fully open is not at the desired height, this can be adjusted using the OverlayProvider
prop topInset
.
<OverlayProvider topInset={/** number */}>
topInset
prior to version 3.6.0
needed to be set before the image picker would render.
Additionally it could only be set one time via either props or the setTopInset
function, otherwise the gallery would open to incorrect heights.
Both bottomInset
& topInset
can be set via the appropriate functions, setBottomInset
and setTopInset
, that are accessible via the useAttachmentPickerContext
hook.
Android
On Android if the StatusBar is set to translucent, that is StatusBar.setTranslucent(true)
then you need to provide the prop translucentStatusBar
to the OverlayProvider
.
This prop is a boolean
that adjusts for differences in the measurements of the screen height when the StatusBar on Android is translucent.
It is important to note that since Expo 38 true
is the default for transparent on Android.
Image picker not working
If the image picker is appearing incorrectly, for instance behind a bottom Tab Bar, it is likely the OverlayProvider
is not setup in the correct location within the application.
Please refer to the Stream Chat with Navigation documentation to properly place the OverlayProvider
in relation to your navigation solution.
iOS
Add the NSPhotoLibraryUsageDescription
key in your Info.plist
with a description of use.
Add the NSPhotoLibraryAddUsageDescription
key in your Info.plist
with a description of use.
Android
The standard storage permissions are required for the image picker to work on Android, and must be included in the AndroidManifest.xml
file.
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
In addition, and often overlooked, within the application
tag you must included the requestLegacyExternalStorage
attribute.
<application
android:requestLegacyExternalStorage="true"
...
/>
Without this some Android devices will fail to load images despite permissions being granted within the settings.
Camera not working
iOS
Add the NSCameraUsageDescription
key in your Info.plist
with a description of use.
Add the NSPhotoLibraryUsageDescription
key in your Info.plist
with a description of use.
Add the NSMicrophoneUsageDescription
key in your Info.plist
with a description of use.
Android
The standard camera permissions are required for the camera to work on Android, and must be included in the AndroidManifest.xml
file.
<uses-permission android:name="android.permission.CAMERA"/>
Add maven { url 'https://maven.google.com' }
to android/build.gradle
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
google()
jcenter()
maven { url 'https://maven.google.com' }
maven { url 'https://www.jitpack.io' }
}
}
Ensure buildToolsVersion
, compileSdkVersion
, and targetSdkVersion
are all >= 26 in android/build.gradle
buildscript {
ext {
buildToolsVersion = "29.0.3"
compileSdkVersion = 29
targetSdkVersion = 29
...
}
...
}
Add vectorDrawables.useSupportLibrary = true
to android/app/build.gradle
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
...
}
...
}
GIF and WebP not displaying
Android
GIF and WebP do not work without additional modules by default on Android.
You will need to add some modules in your android/app/build.gradle
dependencies {
// For Android versions less than Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.3.0'
// For GIF support
implementation 'com.facebook.fresco:animated-gif:2.0.0'
// For WebP support, with animations
implementation 'com.facebook.fresco:animated-webp:2.1.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:2.0.0'
...
}
BlurView crashing
Android
@react-native-community/blur
utilizes the native Android library BlurView
for the Android implementation.
A bug in the BlurView
library is translated into the current version of @react-native-community/blur
, a fix has been merged but a new version is not yet released.
Until a new version is released the best solution is to force Android to use the fixed native library in your android/app/build.gradle
dependencies {
implementation('com.eightbitlab:blurview:1.6.6') {
force = true
}
...
}
Touchables
not working
If you are having trouble with pressing, swiping, or otherwise interacting with components it is likely the result of React Native Gesture Handler not being properly setup. Be sure to follow all needed additional steps to complete the installation.
This includes ensuring you import react-native-gesture-handler
at the top of your app entry file.
import 'react-native-gesture-handler';
And for Android you additionally need to update MainActivity.java
to override the method for creating the ReactRootView
.
package com.swmansion.gesturehandler.react.example;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
Custom touchable not working
If you find that a customization that includes a touchable is not working, or the wrong element is receiving the touch event, this is likely related to React Native Gesture Handler.
Your component may be being rendered inside of a gesture handler; nested gesture handlers and touchables
need special treatment and can act differently on iOS & Android.
There are solutions available for almost all use cases so looking into your specific use case in relation to React Native Gesture Handler is suggested. The solution may require using a different touchable from React Native Gesture Handler and React Native depending on the platform.
Reanimated 2
We rely on Reanimated 2 heavily for gesture based interactions and animations. It is vital you follow the Reanimated 2 installation instructions for the library to work properly.
Failed to create a Worklet
If you are encountering errors related to Reanimated 2 failed to create a worklet
you must likely forgot to add the react-native-reanimated/plugin
to your babel.config.js
file.
Blank screen on Android
If you are encountering errors on Android and the screen is blank it is likely you forgot to finish the Reanimated 2 Android setup.
Ensure Hermes is enabled in android/app/build.gradle
project.ext.react = [
enableHermes: true // clean and rebuild if changing
]
Add Reanimated in MainApplication.java
import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected String getJSMainModuleName() {
return "index";
}
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
};
...
Project won’t build on a MacBook with Apple M1
On newer MacBooks with the Apple M1 SoC, there are a few required steps that need to be followed for an app to build. The user aiba has written a guide to make the necessary changes to your project.
The iOS build version can be changed to suit your needs, but keep in mind to change the version to the same major and minor version consistently throughout the guide.
- Cannot run remote debugger
- Messages sending in thread instead of channel
- Undefined is not a function
- Incorrect input position
- Wrong images in gallery
- Image gallery not full screen
- Image picker incorrect height
- Image picker not working
- Camera not working
- GIF and WebP not displaying
- BlurView crashing
- Touchables not working
- Custom touchable not working
- Reanimated 2
- Project won’t build on a MacBook with Apple M1