React-native iOS not showing images (pods issue)

user_9749951 0
Viewed 44077

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.

cocoapods react-native xcode image ios
3 Answers

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

user_40072570

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
user_10280910

Here are the steps: -

run "npm i -g patch-package"

Add a new folder called patches on the root of the project and create a new file inside that folder with the name react-native+0.63.0.patch and past this code inside the file

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 
 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

And run this command on the root of the project patch-package

user_101780450
Related