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

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

Create a new project based on the typescript template npx react-native init Test --template react-native-template-typescript
Just in case cd ios && pod install && cd ..
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'

yarn start and yarn ios

Expected Results

Image should load, or at least display an error.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 16
Comments: 24 (2 by maintainers)

Most upvoted comments

@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

whaus7 on Apr 17, 2020

+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.

AtanasChachev on Jun 3, 2020

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 😃

organom on Jul 7, 2020

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.

martijngerrits on Apr 4, 2020