2

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
geninski98
  • 161
  • 1
  • 1
  • 10
  • do you have flipper? – Kirill Novikov Jan 16 '23 at 12:54
  • @KirillNovikov I've just seen a initializeFlipper() function in my MainApplication,java . Should I try to write versions['Flipper'] ||= '~> 0.37.0' in target do on my podfile? I'm still newish to deploying for ios so i'm not exactly sure on how or where I should write it. – geninski98 Jan 16 '23 at 13:30
  • yep check my answer please link number 3 – Kirill Novikov Jan 16 '23 at 13:38
  • @KirillNovikov How should I update my podfile? I've updated my question with my current podfile. Simply adding the line on the github comment doesn't seem to be working or I'm putting it in the wrong place. – geninski98 Jan 16 '23 at 16:17
  • have you tried to replace nulll with value for width `style={{height: 150, width: null, flex: 1}}` – Kirill Novikov Jan 16 '23 at 16:36
  • @KirillNovikov Yes. I've tried width '100%', a certain value, with and without flex and or resizeMode={'contain'}. Nothing shows up. – geninski98 Jan 16 '23 at 22:10

3 Answers3

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

geninski98
  • 161
  • 1
  • 1
  • 10
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

Kirill Novikov
  • 2,576
  • 4
  • 20
  • 33
0

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

 <Image source={{uri: "data:image/png;base64," + imgsource}} style={{height: 150, width: 150 }}/>
Nensi Kasundra
  • 1,980
  • 6
  • 21
  • 34