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.

Solution 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

Solution 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

Comments

[Raptor]

Can you show your codes? Is there only 1 image component in your screen? or it's contained in a scroll view?

[Luis Quiroga]

@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]

@Raptor <View> <TouchableOpacity onPress={() => this.setState({ imageViewIsVisible: true })}> <Image style={GeneralStyles.circleProfileImage} source={{ uri: this.props.source }} /> <ImageView images={[{ uri: this.props.source }]} imageIndex={0} visible={this.state.imageViewIsVisible} onRequestClose={() => this.setState({ imageViewIsVisible: false })} animationType="fade" /> </TouchableOpacity> </View>

[Luis Quiroga]

Something useful maybe could be if someone have a good guide of how to delete Pods with react-native

[Raptor]

Please edit your question to add your codes and format it properly. I cannot read your codes without formatting

[Luis Quiroga]

Thanks! react-native stuff with out thinking about the Xcode updates.

[Luis Quiroga]

Do I have to worry in the future for this small change?

[gyan deep]

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.

[Ivanka Todorova]

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.

[gyan deep]

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.

[Pablo Campina]

thank you so much @gyandeep works like a charm

[Blue Bot]

its image instead of images folder in path... Cant edit it as its less than 6 char. Other then that worked for me

[keshava]

I am using 0.61.5 i am unable view any image. Above code help me thank you.

[Shreyas]

@IvankaTodorova did you find any solution? I'm facing the same issue

[Ivanka Todorova]

@Shreyas I have, since then, updated react-native to 0.63.*, but applying a patch with the changes mentioned in the answer in post-install fixes the problem even in builds/archives.

[Lahiru Amarathunge]

Hey, this one works for me. my app's react-native version is 0.61.4

[Mohammad ABS Jabed]

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

[Saurabh Chavan]

Wooow Best Thank you :)