Skip to main content

Troubleshooting

"Cannot read property 'Chat' of undefined"

This means the package threw while it was being loaded, so the import came back empty. The real cause is the first error in the Metro log or red box, logged before this one - almost always a native peer that is missing or out of sync with the installed app:

  • react-native-reanimated, react-native-worklets, react-native-gesture-handler and react-native-keyboard-controller are native modules. After installing or upgrading any of them, rebuild the app (npx expo run:ios, npx expo prebuild, or pod install + a native build) - reloading the JS bundle is not enough.
  • In Expo, install them with npx expo install so the versions match your SDK. A plain npm install pulls the latest releases, which Expo Go and an existing dev build may not include, and Reanimated throws a version-mismatch error on import.
  • In bare React Native, check the worklets Babel plugin is in babel.config.js (see Bare React Native Projects), then restart Metro with --reset-cache.
The whole message list is blurred on iOS 26

The chat sits under a transparent navigation header - Expo Router 58's default is a transparent Liquid Glass header the screen scrolls under. iOS 26 then blurs scroll content beneath the header with a scroll edge effect, so the messages under the header are blurred. Give the chat screen an opaque header:

<Stack.Screen name='chat' options={{ headerTransparent: false }} />
TextInput is hidden on Android

Make sure you have android:windowSoftInputMode="adjustResize" in your AndroidManifest.xml. See Android configuration above.

How to set Bubble color for each user?

See this issue for examples.

How to customize InputToolbar styles?

See this issue for examples.

How to manually dismiss the keyboard?

See this issue for examples.

How to use renderLoading?

See this issue for examples.