[🐛] bug when rendering channel's avatars

[Dan-Berezin]

Issue

When rendering the Channel component or the ChannelList component on my React Native iOS app the CG GState gets restored too many times. I get the following message on the console:
[CoreGraphics] CGGStackRestore: CG GState restored too many times

For any iOS older than 18, this causes a crash on both the simulator or the real app. The crash might not happen right away but if entering ande leaving a chat channel it will happen fast. There is no crash message and the app just goes to the background and resets.

My Channel component looks like this:

<Channel
    channel={channel}
    hasFilePicker={false}
    hasImagePicker={isPractitionerChat}
    hasCommands={false}
    myMessageTheme={myTheme}
>
    <MessageList />
    <MessageInput Input={CustomInput} />
</Channel>

And ChannelList looks like this:

<ChannelList
    filters={{ members: { $in: [userId] } }}
    onSelect={setChannel}
/>

They are rendered inside Chat component, and depends on if channel is set whether Channel or ChannelList is used. The issue is avoided if I use custom avatar props, settimg the props MessageAvatar and PreviewAvatar to either null or a custom avatar taken from the app.

Steps to reproduce

Steps to reproduce the behavior:

using:

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

On an iOS app, on a real device or simulator render a ChannelList. If the ChannelList has more than one preview channel and iOS is older than 18, the app will crash fast. On iOS 18 it won't crash but console will show the CG GState message.

Expected behavior

I expect to be able to render Avatars from Stream without any risk of the app crashing.

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • 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:
  • [email protected]
  • [email protected]
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---

[khushal87]

Hey @Dan-Berezin, first things first, to address this issue, we would need you to upgrade your stream-chat-react-native version to the latest version, v5, which is v5.44.3. You are on a year-old version of our SDK, and it would be hard for us to triage the issue on such an older version. Also, your expo version has to be upgraded; this could be a problem with Expo 50, which will soon go out of support as Expo 53 comes in the upcoming months. We haven't seen similar reports on our SDK in the past about the issue that you shared, so it's weird that way, and we believe an upgrade could solve your problem.

You could upgrade to expo 51/52 on old architecture and see if this problem persists. This seems to be coming up from the C++ code. If this still doesn't solve your problem, we would like you share with us a minimum reproducible sample app where you could reproduce this crash so as to debug it. Thanks. 😄

[khushal87]

Hey @Dan-Berezin, did you get time to do the above-suggested solution?

[Dan-Berezin]

Hi @khushal87 yes, it took some time to do the upgrade but now I'm on Expo 51 and the issue is solved. Thanks!

[khushal87]

Amazing!