CODEWITHSUNDEEP
react-native
Fuechter
Fuechter

Reputation: 1240

Error on load image on React-native: Unexpected character

I'm try display a image on a component on React-native, but I don't know why this error happens...

Example of code:

render () {
    let { convenience } = this.props
    return (
      <View style={{flexDirection: 'row', height: 50}}>
        <Text style={{marginRight: 30}}>{convenience.name}</Text>
        <Image source={require('./icons___favorito_ativo.png')} />
      </View>
    )
}

Printscreen:

enter image description here

Upvotes: 22

Views: 13257

Answers (8)

Carter
Carter

Reputation: 306

Seemingly, this error can also be caused by file extensions being in all caps. IMG_4585.PNG fails while IMG_4585.png works.

Make sure all your assets have the correct filename syntax. This wasn't the cause of the original problem but I'll leave it here incase it helps someone.

Upvotes: 1

afik
afik

Reputation: 1

I had the same problem. The solution that worked for me was to remove "_" on image's filename and finally hot reload your application.

Upvotes: -1

BiggerD
BiggerD

Reputation: 303

I had a spaces in my directory name. To fix it I just used another directory.

Changed

...\Desktop\develop (test)\MyProject...

to

...\Desktop\develop\MyProject...

Upvotes: 1

bmelnychuk
bmelnychuk

Reputation: 1100

I had similar error but just with android. And the problem was in ios suffix:

Filename was [email protected]

Then in code:

export const backButton = require('../../images/[email protected]');

When I remove the suffix in filename and in code ( to '../../images/[email protected]') error disappeared.

Upvotes: 0

Bati
Bati

Reputation: 41

That happened to me many times with images exported from sketch, it's weird.

I don't know why, but after exporting the same image from photoshop the error disappeared.

Upvotes: 2

zipzit
zipzit

Reputation: 3997

I know this is going sound pretty weird, but I'm going to add this comment in case anybody else gets here. I created a index.ios.js file by copying a simple example from something online at https://rnplay.org I kept getting "unexpected character" errors. I'm using Atom.io as my script tool. I was thinking perhaps I had an encoding issue with the wrong character set. I've confirmed I'm using UTF-8

So I was using the (left/right) arrow keys on my keyboard, and I notice the cursor would stop moving for two keyboard arrow pushes, right at the location identified in my Emulator Red Screen of Disaster. It was like there were two invisible characters in my code. I played with this for a pretty long time to confirm. I was able to highlight the "hidden" characters and delete them.

After deletion, the new code works great.

Bizarre. Not sure what was there. (Note: I copied the Slider Example Code from https://rnplay.org/apps/5FsfPA and I used a "Select All" and Command-C to do the copying and Command-V to paste... if anybody wants to repeat the experiment)

And yes, I know how silly this sounds. Perhaps others have hit the same issue? The verification test is pretty easy. Start at the location identified by the Red screen error message. Use the keyboard arrow and verify the cursor on your text moves for each key push.

Upvotes: 0

sean2078
sean2078

Reputation: 5440

Currently an open issue with React Native: https://github.com/facebook/react-native/issues/6691. Highly annoying - Reloading the app and/or restarting the package manager is, for now, the only solution I currently am aware of.

Upvotes: 11

Akshar Patel
Akshar Patel

Reputation: 5777

I too faced the same error. After a lot of trying, I restarted the packager, and the app picked up the image. So the solution is: Restart the packager.

Hope this helps.

Upvotes: 44

Related Questions