[🐛] App crash on iOS when opening the image picker on Expo 51 🔥 #2550

jakubdrozdek · 2024-06-11T11:59:19Z

Issue

After upgrading Expo to 51, my app started to crash on the iOS simulator whenever I opened the image picker (next to the message input). Works fine on Android.

Steps to reproduce

Steps to reproduce the behavior:

Upgrade Expo to 51.
Click on the image picker icon, next to the message input.
App crashes with the error.

Expected behavior

The image picker should open as expected.

Project Related Information

Customization

Click To Expand

MessageInput

import React from 'react';
import {
  AutoCompleteInput,
  FileUploadPreview,
  ImageUploadPreview,
  type MessageInputProps,
  useMessageInputContext,
  useTheme,
} from 'stream-chat-expo';

import { useChatThemeContext } from '@/features/communities/services/ChatTheme/useChatThemeContext';
import { XFlex, YFlex } from '@/ui/Flex';
import { IconButton } from '@/ui/IconButton';

export const GetStreamInput: React.FC<MessageInputProps> = ({ disabled }) => {
  const { sendMessage, toggleAttachmentPicker, openCommandsPicker } =
    useMessageInputContext();
  const { theme } = useTheme();
  const { themeName } = useChatThemeContext();

  return (
    <YFlex flexGrow={1}>
      <XFlex>
        <ImageUploadPreview />
        <FileUploadPreview />
      </XFlex>

      <XFlex
        gap={10}
        paddingHorizontal="$2"
        alignItems="center"
        alignContent="center"
      >
        <IconButton
          name="paperclip-vertical-regular"
          onPress={toggleAttachmentPicker}
          type={themeName === 'dark' ? 'ghost-white' : 'ghost-dark'}
        />
        <IconButton
          name="bolt-regular"
          onPress={openCommandsPicker}
          type={themeName === 'dark' ? 'ghost-white' : 'ghost-dark'}
        />
        <YFlex flexGrow={1}>
          <XFlex
            minWidth={100}
            minHeight={42}
            borderRadius={20}
            borderWidth={1}
            paddingHorizontal={12}
            borderColor={theme.messageInput.inputBoxContainer.borderColor}
            backgroundColor={
              theme.messageInput.inputBoxContainer.backgroundColor
            }
            alignItems="center"
            justifyContent="space-between"
          >
            <AutoCompleteInput
              additionalTextInputProps={{
                placeholder: 'Write something',
                style: {
                  color: theme.messageInput.inputBox.color,
                  flex: 1,
                },
                placeholderTextColor: theme.messageInput.inputBox.color,
              }}
            />

            <IconButton
              name="send-regular"
              onPress={() => sendMessage()}
              disabled={disabled}
              type={themeName === 'dark' ? 'ghost-white' : 'ghost-dark'}
            />
          </XFlex>
        </YFlex>
      </XFlex>
    </YFlex>
  );
};

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`:

(I removed other deps from the snippet.)

{
  "dependencies": {
    "expo": "~51.0.12",
    "expo-apple-authentication": "~6.4.1",
    "expo-application": "~5.9.1",
    "expo-av": "~14.0.5",
    "expo-build-properties": "~0.12.3",
    "expo-camera": "~15.0.10",
    "expo-constants": "~16.0.2",
    "expo-datadog": "^50.1.0",
    "expo-dev-client": "~4.0.16",
    "expo-device": "~6.0.2",
    "expo-file-system": "~17.0.1",
    "expo-font": "~12.0.7",
    "expo-image-manipulator": "~12.0.5",
    "expo-image-picker": "~15.0.5",
    "expo-keep-awake": "~13.0.2",
    "expo-linear-gradient": "~13.0.2",
    "expo-linking": "~6.3.1",
    "expo-localization": "~15.0.3",
    "expo-media-library": "~16.0.3",
    "expo-notifications": "~0.28.8",
    "expo-router": "~3.5.16",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.74.2",
    "stream-chat": "8.36.0",
    "stream-chat-expo": "^5.31.1",
  }
}

react-native info output:

 System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M1
  Memory: 125.25 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.2
    wanted: 0.74.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

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:
- "stream-chat-expo": "^5.31.1",
Device/Emulator info:
- I am using a physical device
- OS version:
- Device/Emulator: iPhone 15 Pro (simulator)

Additional context

Screenshots

Click To Expand

The text was updated successfully, but these errors were encountered:

khushal87 · 2024-06-11T12:34:41Z

Hey @jakubdrozdek, this seems to be specific to the expo-media-library version >=16.0.0 and doesn't happen on lower versions of the package. Until we find a fix, I would suggest using a lower version where it works.

Note: You can use Expo 51 with expo-media-library 15.9.1

jakubdrozdek · 2024-06-11T12:49:14Z

@khushal87 Thank you, worked like a charm! :)

jakubdrozdek · 2024-06-11T22:26:25Z

@khushal87 Unfortunately, I couldn't build the Android app with [email protected] due to the following error:

FAILURE: Build failed with an exception.

* Where:
Script '/Users/jakubdrozdek/Projects/xyz/node_modules/expo-modules-autolinking/scripts/android/autolinking_implementation.gradle' line: 408

* What went wrong:
A problem occurred evaluating project ':expo'.
> A problem occurred configuring project ':expo-media-library'.
   > Failed to notify project evaluation listener.
      > compileSdkVersion is not specified. Please add it to build.gradle
      > Could not get unknown property 'release' for SoftwareComponent container of type org.gradle.api.internal.component.DefaultSoftwareComponentContainer.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

Any ideas?

khushal87 · 2024-06-12T04:49:45Z

As the error states, you don't seem to have compileSdkVersion in your android/build.gradle. Do you have it?

khushal87 · 2024-06-12T06:45:06Z

https://docs.expo.dev/versions/latest/sdk/build-properties/#example-appjson-with-config-plugin

you can specify it through this as well

jakubdrozdek · 2024-06-12T08:08:38Z

@khushal87 I use the Expo managed flow and build.gradle is generated by the prebuild step:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '34.0.0'
        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '23')
        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '34')
        targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
        kotlinVersion = findProperty('android.kotlinVersion') ?: '1.9.23'

        ndkVersion = "26.1.10909125"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.9'
        classpath 'com.google.gms:google-services:4.3.3'
        classpath('com.android.tools.build:gradle')
        classpath('com.facebook.react:react-native-gradle-plugin')
        classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
    }
}
// ...
}

Here is my app.config.js:

{
plugins: [
    [
      'expo-build-properties',
      {
        android: {
          minSdkVersion: 26,
          buildToolsVersion: '34.0.0',
          compileSdkVersion: 34,
          targetSdkVersion: 34,
        },
        ios: {
          deploymentTarget: '13.4',
          extraPods: [
            { name: 'GoogleUtilities', modular_headers: true },
            { name: 'FirebaseABTesting', modular_headers: true },
            { name: 'FirebaseCore', modular_headers: true },
            { name: 'FirebaseCoreInternal', modular_headers: true },
            { name: 'FirebaseCoreExtension', modular_headers: true },
            { name: 'FirebaseInstallations', modular_headers: true },
            { name: 'GoogleDataTransport', modular_headers: true },
            { name: 'nanopb', modular_headers: true },
          ],
        },
      },
    ],
],
}

It looks to me that the compileSdkVersion isn't propagated correctly to the older version of expo-media-library. No idea why... I wonder if Expo does any magic behind the scenes to provide those values.

jakubdrozdek · 2024-06-12T09:32:34Z

It might be related to this change:
https://docs.expo.dev/bare/upgrade/?fromSdk=49&toSdk=51#androidappbuildgradle
specifically:

vitorcamachoo · 2024-06-13T13:31:48Z

I can't update expo to version 51 because of this library. How can we make the application work with offline mode enabled in expo 51?
margelo/react-native-quick-sqlite#42

khushal87 · 2024-06-14T06:26:13Z

Hey, so on raising an issue on the expo-media-library's end, it has been fixed recently, and this should be released anytime soon, and that should fix the problem with image uploads.

khushal87 · 2024-06-14T06:29:03Z

Hey @vitorcamachoo, since expo 51 makes the bridgeless mode default(update as per comment below: if new arch is enabled), the library react-native-quick-sqlite is not compatible with it, and we are aware of the limitation. That is why we plan to move to the op-sqlite, and we already have a PR for it. This shall be released as a part of our v6 plan as it is a breaking change, so if you want to use offline support, you will have to stick to Expo 50 for now if you are facing issues until we support the new architecture.

What's the exact issue you are facing with react-native-quick-sqlite?

tsapeta · 2024-06-14T07:25:31Z

expo 51 makes the bridgeless mode default

Just to clarify: this is true only when you enable the new architecture in your app and for every project using RN 0.74. react-native-quick-sqlite is compatible with SDK 51 and the mentioned issue doesn't seem to be related to Expo in general.

khushal87 · 2024-06-14T07:46:36Z

expo 51 makes the bridgeless mode default

Just to clarify: this is true only when you enable the new architecture in your app and for every project using RN 0.74. react-native-quick-sqlite is compatible with SDK 51 and the mentioned issue doesn't seem to be related to Expo in general.

Oh yes, that should be the case I missed mentioning if new architecture is enabled above. Apologies.

vitorcamachoo · 2024-06-14T07:53:25Z

Hey @vitorcamachoo, since expo 51 makes the bridgeless mode default(update as per comment below: if new arch is enabled), the library react-native-quick-sqlite is not compatible with it, and we are aware of the limitation. That is why we plan to move to the op-sqlite, and we already have a PR for it. This shall be released as a part of our v6 plan as it is a breaking change, so if you want to use offline support, you will have to stick to Expo 50 for now if you are facing issues until we support the new architecture.

What's the exact issue you are facing with react-native-quick-sqlite?

The error I am facing is related to sdk versions.

khushal87 · 2024-06-17T12:54:53Z

Hey @vitorcamachoo, since expo 51 makes the bridgeless mode default(update as per comment below: if new arch is enabled), the library react-native-quick-sqlite is not compatible with it, and we are aware of the limitation. That is why we plan to move to the op-sqlite, and we already have a PR for it. This shall be released as a part of our v6 plan as it is a breaking change, so if you want to use offline support, you will have to stick to Expo 50 for now if you are facing issues until we support the new architecture.
What's the exact issue you are facing with react-native-quick-sqlite?

The error I am facing is related to sdk versions.

Assuming this is related to the PR on react-native-quick-sqlite. I have already raised a PR, and all we can do is wait until it's merged, until then, please stick to Expo 50.

khushal87 · 2024-06-17T13:02:46Z

It might be related to this change: https://docs.expo.dev/bare/upgrade/?fromSdk=49&toSdk=51#androidappbuildgradle specifically:

About this I would suggest doing npx expo install --fix and run the project again. This shall fix your problem.

khushal87 · 2024-06-21T04:12:33Z

With the release 16.0.4 of expo-media-library, I will be closing this issue. Please feel free to upgrade the version and that should work fine. Thanks 😄

softwarebyze · 2024-06-25T19:20:03Z

@khushal87 hmm looks like the latest version of expo-media-library is 16.0.3

https://www.npmjs.com/package/expo-media-library

tsapeta · 2024-06-25T20:54:02Z

@softwarebyze Yes, but 16.0.4 exists and is available to use, it's just tagged as next. We promote versions to latest after a few days or once we get some confirmations whether the issues were fixed.

softwarebyze · 2024-06-25T22:04:09Z

@tsapeta Gotcha. Thank you!

jakubdrozdek added the Needs Triaging label Jun 11, 2024

jakubdrozdek closed this as completed Jun 11, 2024

jakubdrozdek reopened this Jun 11, 2024

khushal87 added iOS Only Issue that only concern iOS platform and removed Needs Triaging labels Jun 14, 2024

khushal87 closed this as completed Jun 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[🐛] App crash on iOS when opening the image picker on Expo 51 🔥 #2550

[🐛] App crash on iOS when opening the image picker on Expo 51 🔥 #2550

jakubdrozdek commented Jun 11, 2024 •

edited

Loading

`package.json`:

khushal87 commented Jun 11, 2024 •

edited

Loading

jakubdrozdek commented Jun 11, 2024

jakubdrozdek commented Jun 11, 2024 •

edited

Loading

khushal87 commented Jun 12, 2024 •

edited

Loading

khushal87 commented Jun 12, 2024

jakubdrozdek commented Jun 12, 2024 •

edited

Loading

jakubdrozdek commented Jun 12, 2024

vitorcamachoo commented Jun 13, 2024

khushal87 commented Jun 14, 2024

khushal87 commented Jun 14, 2024 •

edited

Loading

tsapeta commented Jun 14, 2024 •

edited

Loading

khushal87 commented Jun 14, 2024

vitorcamachoo commented Jun 14, 2024

khushal87 commented Jun 17, 2024

khushal87 commented Jun 17, 2024

khushal87 commented Jun 21, 2024

softwarebyze commented Jun 25, 2024

tsapeta commented Jun 25, 2024

softwarebyze commented Jun 25, 2024

[🐛] App crash on iOS when opening the image picker on Expo 51 🔥 #2550

[🐛] App crash on iOS when opening the image picker on Expo 51 🔥 #2550

Comments

jakubdrozdek commented Jun 11, 2024 • edited Loading

Issue

Steps to reproduce

Expected behavior

Project Related Information

Customization

Offline support

Environment

package.json:

Additional context

Screenshots

khushal87 commented Jun 11, 2024 • edited Loading

jakubdrozdek commented Jun 11, 2024

jakubdrozdek commented Jun 11, 2024 • edited Loading

khushal87 commented Jun 12, 2024 • edited Loading

khushal87 commented Jun 12, 2024

jakubdrozdek commented Jun 12, 2024 • edited Loading

jakubdrozdek commented Jun 12, 2024

vitorcamachoo commented Jun 13, 2024

khushal87 commented Jun 14, 2024

khushal87 commented Jun 14, 2024 • edited Loading

tsapeta commented Jun 14, 2024 • edited Loading

khushal87 commented Jun 14, 2024

vitorcamachoo commented Jun 14, 2024

khushal87 commented Jun 17, 2024

khushal87 commented Jun 17, 2024

khushal87 commented Jun 21, 2024

softwarebyze commented Jun 25, 2024

tsapeta commented Jun 25, 2024

softwarebyze commented Jun 25, 2024

jakubdrozdek commented Jun 11, 2024 •

edited

Loading

`package.json`:

khushal87 commented Jun 11, 2024 •

edited

Loading

jakubdrozdek commented Jun 11, 2024 •

edited

Loading

khushal87 commented Jun 12, 2024 •

edited

Loading

jakubdrozdek commented Jun 12, 2024 •

edited

Loading

khushal87 commented Jun 14, 2024 •

edited

Loading

tsapeta commented Jun 14, 2024 •

edited

Loading