How come my image is not showing - react native

If this is happening in ios 14 or xcode 12, You have to upgrade react native to 0.63.2 There is one bug in react-native versions bellow that.

To patch the issue for RN versions less than 0.63.2 add this to the end of your Podfile .

pre_install do |installer|
  puts("Image fix for ios14: remove this when upgradeing to >= 0.63.3")
  find = "_currentFrame.CGImage;"
  replace = "_currentFrame.CGImage ;} else { [super displayLayer:layer];"
  op = `sed -ie "s/#{find}/#{replace}/" ../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m`
  puts("Image fix for ios14 done")
end

Then run pod install

Or if you want a package based solution you can use https://www.npmjs.com/package/react-native-fix-image . If you are using this it is recommended to add it as a npm postinstall script.

no need to edit node_modules.

make some width and height for the image..

 <Image
   style={{width: 50, height: 50}}
   source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
   resizeMode={'cover'} // cover or contain its upto you view look
   />

Try to undesrtand this...

Here i mentioned width and height... you can make it '100%' its upto you...

After updating IOS 14.x it is an issue being generated that image is not being shown. Here is some info against that.

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

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