react-native: Error on load image on React-native: Unexpected character

react-native-cli: 0.1.10 react-native: 0.22.2 SO Mobile: Android SO: Mac

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 50
Comments: 57 (5 by maintainers)

Most upvoted comments

Restarting the packager fix it too

+437

sylvainbaronnet on Mar 29, 2016

the packager should not require this though – this is a bug, and even though there’s a workaround, it should be fixed. this isn’t a SO type question, it’s a “please fix the packager”

+54

jaredly on Nov 23, 2016

FYI - StackOverflow link: http://stackoverflow.com/questions/36252381/error-on-load-image-on-react-native-unexpected-character/36289632#36289632 … Don’t believe this issue should have been closed as the above mentioned “fixes” aren’t really fixes - Instead they’re workarounds. Error still comes up often and a full restart of the packager is needed. Most definitely a prevalent and serious bug in the packager. Taken a brief look, but packager code doesn’t immediately reveal the cause although my suspicion is that Node.js is trying to process the file / file change as an asset.

+43

seanfuture on Mar 30, 2016

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.

+20

yashvekaria on Apr 15, 2016

stop the server and execute react-native start again will resolve this problem

+13

duzliang on Aug 26, 2016

Get the same error but only when overwriting an image already loaded and cmd-r is pressed. To resolve the issue temporarily it seems the image must be re-exported / overwritten and then a 2nd cmd-r to reload results in clearing the error message. Happens regularly at the moment for myself at least. Haven’t had time to research further.

+12

seanfuture on Mar 28, 2016

I have this issue as well. Turns out it is because I have spaces in the project path:

This works: /Users/fdb/Desktop/myproject/icons/settings.png
This doesn’t: /Users/fdb/Dropbox (Personal)/myproject/icons/settings.png

Running watchman watch-del-all has no effect — only moving to a path without spaces does.

fdb on Feb 21, 2017

The original topic of this issue is the “Unexpected character” bug. It always occurs when an image file is added or changed.

jan-happy on Mar 16, 2017

started seeing this today after updating to RN v0.40.0. Tried all the workarounds mentioned in this thread but no luck 😞

radelcom on Feb 2, 2017

Seems related to image map as noted here in this issue https://github.com/airbnb/enzyme/issues/253

seanfuture on Mar 29, 2016

This is fixed for the next release of react-native, where we have many HMR improvements. cc @grabbou can tell you when that goes out but in your current version of react-native it isn’t magically going to be fixed from one minute to the next.

cpojer on Sep 1, 2017

Hi guys, I also want to create simple hello word based on this: https://facebook.github.io/react-native/docs/getting-started.html and I faced on this red error:

"node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/assets/back-icon.png doesn't exist"

Can you help me to fix this? I worked with React-Native later without any issue but after install new version this error appear on any app (also a simple hello world)

cyclops24 on Mar 4, 2017

Same problem, fixed by re-exporting image as @seanfuture said

sylvainbaronnet on Mar 29, 2016

as suggested by many here; restarted the entire process environment and now everything works. However, this is a BUG that NEEDS FIXING without any workarounds if this is going to make it to the real world. Going to SO with a question like this brings out the arrogant admins where they take GREAT pleasure telling you how to ask intelligent questions and what is an intelligent question is. To them, this IS NOT and intelligent question so no answer is given. I speak from frustrating experiences with SO, so I’ve learned to read, not speak.

The problem with this type of bug is that when you’re deep in the dev cycle and you get this bug, some of us forget about the bug and end up wasting an enormous amount of time troubleshooting. when it happens more that once, it makes you feel like an idiot for NOT remembering what the solution/workaround is! BAD!

dcu-sharepoint on May 8, 2017

Yeah， there is a special symbol + in the name of my project’s parent folder .
I just removed it, everything goes ok.

woshi82 on Mar 29, 2017

Same problem, but nothing worked. Killed and restarted the packager, replaced the image… Same unexpected character red screen. Really frustrating… Newbie dev here 😃

gblaender on Sep 1, 2017

I have very easy fix for the problem that works perfectly for me. I remove the problematic image from the assets folder and add it again. And the red screen is gone. Just drag & drop. Restart is not needed.

zakster12 on Jun 15, 2017

I have no special chaecters in my path and it happens to me any time I make a change to the image and re-save it.

agersoncgps on Apr 30, 2017

I’ve confirmed that this occurs when a path has parens, which is why people using Dropbox in this thread have this issue – Dropbox (Personal) is part of the path. Spaces are working fine. cc @mkonicek @cpojer

brentvatne on Mar 16, 2017

Here’s how you restart packager: https://github.com/drapanjanas/re-natal/issues/56

I still don’t get it to work though, re-starting packager nor path name without spaces fix it.

Edit: restarted laptop, put folder outside of dropbox and seems to be working!

LoekL on Mar 5, 2017

Try terminate your terminal server and react-native run-android / ios 🗡

danilags on Sep 11, 2017

Removing spaces and parenthesis from my path fixed that issue for me too.

SudoPlz on Jun 17, 2017

This work for me just type “react-native link” in terminal The reason is because you create new assets folder in your project and react-native may not know it

sorry for my bad English

silkyland on May 1, 2017

@joshfriend how restart packager? It’s a simple hello world without any image: I just run this command:

react-native init AwesomeProject
cd AwesomeProject
sudo react-native start
sudo react-native run-android

Exactly based on https://facebook.github.io/react-native/docs/getting-started.html

cyclops24 on Mar 4, 2017

This is my complete error: photo_2017-03-04_20-51-18

cyclops24 on Mar 4, 2017

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 sample from an internet example (actually something 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 roadbump?

zipzit on Apr 23, 2016