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

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:


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.


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.


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.


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...


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.


I had similar error but just with android.
And the problem was in ios suffix:
Filename was back-icon#4x.ios.png
Then in code:
export const backButton = require('../../images/back-icon#4x.ios.png');
When I remove the suffix in filename and in code ( to '../../images/back-icon#4x.png') error disappeared.


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

Related

how to display the url of a picture of an item from my sql database in react native?

i'm trying to display the picture of a shop in a single-shop page after clicking on said shop on the shop-list page.
once i clicked it takes the datas (from phpmyadmin) of that shop only and display the details. the name, adresse, phone number, etc all work but the picture.
i created a colomn image where i stock the url that leads to the picture located in my assets folder of the react folder.
but i tried just with url to see if the Image balise would work... AND IT WORKED :
<View><Image style={{resizeMode : 'cover'}} source= {require('../../../assets/picture1.jepg')} /></View>
so i then tried with an object called pharmaimages (it's basically just the url itself that i stocked in my database with the '' included) but it says invalid. i also tried with the propriety uri but it's even less clear.
<View><Image style={{resizeMode : 'cover'}} source= {require(pharmaimages)} /></View>
in my mind it makes perfect sense but it just doesn't work

Try storing it as require('../../../assets/image.jpeg') in the database. Fetch the data and then once you map it or whatever you do in your app, show it using the following code:
<View>
<Image style={{resizeMode : 'cover'}} source={image} />
</View>

This is one of the common issues, that most of developers got into.
The other answers may also right, But to be more precise I am adding my comments on this Question.
Actually, the require statement will never evaluate value we are passing as parameter, It will directly look for the path we are providing into it, also It is working in same way like we are importing other libraries or Components.
So if we provide dynamic value at run time with require we may fail to see expected behaviour.
Here, I am also attaching some important links which might help you to understand clearly.
Links:
React Native Official Image Doc
Same issue related thread on Stackoverflow
WORKAROUND
To go with workaround for this kind of situation you can directly store your file paths with require function in your data storage.
for ex.
Instead of storing path like '../../../abc/def.png'
Store value as require('../../../abc/def.png')

react-native-youtube: App crashes after switching to another screen and back

Please, help me to solve the proplem with app crash. I use react-native-youtube and everything works as expected except of one moment: after navigating to another screen and returning back - the app crashes without eny error in logs. Screens are placed in different stacks (doesn't sure if it means something).
Does anyone know what can be the reason of such error?

This is a WebView library issue and the fix is to set its opacity to 0.99.
<YoutubePlayer
play={false}
videoId={videoId}
webViewStyle={{opacity: 0.99}}. <==== add this
/>

<YoutubePlayer
play={false}
videoId={videoId}
resumePlayAndroid={false} <-- this helps (back crash)
/>

Unfortunately none of the above worked for me with react-navigation v6 but I've found a workaround.
To webViewProps, you can pass androidLayerType which has 3 possible values:
none (no video is rendered)
software (I also got no video on test device)
hardware (this setting is actually rendering the video layer but also causing the crash)
If you first pass software and then switch it to hardware as soon as the video is ready for rendering then there is no crash anymore.
const [isReadyForRender, setIsReadyForRender] = useState(false);
function onReady() {
setIsReadyForRender(true)
}
<YoutubePlayer
height={height}
play={playing}
videoId={videoId}
onReady={onReady}
webViewStyle={{opacity: 0.99, display: isReadyForRender ? 'flex' : 'none'}}
webViewProps={{androidLayerType: isReadyForRender ? 'hardware' : 'software'}}
/>

Get rid of "Remote debugger is in a background tab" warning in React Native

I've started a new React Native project and I keep getting the following warning:
Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).
It's a bit annoying so I wanna know how I can get rid of it? I'm running the debugger in Chrome and I moved it to a seperate window but it did not help.

If you have the Maintain Priority checkbox in the debugger window, try enabling it before you jump to any of the solutions below.
To get rid of the warning in your whole project add the following to your outermost Javascript file (most of the time that's index.js for React Native)
for react-native v0.63+:
Use LogBox:
https://reactnative.dev/docs/debugging#logbox
LogBox.ignoreLogs(['Remote debugger']);
for react-native v0.57 - v0.62:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);
Reference this from the official React Native docs:
https://facebook.github.io/react-native/docs/debugging.html
react-native v0.56 or below:
Add the following early on in your code:
console.ignoredYellowBox = ['Remote debugger'];
Easy, simple and specific to that error. Works for me. Can substitute for any text you want.

this solution is work for me
open/move http://localhost:8081/debugger-ui (default path for remote debugging) on the separate window
maybe that could help :)

