React-native iOS not showing images (pods issue)

Question

I was installing a package in my react-native application (to be specific it was createMaterialTopTabNavigator from react-navigation) but after the installation succeed, something crash (error: @react-navigation/material-top-tabs/src/index.tsx: unexpected token (16:12)) and I was trying to fix it, so I fixed it but then the images on iOS stoped working.

Before the installation of that package, my Image component was working perfectly in both platforms (iOS and Android).

I guess is something related with the packages/pods that take care of images in XCode, but I have tried some stuff but didn't work (I'm not an expert in XCode).

On Android they are working fine.

What I have done to solve the problem but didn't work:

-Upgrade my react-native version from "0.61.5" to "0.62"

-Deleted pods, clean the project and reinstall pods with "pod install"

-Tried this answer but I guess that is not exactly my issue.

Do you know what else can I do? I'm running out of ideas and I do not find too much about this topic on the internet.

Thanks!

Update The Image component make its animation as if the image is loaded, it just does not display it. So I'm sure that is something related with the iOS project, and also because in android is working fine.

Answer 1

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

Answer 2

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