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'}}
/>
Related
This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:
Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?
This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!
I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)
TLDR;
using default export with no name ALWAYS resulted in a full reload of the app without hot reload!
Details
So after a lot of months of pain, I accidentally found a strangely enough effect:
I usually write my react components in this syntax:
export default ({ ...props }) => {
...
};
and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!
after months of pain, accidentally i found out that changing the export to:
const Test = ({ ...props }) => {
...
};
export default Test;
completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!
From react-refresh-webpack-plugin troubleshoot section
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
There is an other way to obtain this weird behavior.
When you export a simple function:
//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};
from the entry file of your app (with typescript template expo init nameApp the file is App.tsx)
It will exactly produce a full reload of the app rather than a hot reload.
This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.
IDK why ios don't display the modification like android does..
But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?
TLDR;
During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."
Details
the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file
before
const module = require('some-module')
after
import module from 'some-module';
I'm trying to use react-native-camera#0.4.1 (with react-native#0.39.2) to create a QR code scanner. The relevant essentials of my render() method are:
<Camera
aspect={Camera.constants.Aspect.fill}
onBarCodeRead={(data) => console.log(data)}
barCodeTypes={['qr']}>
</Camera>
Without the barCodeTypes prop, everything works as expected. But once I include it, the view does not render, and I get the following error message:
*** -[AVCaptureMetadataOutput setMetadataObjectTypes:] Unsupported type found
- use -availableMetadataObjectTypes
I'm guessing that I just need to write my ['qr'] argument in some other and correct way, but I'm not able to find any information in the documentation.
Ok, so I found another post on Stack Overflow that helped me figure out the availableMetadataObjectTypes. So to fix my particular problem, I'll just be changing barCodeTypes={['qr']} to barCodeTypes={['org.iso.QRCode']}.
It should be changed to
barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
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!
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.
my app use appcache, when trigger history.back() in safari(Ios7), it dose not work. After remove appcache minifest, it works, I can console in 'statechange'.
This is due to a bug in Safari 7+ when using AppCache. Only known solution at this point is disabling AppCache.
See history.back() doesn't work in Safari on iOS
it is a terrible bug! I use this fix:
if (
(/\bSafari\//gi).test(window.navigator.userAgent) &&
(/\bVersion\/7/gi).test(window.navigator.userAgent)
) {
window.console.warn('removing appcache');
window.document.documentElement.removeAttribute('manifest');
}
I have some reports of back buttons still not working after this fix, but everywhere I tested it does work. I hope this helps!