You can use React Native Debugger available at https://github.com/jhen0409/react-native-debugger It is a standalone app for debugging React Native apps during development.

Move http://localhost:*****/debugger-ui on the separate window.
Restart Remote JS Debugging.

For me warning went away by checking Maintain Priority Checkbox!

It is because of number of tabs are opened in the browser with React Native Remote Debugger UI tab. I also faced the same issue.
To overcome this warning message you can use any one method from the following:
Open an incognito tab then paste http://localhost:8081/debugger-ui on address bar and press ENTER. Finally reload the app (Command+R).
Close all the tabs in the browser. Keep only 1 tab opened then hit http://locahost:8081/debugger-ui then reload the app (Command+R).

As mentioned by #jakeforaker in one of the comment. The warning went away by simply opening the remote debugger in a separate window instead of a tab in your existing window of your browser (you have to reload your simulator though).
As the warning is saying keeping the remote debugger in the same window as other tabs
may cause apps to perform slowly
So i think simply suppressing warning as mentioned by #kjonsson:- console.ignoredYellowBox = ['Remote debugger']; doesnt seem to be best solution.

Since this commit in March 2017, you can enable the Maintain Priority checkbox. When enabled, it silently plays a base64-encoded .wav file to prevent the debugger's browser tab from entering low-power mode, which can affect websocket performance. This will effectively prevent the warning you describe.

This issue was resolved when I closed all open Chrome windows and started the Remove Debugging again. I had previously had open Chrome windows, so it 'seems' that having them open kills performance.

I think the accepted answer is no longer accurate (at least for React Native v0.57+).
The correct code is now:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);
Reference this from the official React Native docs:
https://facebook.github.io/react-native/docs/debugging.html

I am on Macbook. I fixed this issue by bringing the Debugger window on main desktop, rather than on having it on separate desktop which it thinks is in "Background".

I had the same issue pop up yesterday. Googling it led to this Stack Overflow post. In one of the response (by adriansprod), he suggested:
Chrome debugger in it's own window fixes. But annoying problem
It is likely that your React Native debugger is not in its own Chrome browser window but in a Chrome browser tab. Pulling it out as its own window, as adriansprod suggest, fixed this for me.

The (very annoying) error message is handled by debuggerWorker.js, which sadly doesn't include any configuration options to turn off the message. So for the time being there are no ways you can configure your application to disable the message.
The related code is outlined below (original licence applies):
var visibilityState;
var showVisibilityWarning = (function() {
var hasWarned = false;
return function() {
// Wait until `YellowBox` gets initialized before displaying the warning.
if (hasWarned || console.warn.toString().includes('[native code]')) {
return;
}
hasWarned = true;
console.warn(
'Remote debugger is in a background tab which may cause apps to ' +
'perform slowly. Fix this by foregrounding the tab (or opening it in ' +
'a separate window).'
);
};
})();
As you see, no configuration options are used, the whole thing is scoped off locally (see the above repo link for further details).

I also have faced with same issue about one week ago and finally i have found solution that works excelent for me
It called reactotron, you can find it here - https://github.com/reactotron/reactotron and you can use it to:
* view your application state
* show API requests & responses
* perform quick performance benchmarks
* subscribe to parts of your application state
* display messages similar to console.log
* track global errors with source-mapped stack traces including saga stack traces!
* dispatch actions like a government-run mind control experiment
* hot swap your app's state
* track your sagas
I hope my post was helpful and you never will faced with this tedious warning .
Good luck

I use this in index.js
if (__DEV__) {
console.ignoredYellowBox = [
'Remote debugger',
'Warning: isMounted… is deprecated',
'Module RCTImageLoader'
];
}

