React-native: [0.62.0] Image with data:image/png;base64 crashing on iOS

[organom]

Description

Following the official example in the documentation https://reactnative.dev/docs/images#uri-data-images, the loading of an image using data:image/png;base64 is currently crashing when starting in the iOS emulator and no error can be seen (in the shells or in the react native debugger).
On Android it works correctly.

React Native version:

16:21 $ npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 56.48 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.1 - ~/.n/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.n/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.0 => 0.62.0
  npmGlobalPackages:
    *react-native*: Not Found

Emulator:

iPhone 11 with ios 13.4

Steps To Reproduce

1. Create a new project based on the typescript template npx react-native init Test --template react-native-template-typescript
2. Just in case cd ios && pod install && cd ..
3. Add to App.tsx (from https://reactnative.dev/docs/images#uri-data-images)

<Image 
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain',
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

And the Image element import to from 'react-native'

1. yarn start and yarn ios

Expected Results

Image should load, or at least display an error.

[martijngerrits]

Image seems to load, but crashes somewhere in Flipper.

[ncuillery]

Seems to be the same as https://github.com/facebook/react-native/issues/28454

[xsephtion]

+1

[folowing]

update to 0.62.1, still crash

[martijngerrits]

update to 0.62.1, still crash

That’s because the update is only regarding the YellowBox which has been changed to use normal images, other than solving the base64 images in general.

[developer-sen]

+1

[Skullcan]

+1
Having the same issue.

[Skullcan]

Still happening here even after upgrading to 0.62.2.
The issue that this PR fixes is about network plugin on flipper. I don't think this has anything todo with data:image problem.

[rfischer]

This pull request https://github.com/facebook/flipper/pull/978 fixes the issue for me. The problem is, it isn't released yet and, therefore, not fixed with the react-native 0.62.2 update. Please correct me if I am wrong.

[whaus7]

@rfischer This appears to be accurate as far as I can tell. Anyway to just turn off this Flipper business for now?

Answered my own question, as simple as commenting out
InitializeFlipper(application);

in the AppDelegate.m file. I'm rocking smooth as butter now. I'll Flip it back on when that fix is released

[masa7351]

Having the same issue.
Thanks. This article helped me.

[wzahedi]

@rfischer This appears to be accurate as far as I can tell. Anyway to just turn off this Flipper business for now?

Answered my own question, as simple as commenting out
InitializeFlipper(application);

in the AppDelegate.m file. I'm rocking smooth as butter now. I'll Flip it back on when that fix is released

I was also having this issue. The app crashes when Image Picker returns data. Seems like commenting InitializeFlipper(application); resolves the crashes for now.

[everfire130]

+1

[hamzaouhssain1993]

+1

[AtanasChachev]

+1.

As an alternative until this issue gets fixed you can use WebView (react-native-webview) and it's html's source.

In my case

 <WebView source={{ html: `
    <img src=${`data:image/jpeg;base64,${capturedImage}`} style="max-width: 100%; height: auto;" />
 ` }}/>

is working fine.

[yosukapro]

+1

[FarazzShaikh]

Is there a permanent solution to this issue?

[masa7351]

+1

[RacardoL]

+1

[organom]

Is there a permanent solution to this issue?

In https://github.com/react-native-community/lottie-react-native/issues/638 they seem to have 2 possible workarounds detailed (update flipper or commenting InitializeFlipper).

In my case, I decided to load the images from a file in the meanwhile. Hope this gets the official fix soon :)

[FarazzShaikh]

Commenting out the initialization function doesn’t seem to break my app, what is flipper used for? Can I just remove it entirely?

In my case, I decided to load the images from a file in the meanwhile. Hope this gets the official fix soon :)

In my use case, I’m converting a canvas image to a dataURL in base64 format so, I too hope it gets fixed fairly soon.

[thobiasn]

+1.

As an alternative until this issue gets fixed you can use WebView (react-native-webview) and it's html's source.

In my case

 <WebView source={{ html: `
    <img src=${`data:image/jpeg;base64,${capturedImage}`} style="max-width: 100%; height: auto;" />
 ` }}/>

is working fine.

This is working for me aswell. I am sticking to this solution for now, to avoid messing too much with the underlying ios code. Great find, thank you!