CODEWITHSUNDEEP
androidiosimagereact-native
Lucas Smith
Lucas Smith

Reputation: 798

React Native Image not showing, How do i fix?

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);

Upvotes: 35

Views: 88166

Answers (11)

Vishnu Vardhan
Vishnu Vardhan

Reputation: 61

Adding key prop in the Image Component resolved my issue.

<Image key={imageUrl} source={{ uri:imageUrl }} />

I hope this helps :)

Upvotes: 0

user22402420
user22402420

Reputation: 1

I think you need to use the require function.

Source= {require('imageaddress')}

Upvotes: 0

Eni The Creator
Eni The Creator

Reputation: 1

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

Upvotes: 0

Deepak Singh
Deepak Singh

Reputation: 1145

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

enter image description here

Upvotes: 0

Soumik Chakraborty
Soumik Chakraborty

Reputation: 253

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

Upvotes: 0

djsdev
djsdev

Reputation: 136

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

Upvotes: 0

Manoj Alwis
Manoj Alwis

Reputation: 1426

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

Upvotes: 0

Haseeb A
Haseeb A

Reputation: 6112

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.

Upvotes: 53

Soban Arshad
Soban Arshad

Reputation: 1411

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

Upvotes: 8

user1731387
user1731387

Reputation:

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

Upvotes: 59

TheCodeTalker
TheCodeTalker

Reputation: 705

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%' }}/>

Upvotes: 4

Related Questions