CODEWITHSUNDEEP
react-native
Long Zhu W.
Long Zhu W.

Reputation: 33

Image not shown with in my project react native

I am starting React Native and working with Visual Studio Code.

Image Component not working, I did like this but background image not shown.

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Dimensions, Image} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import GLOBAL from '../../global';
import I18n from '../../i18n'

var { width, height } = Dimensions.get('window');

export default class EsseGroupScreen extends Component {

  render() {
    return(
      <View style = {styles.container}>
        {this.renderHeader()}
        <Image source={require('../../assets/esse_group_back.png')} style={styles.imgBack} />
      </View>
    )
  }

  renderHeader() {
    return(
        <View style={styles.header}>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  imgBack: {      
    flex: 1,
    alignSelf: 'stretch',
    width: width,
    height: height-50,
    resizeMode: 'contain'
  }
});

I tried many cases but can't find clear answer.

<Image source={require('../../assets/esse_group_back.png')} style={styles.imgBack} />

Above code is not working, who please help me.

My dependencies are following.

"dependencies": {
    "react": "^16.8.6",
    "react-native": "^0.60.0",
    "react-native-grid-view": "https://github.com/lucholaf/react-native-grid-view.git",
    "react-native-i18n": "^2.0.15",
    "react-native-numeric-input": "^1.8.0",
    "react-native-scalable-image": "https://github.com/ihor/react-native-scalable-image.git",
    "react-native-tabbar-bottom": "^1.0.4",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "https://github.com/Maxeh/react-navigation.git",
    "rn-viewpager": "https://github.com/zbtang/React-Native-ViewPager.git"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "^16.8.6"
  },

Upvotes: 2

Views: 1008

Answers (4)

Jin Yi
Jin Yi

Reputation: 59

The answer is simple.

You can use ImageBackground component instead of Image

<ImageBackground source={require('../../assets/esse_group_back.png')} style={styles.imgBack} />

Also import ImageBackground from react-native

import { View, StyleSheet, TouchableOpacity, Text, Dimensions, ImageBackground} from 'react-native';

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20765

Considering your folder structure like this,

--project
  --src folder
    --assets folder
      --esse_group_back.png file
    --Some folder
      --EsseGroupScreen.js file
    --App.js file
    --index.js file

You can do this,

<Image source={require('../assets/esse_group_back.png')} style={styles.imgBack} /> //If your folder stucture something else try to change path, here `..` means parent folder of file

Or more simplified,

import esse_group_back from '../assets/esse_group_back.png'; //If your folder stucture something else try to change path, here `..` means parent folder of file

<Image source={esse_group_back} style={styles.imgBack} />

Upvotes: 0

Kirtan Dudhat
Kirtan Dudhat

Reputation: 41

use the code 

import React, {Component} from 'react';
import {Dimensions,Image, StyleSheet, Text, View} from 'react-native';
var { width, height } = Dimensions.get('window');


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Image source={require('./assets/image/find.png')} style={styles.imgBack} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  imgBack: {
    tintColor:'red',
    alignSelf: 'stretch',
    width: width,
    height: height-50,
    resizeMode: 'contain'
  },
});

Upvotes: -1

Madhavi Jayasinghe
Madhavi Jayasinghe

Reputation: 596

The issue is with your path of image. You are giving an incorrect path to image source. I tried your code with my image folder and it works fine. Just check the image path and replace with correct path.

Upvotes: 1

Related Questions