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

[fuechter]

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

[seanfuture]

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.

[seanfuture]

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

[seanfuture]

Other potentials ( unlikely related to image map after all ):

• https://github.com/RickWong/react-isomorphic-starterkit/issues/41
• https://github.com/gpbl/isomorphic500/issues/59

[sylvainbaronnet]

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

[sylvainbaronnet]

Restarting the packager fix it too

[dsibiski]

@facebook-github-bot answered

[facebook-github-bot]

Closing this issue as @dsibiski says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[seanfuture]

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.

[yashvekaria]

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.

[zipzit]

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?

[duzliang]

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

[ShashankaNataraj]

@duzliang Stopping and starting the server did get rid of the error message, but Im getting a blank screen now!

[jaredly]

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"

[tomchambers2]

Still having this issue. Happened in various occasions, most reliably when I open an image being used in the react native app with preview (hit space bar in finder) on OSX.

[felipecocco]

+1

[ColdHandz]

Switching react-native from 40 to 38 helped, i don't think this should have happen

[ColdHandz]

Another suggestion is to watchman watch-del-all and running the RN packager server with the --resetCache option.

[radelcom]

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

[fdb]

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.

[mrlords1]

I had this same error,
When i try stop n start server see this log:

myfile.png: Unexpected character '�' (1:0)

1 | �PNG
| ^
2 | 
3 |
4 | IHDR��X��d�IT pHYs.#.#
x�?vtEXtSoftwareAdobe Fireworks CS6輲�tEXtCreation Time11/14/166z�� IDATx��}w�dU��{��\��'�0PMRXP�"
+�JPW@u
soo I try user randon .PNG google image, and it work.

After I need re export my file.

[joeferraro]

@fdb I do not have spaces in my project path and still experience this issue.

[radelcom]

@fdb that seems to be the case for me as well.

[holgersindbaek]

The space in the path was the problem for me as well. I can't change that space, since it's controlled by Dropbox. Any other solution to this issue?

[cyclops24]

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]

This is my complete error:

[joshfriend]

@cyclops24 restart the packager. It doesn't seem to pick up new images automatically.

[cyclops24]

@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

[LoekL]

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!

[a1exlism]

I found a phenomenon that Every file renaming, adding, editing or deleting , I always should npm start and cmd rto receive file again.That's the way what I resolved this prob.

[brentvatne]

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

[jan-happy]

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

[woshi82]

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

[cyclops24]

@woshi82 I also have + in project parent name and after remove it everything goes OK.
Is it a bug or + is not acceptable for project folder name (maybe an undocumented limitation). I didn't find info or limitation about React-Native project name or path in docs.

[mitchjam]

I had a * in my folder path and after I removed it my error was gone.

[agersoncgps]

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.

[silkyland]

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

[idrisdopico]

Not using dropbox, don't have a + in the code. When restarting the terminal and simulator it works fine, but like others have said, this is a workaround. Not a fix.

Working on IOS.

[dcu-sharepoint]

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!

[spenghang]

Check that if your project path has a special symbol, like '+'.

[jhalborg]

Restart of packager works, but is a bit annoying :-)

[deathemperor]

Just got this on 0.44.2. my path has '-' not sure if it's the reason. Restarting the packager fixed.

[ridhoassuryadi]

I have a same problem, because my image's name has '-','+','_'. the solution is try react-native link or restart packager.

[zakster12]

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.

[SudoPlz]

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

[Phenek]

Hello there, I also get this issue!
"react-native run-android" work fine on Windows.
But I got " Unexpected character '?'" error on Mac OS when compile on IOS or Android Simulator.

I'm using Typescript with :
"devDependencies": {
"types/immutable": "^3.8.7",
"types/react": "^15.0.23",
"types/react-native": "^0.43.9",
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "16.0.0-alpha.6",
"shadow-flux": "^1.0.13"
}

Let me know if you find something, cause this issue turn me crazy..
regards,

[mr-bat]

I solved(!?) this problem by creating a copy of the image and replacing the original one, then renamed the image. This indeed is a weird bug, your photo at once becomes useless.

[ShubhamOjha]

Closing the server and restarting it works just fine.

[Rebaiahmed]

@sylvainbaronnet thanks it's working for me :+1:

[jan-happy]

@ShubhamOjha: I don't think this is really a solution. One nice thing about react native is the hot reloading feature. Which is made completely useless if you use images in your project that change during development.

[milon87]

faced the same problem and solved by renaming the .png to .jpg and it works.
I don't know what's wrong with the .png file extension.

[paranoidjk]

same problem here, any process?

[gblaender]

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

[cpojer]

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.

[danilags]

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

[songming43]

As @danilags says

• Try terminate your packager server
• rm -fr $TMPDIR/react-* clear the react-native cache
• rerun your xcode
  hope this helps you

[jgreen01su]

tl;dr Always use .png not .PNG

I had this same issue. Using an uppercase PNG file extension will also case this error.

[norby3]

foobar.JPG causes this really annoying error
foobar.jpg works

.. lotta people wasted a lot of time .. not a confidence booster