29

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.

Aequitas
  • 2,205
  • 1
  • 25
  • 51
Luis Quiroga
  • 718
  • 2
  • 7
  • 22
  • Can you show your codes? Is there only 1 image component in your screen? or it's contained in a scroll view? – Raptor Sep 18 '20 at 06:11
  • @Raptor There are many Image component, some of them in a scroll view, and other just in a View, but before I broke up everything, all the Image components were working fine. – Luis Quiroga Sep 18 '20 at 06:17
  • @Raptor this.setState({ imageViewIsVisible: true })}> this.setState({ imageViewIsVisible: false })} animationType="fade" /> – Luis Quiroga Sep 18 '20 at 06:18
  • Something useful maybe could be if someone have a good guide of how to delete Pods with react-native – Luis Quiroga Sep 18 '20 at 06:35
  • Please edit your question to add your codes and format it properly. I cannot read your codes without formatting – Raptor Sep 18 '20 at 09:32

3 Answers3

144

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

gyan deep
  • 1,880
  • 1
  • 13
  • 9
  • Thanks! react-native stuff with out thinking about the Xcode updates. – Luis Quiroga Sep 21 '20 at 04:42
  • Do I have to worry in the future for this small change? – Luis Quiroga Sep 21 '20 at 04:43
  • 2
    this fix is available in react-native > 0.63.2 versions. I would suggest using this as temp fix until you upgrade to 0.63.2 or above. – gyan deep Sep 21 '20 at 14:07
  • 1
    I am experiencing the same issue, doing what you posted fixes it while developing an app (connected to Metro), but after archiving and uploading it to testflight images are still not shown. – Ivanka Todorova Sep 24 '20 at 13:46
  • 1
    Probably some issue with your archiving flow (check if there is some other node_modules folder). I have uploaded couple of builds to testflight and i havent faced issue. – gyan deep Sep 24 '20 at 15:47
  • 1
    its `image` instead of `images` folder in path... Cant edit it as its less than 6 char. Other then that worked for me – Blue Bot Dec 23 '20 at 10:51
  • I am using 0.61.5 i am unable view any image. Above code help me thank you. – keshava Mar 24 '21 at 07:55
  • @Shreyas I have, since then, updated react-native to 0.63.*, but [applying a patch with the changes mentioned in the answer](https://github.com/facebook/react-native/issues/29279#issuecomment-657284028) in `post-install` fixes the problem even in builds/archives. – Ivanka Todorova Sep 07 '21 at 05:52
13

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
pravchuk
  • 903
  • 10
  • 14
  • 1
    Hey, this one works for me. my app's react-native version is 0.61.4 – Lahiru Amarathunge Nov 05 '21 at 06:51
  • upgrading to a higher rn version will solve the issue, but if that's not the case as a quick fix, this solution is simple and better. (y) it's also better than patching the npm package, my react-native version is 62.2 while working on this – Mohammad ABS Jabed Dec 06 '21 at 06:51
0

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

Malik Haseeb
  • 471
  • 9
  • 20