skip to Main Content

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

3

Answers


  1. Chosen as BEST ANSWER

    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


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

     <Image source={{uri: "data:image/png;base64," + imgsource}} style={{height: 150, width: 150 }}/>
    
    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search