CODEWITHSUNDEEP
react-native
Sam Rao
Sam Rao

Reputation: 4551

React Native: Issue with Displaying Image

I am trying to display an image in my app, using the documentation provided by React-Native. the code is here.

The only file that is concerned is the app.js file which has the code. the image is in the same folder as the app.js file. Can someone help me figure out why this might not be working? the line of code in question is: 

 <Image source={require('./practicialogo.PNG')} />

I getting two errors: 1. Unable to resolve path to file (which i dont understand as the image is in the same folder as the file 2. ES Lint is giving me an unexpected require() (global require) error on that line where i call for the image.

Here is the entire file: 

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Button } from 'react-native-elements';

//import { Button } from './src/components/Button';
//import { CardSection } from './src/components/CardSection';


class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'WELCOME!'
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Image source={require('./practicialogo.PNG')} />
        <Text>Hello, Chat App!</Text>

        <Button
        raised
        backgroundColor="#3399ff"
        borderRadius="20"
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="CHAT WITH LUCY"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}


const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen }

});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Upvotes: 3

Views: 3497

Answers (4)

Rob
Rob

Reputation: 143

My solution to the ESLint Error is to require images at the top of the file and then reference them in JSX like this:

const myImage = require('myImage.png');

<Image
  source={myImage}
/>

Upvotes: 4

Jared Nelson
Jared Nelson

Reputation: 274

I wouldn't concern yourself too much with the eslint error. Eslint isn't God, and some things you must do in RN are going to make it angry. As for the unresolved path, I know you already tried .png lowercase extension. Can you rename the image to a .png lowercase extension and then try that again? Your code should work, so that's all I can think of. Maybe throw it in an 'image' folder and require it from that path. I know it's essentially the same as what you already have, but sometimes just getting an image to show helps, and then work backwards from there.

You want your code to look like this:

source={require('./practicialogo.png')} 
source={require('./image/practicialogo.png')} // or with it in an image folder

Extra curly braces and parenthesis might make the image unaccessible.

I hope that helps. Your code is correct, so that's all I can think of as to why it wouldn't find that image.

Upvotes: 2

DennisFrea
DennisFrea

Reputation: 1122

I tried requiring an image with uppercase extension and it's not working and throwing unable to resolve.

You may try to rename your practicialogo.PNG to practicialogo.png, then require('./practicialogo.png')

Upvotes: 0

digit
digit

Reputation: 4565

This is one of the rule from eslint to use require only on top as global reference

From eslint docs

In Node.js, module dependencies are included using the require() function, such as:

var fs = require("fs");

While require() may be called anywhere in code, some style guides prescribe that it should be called only in the top level of a module to make it easier to identify dependencies. For instance, it’s arguably harder to identify dependencies when they are deeply nested inside of functions and other statements:

However, you can disable this rule for just that dependency using the // eslint-disable-line global-require comment. For eg if you want to disable it in jsx:

  <View>
        {/* eslint-disable-line global-require */}
        <Image source={require('./practicialogo.PNG')} />
        <Text>Hello, Chat App!</Text>

Upvotes: 1

Related Questions