I had minimised the "http://localhost:8081/debugger-ui/" window. Just opening it up (un minimising), and reloading the app removed the warning.

there might be chances that Another debugger is already connected to packager.
so close your terminal and debugger google chrome.
if you are using visual studio's package manger then don't start package manager by Mac/other os terminal command.
so close all terminal and stop on going package manger and google chrome debugger.
start the process again.

Similar to Akshay Vijay Jain, mine went away by ticking this box!

cefpython3 (cefwx example2) iCCP: known incorrect sRGB profile

How do i fix or ignore this warning popup? The example works fine, but this warning popup keeps showing. I looked around for a solution and image magic seems to be the fix. However, there are no images causing this problem in the sample code. I'm assuming it is what is being loaded by the browser. Can someone help me solve this problem please?

I can confirm this issue with wx.version=3.0.2.0 msw (classic) and cefpython 31.2. The navigation bar in this example loads three buttons (back, forward, reload) from this directory: c:\Python27\Lib\site-packages\cefpython3\wx\images:
Arrow Left.png
Arrow Right.png
Button Load.png
These cause the "iCCP: known incorrect sRGB profile" error.
Solution: In the c:\Python27\Lib\site-packages\cefpython3\examples\wx\ directory there are three images (back.png, forward.png, reload_page.png). Replace the problematic images with these by renaming them (back.png to Arrow Left.png etc) and copying to the c:\Python27\Lib\site-packages\cefpython3\wx\images directory.
Created Issue #221 to fix this.
If using wx 2.9/3.x you might also encounter text input issue. The cefpython 31.2 release was tested with wx 2.8 only.

Ported OSX Obj-C/CG Screenshot Code to js-ctypes - crash on final line

I ported some objective-c/CoreGraphics code that takes a screenshot of multiple monitors but it's not working. The jsctypes guys won't be able to help because the section is just me answering questions lol
The objc/cg code is from here: https://stackoverflow.com/a/28247749/1828637
My jsctypes type/struct/declares are here: https://github.com/Noitidart/NativeShot/blob/mac-troubleshooting/modules/ostypes_mac.jsm
The jsctypes port is here: https://github.com/Noitidart/NativeShot/blob/mac-troubleshooting/modules/workers/MainWorker.js#L443-656
And the last line is line 643 which causes the crash:
var rez_writeToFile = ostypes.API('objc_msgSend')(data, ostypes.HELPER.sel('writeTofile:atomically:'), myNSStrings.get(OS.Path.join(OS.Constants.Path.desktopDir, 'full_ss.png')), ostypes.CONST.YES);
This coincides with the objectivec of
[data writeToFile:#"/tmp/screenshot.png" atomically:YES];
except i changed path to ...desktop/...png
I wrote to sepearte gists, to align the lines in text diff software to make sure I did everything.
Here is objc/cg: https://gist.github.com/Noitidart/8affcd8bee60d22dcb52
and here is jsctypes: https://gist.github.com/Noitidart/3d4a4e8df625dbea8cc1
I dont think i missed anything i dont know why it crashes on that final line
Do any of the ObjC/CG people see any type definition that is wrong or something that I missed (for example the ObjC code uses compound statments I'm not sure I understood/translated them correctly in the port).

Wowww so after struggling for like some hours then posting this I realize it right away haha
Casing typo in selector!! I had writeTofile:atomically instead of writeToFile:atomically!
If anyone would like to test this out, it's a simple firefox addon test case.
Install an addon that allows installing addons from github repos from here: https://addons.mozilla.org/en-US/firefox/addon/github-extension-installer/
Go to commit on this branch that works here: https://github.com/Noitidart/NativeShot/tree/f5f2e8606d3c5c657e901239d3ceb8c8c79a4494
Then click the "Add to Firefox" button at bottom right, below the "Download Zip" button
Click on the toolbar button icon that gets added to firefox, as seen in this screenshot: http://i.imgur.com/n7lSxje.png
Check desktop you now have a single png file with a screenshot of all the monitors, huge props to #KenThomas!