React-native iOS not showing images (pods issue)

Images issue is seen in Xcode12 builds and the fix if you are not running latest react-native version or not planning to upgrade to latest version of react-native, then go to

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m
search for if (_currentFrame)

add the following else block to the if block as below

 if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Ref : https://github.com/facebook/react-native/issues/29279#issuecomment-658244428

And, if you don’t want to add it over and over again you can replace these lines in PodFile,

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
  end
end

with,

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
  find_and_replace("../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m",
    "_currentFrame.CGImage;","_currentFrame.CGImage ;} else { [super displayLayer:layer];")
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

Leave a Comment