React Native Image not showing, How do i fix?

Question

I was wondering why my image is not showing. What I want is for my image to be in the background with my two buttons on the bottom, over the image. I am using react native, with the IDE 'Deco' for apps. Right now there is no image showing at all:

import React, { Component } from 'react';
import { Button,Alert, TouchableOpacity,Image, Dimensions } from 'react-native'

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class Project extends Component {
  render() {
    return (
      <View style={{backgroundColor: '#375D81', flex: 1}}>
        <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006_edit_1.jpg'}}/>
         <View style = {styles.container}>
           <TouchableOpacity style = {styles.buttonText1} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style={styles.text}> 
              Button 1
             </Text>
           </TouchableOpacity>
           
           <TouchableOpacity style = {styles.buttonText2} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style= {styles.text}>
              Button 2
             </Text>
           </TouchableOpacity>
           
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 main: {
   backgroundColor: 'blue'
 },
 text: {
 alignItems : 'center'
               
 },
 container: {
  alignItems: 'center',
  flex: 1,
 },
  buttonText1: {
      borderWidth: 1,
      padding: 25,      
      borderColor: 'black',
      backgroundColor: '#C4D7ED',
      alignItems: 'center',
      position: 'absolute',
      bottom: 0,
      width: Dimensions.get('window').width / 2,
      height: Dimensions.get('window').height / 8,
      left: 0,
   },
    buttonText2: {
      borderWidth: 1,
      padding: 25,      
      borderColor: 'black',
      backgroundColor: '#C4D7ED',
      alignItems: 'center',
      position: 'absolute',
      bottom: 0,
      width: Dimensions.get('window').width / 2,
      height: Dimensions.get('window').height / 8,
      right: 0,
   }
});

AppRegistry.registerComponent('Project', () => Project);

https://facebook.github.io/react/img/logo_og.png returns a 404. could be why. — letsCode, Oct 31 '17 at 12:52
I tried with a different image, it still does not work, thank you though — Lucas Smith, Oct 31 '17 at 12:54
Try setting style property for the image. Something like this should make it show up: style={ resizeMode: 'contain', width: '100%', height: '100%' } — Waltari, Oct 31 '17 at 13:02

Haseeb A · Answer 1 · 2020-12-23T06:54:18.870

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.

Thanks for putting the version! – Sara Inés Calderón Feb 01 '21 at 19:17 — Sara Inés Calderón, Feb 01 '21 at 19:17
This worked for my with react-native 0-61.5, thank you! – Apperside Feb 21 '21 at 15:44 — Apperside, Feb 21 '21 at 15:44

score 49 · Accepted Answer · edited Nov 04 '19 at 11:37

49

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...

edited Nov 04 '19 at 11:37

Idan

3,604
1
28
33

answered Oct 31 '17 at 14:43

score 8 · Answer 3 · answered Sep 30 '20 at 12:44

8

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];
  }

answered Sep 30 '20 at 12:44

Soban Arshad

1,295
19
15

ios 14 support on Reactnative v.0.62.2 has this issue. – Mayur Baldha Oct 21 '20 at 09:03
i had the issue also with react-native v 0.61.5 but this solved it – Ahmed Wahba Oct 23 '20 at 13:19
I think its not react native versions, its IOS 14 that is causing this, hopefully next release of RN will fix this issue on it's own. – Soban Arshad Oct 27 '20 at 07:13

score 4 · Answer 4 · edited Nov 01 '17 at 12:41

4

You need to specify the dimensions:

  <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006_edit_1.jpg'}} style={{ resizeMode: 'cover', width: '100%', height: '100%' }}/>

edited Nov 01 '17 at 12:41

SiHa

7,830
13
34
43

answered Oct 31 '17 at 15:18

TheCodeTalker

685
6
14

Manoj Alwis · Answer 5 · 2022-01-26T04:32:41.753

This issue is related to react-native version and it can display the image after adding [super displayLayer:layer]; or upgrade react-native version.

go to node_module/react-native/Libraries/Image/RCTUIImageViewAnimated.m and add [super displayLayer:layer];

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

score 0 · Answer 6 · answered Jun 03 '22 at 05:21

0

I've faced this issue and this is what I've noticed.

Applying width and height directly does not work properly.

<Image src="https://picsum.photos/800/400" width={400} height={200}/>

Instead apply them inside style object. And this will work.

<Image src="https://picsum.photos/800/400" style={{width: 400, height: 200}}>

answered Jun 03 '22 at 05:21

djsdev

76
2
4

"src" is not the prop name. – Jim Aug 04 '23 at 22:57

score 0 · Answer 7 · answered Jul 15 '22 at 11:12

0

import {View, Image} from 'react-native'; 
...
...
<View style={{width: '100%', marginTop: 10'}}>     
<Image style={{width: 50, height: 50}}source={{uri: "link"}}/>
</View>

answered Jul 15 '22 at 11:12

Soumik Chakraborty

205
2
5

3

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Jul 17 '22 at 00:26

score 0 · Answer 8 · answered Feb 17 '23 at 09:50

in my case all the images and icon not show in IOS project i have an old react native(version is 0.62.2) project

so i added below code in podfile in last

end
 pre_install do |installer|
 find = "_currentFrame.CGImage;"
 replace = "_currentFrame.CGImage ;} else { [super displayLayer:layer];"
 op = `sed -ie "s/#{find}/#{replace}/" ../node_modules/react- 
 native/Libraries/Image/RCTUIImageViewAnimated.m`
end

Eni The Creator · Answer 9 · 2023-06-28T16:38:24.717

0

I fixed mine by replacing the 'width' and 'height' section from the styling with;

resizeMode: "cover"

see image here

Then you can adjust the size after you see image has displayed

edited Jun 28 '23 at 16:38

answered Jun 28 '23 at 16:31

Eni The Creator

1
3

score 0 · Answer 10 · answered Aug 17 '23 at 02:27

0

I think you need to use the require function.

Source= {require('imageaddress')}

answered Aug 17 '23 at 02:27

user22402420

1

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? **If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient.** Can you kindly [edit] your answer to offer an explanation? – Jeremy Caney Aug 20 '23 at 00:13

React Native Image not showing, How do i fix?

10 Answers10

Linked