React Native IOS base64 encoded images not showing

Question

I have a react native app that needs to show images of products if they exist. I store the base64 encoded image on a local SQLite as a blob and render them as follows:

<Image source={{uri: "data:image/png;base64," + imgsource}} style={{height: 150, width: null, flex: 1}}/>

Where imgsource is the base64 string retrieved from the database. The image and other information are stored directly from the database in an object array.

I'm using React Native 0.61.5

On Android everything works perfectly fine, however, on IOS images are not being displayed. Am I missing something?

Podfile

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
project 'sgeapp.xcodeproj'
target 'sgeapp' do
  # Pods for sgeapp
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'


#  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  pod 'react-native-sqlite-storage', :path => '../node_modules/react-native-sqlite-storage'
  target 'sgeappTests' do
    inherit! :search_paths
    # Pods for testing
  end

  post_install do |installer|
      ## Fix for XCode 12.5 beta
      find_and_replace("../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm", "_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules")
          find_and_replace("../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm", "RCTBridgeModuleNameForClass(strongModule))", "RCTBridgeModuleNameForClass(Class(strongModule)))")
  end
  
  use_native_modules!
end

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

Answer 1

There are 3 possible problems:

1. In a way how you encode your image - example of this problem and fix https://github.com/facebook/react-native/issues/34115

2. You encode SVG as base64 - https://github.com/facebook/react-native/issues/34115

3. You use an old version of the flipper https://github.com/facebook/react-native/issues/28583

Answer 2

After some extra research I've found out it's a bug for builds in xcode12 and react versions < 0.63.2

See https://stackoverflow.com/a/68906311/12493015 for the solution that worked for me

So if anyone else runs into this issue either check the solution on the link or upgrade react native to 0.63.2 or higher

Answer 3

Either give width/height or flex, both will not work together:

 <Image source={{uri: "data:image/png;base64," + imgsource}} style={{height: 150, width: 150 }}/>