[🐛] 🔥🔥 App crashing whenever <OverlayProvider> gets added

ICGVIP commented 1 year ago

Issue

I have been trying to integrate the Chat SDK in my Expo ejected React Native Project. I have gone through the installation guide carefully and followed every step. I have installed and configured all the dependencies properly too with the ones like react-native-reanimated having its plugin mentioned in babel.config.js + npm start --reset-cache. I have added the basic code to create a "client" (StreamChat.getInstance) and created a channel too. Problem is as soon as I try to add the UI Components beginning with <OverlayProvider> , I get the following error:

ERROR Error: [Reanimated] valueUnpacker is not a worklet ERROR Invariant Violation: "main" has not been registered. This can happen if:

Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

I have tried every solution for these two errors. Nothing has worked so far. The problem doesn't exist when OverLayProvider is absent; it only arises as soon as I put it in code.

Steps to reproduce

Steps to reproduce the behavior:

Install the latest dependencies for your project
Install the entire suite of packages needed by stream-chat-react-native
After writing connectUser and channel creation code, add <OverlayProvider>

`package.json`:

{ "name": "chatDemo", "version": "1.0.0", "scripts": { "start": "expo start --dev-client", "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web" }, "dependencies": { "@babel/plugin-transform-optional-chaining": "^7.23.0", "@react-native-async-storage/async-storage": "^1.19.1", "@react-native-camera-roll/camera-roll": "^5.10.0", "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/masked-view": "^0.1.11", "@react-native-community/netinfo": "^9.4.1", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "@reduxjs/toolkit": "^1.9.5", "@stream-io/flat-list-mvcp": "^0.10.3", "axios": "^1.4.0", "expo": "^48.0.0", "expo-contacts": "~12.0.1", "expo-image-picker": "~14.1.1", "expo-linear-gradient": "~12.1.2", "expo-splash-screen": "~0.18.2", "expo-status-bar": "~1.4.4", "jwt-decode": "^3.1.2", "react": "18.2.0", "react-dom": "^18.2.0", "react-native": "0.71.13", "react-native-appearance": "^0.3.4", "react-native-chart-kit": "^6.12.0", "react-native-contacts": "^7.0.6", "react-native-country-codes-picker": "^2.3.3", "react-native-document-picker": "^9.0.1", "react-native-fs": "^2.20.0", "react-native-gesture-handler": "^2.13.1", "react-native-image-crop-picker": "^0.40.0", "react-native-image-resizer": "^1.4.5", "react-native-paper": "^5.8.0", "react-native-reanimated": "^3.5.4", "react-native-root-toast": "^3.4.1", "react-native-safe-area-context": "^4.7.2", "react-native-screens": "~3.20.0", "react-native-share": "^9.4.1", "react-native-svg": "^13.14.0", "react-native-web": "~0.18.11", "react-redux": "^8.1.1", "redux-thunk": "^2.4.2", "reduxjs-toolkit-persist": "^7.2.1", "stream-chat-react-native": "^5.18.1" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true }

react-native info output:

 info Fetching system and libraries information...
(node:78503) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: macOS 13.0
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 343.97 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.8.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.1.0 - /usr/local/bin/npm
    Watchman: 2023.10.02.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.13.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.3 AI-223.8836.35.2231.10406996
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 20.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: ^11.3.8 => 11.3.8 
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.13 => 0.71.13 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platform that you're experiencing the issue on:
- [ ] iOS
- [ ] Android
- [x] iOS but have not tested behavior on Android
- [ ] Android but have not tested behavior on iOS
- [ ] Both
stream-chat-react-native version you're using that has this issue:
- 5.18.1
Device/Emulator info:
- Device/Emulator: iPhone 14 Pro

Additional context

Babel.config.js: module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo','module:metro-react-native-babel-preset'], env: { production: { plugins: [ 'react-native-paper/babel', 'react-native-reanimated/plugin' ], }, }, }; };

Metro.config.js `const { getDefaultConfig } = require('expo/metro-config');

module.exports = getDefaultConfig(__dirname);`

Note: I have played around with these files a lot too but nothing has worked so far. I am assuming that the problem must be somewhere else since it all works fine before OverlayProvider is imported

App.js `export default function App(){

return (

Loading.....} persistor={persistor}>

) } `

Screenshots

Click To Expand

vishalnarkhede commented 1 year ago

Hey @ICGVIP the plugin react-native-reanimated/plugin seems to be added only for prod environment.

ICGVIP commented 1 year ago

Hey @ICGVIP the plugin react-native-reanimated/plugin seems to be added only for prod environment.

Thanks for the help Vishal. I have set it normally too but that still doesn't make this error go away. Could there be any other source of this issue ?

vishalnarkhede commented 1 year ago

@ICGVIP could you please share minimum reproducible repo with us? That will speed the issue resolution.

ICGVIP commented 1 year ago

Oh it's no more. I just restarted my system today and it stopped showing the error somehow. Thanks a lot for your prompt assistance ! I had one more doubt though. It's not possible to change colours of messages that are shown by without writing a custom component, right ? I wanted to have different colours of the messages for sender and receiver but I haven't found a direct way in the documentation so far. Would love to know if it exists. Thanks !

vishalnarkhede commented 1 year ago

I think this is what you are looking for - https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#mymessagetheme

GetStream / stream-chat-react-native