Image Upload Keeps Loading Without Completing (React Native Crisp SDK)

[rashadataf]

Issue:

When attempting to upload an image in the Crisp Chat SDK using a React Native app, the loading indicator keeps showing "Uploading" indefinitely, and the image never completes the upload process. Here's a detailed description of the issues:

1. Image Upload Issue:

   • When selecting an image, the upload loading indicator keeps spinning and never completes.

   • If the image is large (e.g., 4032x3024), I see the following error in Xcode logs, and the indicator keeps saying uploading:
     createThumbnailAtIndex:2481: *** ERROR: kCGImageSourceThumbnailMaxPixelSize: 5000 is larger than image-dimension: 4032x3024 writeImageAtIndex:1035: ⭕️ ERROR: 'mobile_frontend' is trying to save an opaque image (4032x3024) with 'AlphaPremulLast'

   • If I select a smaller image, no error appears, but the upload still doesn't complete.

2. UI Thread Warnings:

   I can see Main Thread Checker warnings in Xcode that indicate UI API calls are being made on a background thread:
   Main Thread Checker: UI API called on a background thread: -[UIApplication applicationState]

• This could potentially be causing issues with the image upload as the Crisp SDK seems to be making UI-related calls on the background thread, which may interfere with the UI state.

Steps to Reproduce:

1. Open the chat using Crisp SDK in the app.

2. Choose an image to upload (either large or small).

3. Observe the loading indicator spinning indefinitely. The image never completes uploading, and no error is displayed on the screen.

Environment:

• React Native Version: 0.79.2

• react-native-crisp-chat-sdk: ^0.16.1

• iOS Version: 18.5

• Device Type: Physical Device, iPhone 13 mini

• React Native New Architecture: Enabled

• Info.plist Configurations:

  • NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription are set correctly.

React Native Info:

System:

• OS: macOS 15.5
• CPU: (8) arm64 Apple M2
• Memory: 127.66 MB / 16.00 GB
• Shell:
  • version: "5.9"
  • path: /bin/zsh

Binaries:

• Node:
  • version: 20.18.0
  • path: ~/.nvm/versions/node/v20.18.0/bin/node
• Yarn:
  • version: 3.6.4
  • path: ~/.nvm/versions/node/v20.18.0/bin/yarn
• npm:
  • version: 11.0.0
  • path: ~/.nvm/versions/node/v20.18.0/bin/npm
• Watchman:
  • version: 2025.04.28.00
  • path: /opt/homebrew/bin/watchman

Managers:

• CocoaPods:
  • version: 1.16.2
  • path: /Users/rashadataf/.rbenv/shims/pod

SDKs:

• iOS SDK:
  • Platforms:
    • DriverKit 24.2
    • iOS 18.2
    • macOS 15.2
    • tvOS 18.2
    • visionOS 2.2
    • watchOS 11.2
• Android SDK:
  • API Levels:
    • "31"
    • "32"
    • "33"
    • "34"
    • "35"
  • Build Tools:
    • 30.0.3
    • 31.0.0
    • 33.0.0
    • 33.0.1
    • 33.0.2
    • 34.0.0
    • 35.0.0
  • System Images:
    • android-36 | Google Play ARM 64 v8a
  • Android NDK: 22.1.7171670

IDEs:

• Android Studio: 2024.3 AI-243.25659.59.2432.13423653
• Xcode:
  • version: 16.2/16C5032a
  • path: /usr/bin/xcodebuild

Languages:

• Java:
  • version: 17.0.15
  • path: /usr/bin/javac
• Ruby:
  • version: 2.7.5
  • path: /Users/rashadataf/.rbenv/shims/ruby

npmPackages:

• @react-native-community/cli:
  • installed: 18.0.0
  • wanted: 18.0.0
• react:
  • installed: 19.0.0
  • wanted: 19.0.0
• react-native:
  • installed: 0.79.2
  • wanted: 0.79.2
• react-native-macos: Not Found

npmGlobalPackages:

• *react-native*: Not Found

Android:

• hermesEnabled: true
• newArchEnabled: true

iOS:

• hermesEnabled: true
• newArchEnabled: true

[Alex90Jennings]

is there an update here? the issue is still happening

@walterholohan

[Alex90Jennings]

@Doc1faux

[rashadataf]

here you can find a screen record showing the behaviour we are experiencing

[Doc1faux]

Hi,

Is the issue happenning only on iOS or on both Android and iOS?
I am in charge of the Android part, for the iOS part, I let @nesium reply ;)
I just know that latest 0.19.0 embeds latest 2.9.0 iOS SDK instead of 2.8.2, so maybe this was fixed in here?

[Alex90Jennings]

@Doc1faux We have tried 0.19 on iOS the image upload has the same errors as described above. We are testing on Android

[VirtuozTM]

Hi,

This is weird. I just tested with a fresh Expo project using react-native-crisp-chat-sdk@0.20 and image upload works fine on both platforms.
Are you running on Bare Workflow or Expo?

[nesium]

Hi there. At this point it might make the most sense for us to debug this with your Crisp account if you can share your Website ID and allow us to try the upload ourselves. You can share it either with me at mb@nesium.com or use the chat on the Crisp website to share it there and reference this conversation. Thank you and sorry for the inconvenience caused.

[rashadataf]

Hi,

This is weird. I just tested with a fresh Expo project using react-native-crisp-chat-sdk@0.20 and image upload works fine on both platforms. Are you running on Bare Workflow or Expo?

Hi,

This is weird. I just tested with a fresh Expo project using react-native-crisp-chat-sdk@0.20 and image upload works fine on both platforms. Are you running on Bare Workflow or Expo?

@VirtuozTM Hi! Sorry for the delay getting back to you.

We’re on the Bare React Native workflow. There’s an update on our side: we upgraded to react-native-crisp-chat-sdk@0.21.0. After the upgrade, image upload works on Android, but the issue still persists on iOS.

Happy to share any extra details (device/OS versions, logs, repro steps) if that helps.

Thanks!

[rashadataf]

Hi there. At this point it might make the most sense for us to debug this with your Crisp account if you can share your Website ID and allow us to try the upload ourselves. You can share it either with me at mb@nesium.com or use the chat on the Crisp website to share it there and reference this conversation. Thank you and sorry for the inconvenience caused.

@nesium
Thanks for the response and offer to help. I’ve just sent you an email with our Website ID and details so you can try the upload on your side. Appreciate the support!

[nesium]

Thanks @rashadataf. I've received your email and will look into it.

[VirtuozTM]

@rashadataf We tested it (@nesium and I) on a vanilla React Native project and couldn’t reproduce the issue.
Could you provide a reproducible example?
Also, could you try testing it on a vanilla React Native project to confirm?