# 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](https://github.com/GetStream/stream-chat-react-native/issues). ## Cannot run remote debugger React Native is [undergoing major architecture changes](https://github.com/react-native-community/discussions-and-proposals/issues/91), [Reanimated 2](https://docs.swmansion.com/react-native-reanimated/) 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](https://docs.swmansion.com/react-native-reanimated/docs/#known-problems-and-limitations) that Reanimated 2 has, one of which is that the use of the JSI prevents debugging without using [Flipper](https://fbflipper.com/), 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. ```tsx {2} ``` ```tsx {2} setThread(null)} /> ``` 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. ```tsx ``` ```tsx setThread(null)} /> ``` ## 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](/chat/docs/sdk/react-native/v3/basics/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`. ```tsx ``` Similarly if the gallery fully open is not at the desired height, this can be adjusted using the `OverlayProvider` prop `topInset`. ```tsx ``` `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](/chat/docs/sdk/react-native/v3/basics/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. ```xml ``` In addition, and often overlooked, within the `application` tag you must included the `requestLegacyExternalStorage` attribute. ```xml ``` 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. ```xml ``` Add `maven { url 'https://maven.google.com' }` to `android/build.gradle` ```java {15} 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` ```java buildscript { ext { buildToolsVersion = "29.0.3" compileSdkVersion = 29 targetSdkVersion = 29 ... } ... } ``` Add `vectorDrawables.useSupportLibrary = true` to `android/app/build.gradle` ```java 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` ```java 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`](https://github.com/Kureev/react-native-blur) utilizes the native Android library [`BlurView`](https://github.com/Dimezis/BlurView) for the Android implementation. A [bug in the `BlurView` library](https://github.com/Dimezis/BlurView/issues/110#issuecomment-786939860) is translated into the current version of `@react-native-community/blur`, a [fix has been merged](https://github.com/Kureev/react-native-blur/issues/405#issuecomment-810539226) 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` ```java 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](https://docs.swmansion.com/react-native-gesture-handler/docs/) not being properly setup. Be sure to follow all needed [additional steps](https://docs.swmansion.com/react-native-gesture-handler/docs/) to complete the installation. This includes ensuring you import `react-native-gesture-handler` at the top of your app entry file. ```tsx import "react-native-gesture-handler"; ``` And for Android you additionally need to update `MainActivity.java` to override the method for creating the `ReactRootView`. ```java {4-6,13-21} 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](https://docs.swmansion.com/react-native-gesture-handler/docs/). 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](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/) 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](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#android). Ensure Hermes is enabled in `android/app/build.gradle` ```java project.ext.react = [ enableHermes: true // clean and rebuild if changing ] ``` Add Reanimated in `MainApplication.java` ```java {1-2,13-16} 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](https://github.com/aiba) has written [a guide](https://github.com/aiba/react-native-m1) 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. --- This page was last updated at 2026-03-06T17:05:12.424Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v3/basics/troubleshooting/](https://getstream.io/chat/docs/sdk/react-native/v3/basics/troubleshooting/).