React Native IOS base64 encoded images not showing - ios

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

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 2

There are 3 possible problems:
In a way how you encode your image - example of this problem and fix https://github.com/facebook/react-native/issues/34115
You encode SVG as base64 - https://github.com/facebook/react-native/issues/34115
You use an old version of the flipper https://github.com/facebook/react-native/issues/28583

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 }}/>