i'm just finished a project in react-native. I was testing my app and i realized my app is being freezed a while after i launched it, both on iOS and Android. It's like, i can scroll through the contents of the screen but i can't press neither the pressables nor the navigation tabs at the bottom. I tried on both emulators and physical devices and the problem just keeps up.
The app is a coffee delivery app and it uses fetch api on every screen, so it uses a lot of state to store service data.
I couldn't solve the problem by scaning trough the similar issues on the internet. So i wanted to ask it here.
Is it a common problem ? How can i solve it ?
I've found out what was causing the "freeze" problem for me. Turns out i was using "setInterval" function to get the exact time at the moment for a specific reason and it was cycling with a period of 12 seconds.
This is the code i removed :
const timeInterval = setInterval(() => {
setDeliveryTimes(prev => {
const buffer = prev.map(timeObj => {
return {
...timeObj,
time: calculateDeliveryTime(timeObj.duration),
}
})
return [...buffer]
})
}, 12000)
When i opened the screen that runs the setInterval, it was still runing on the background even i did navigate to a different screen so i'm guessing this function causing some performence problems in react-native app. I don't know the exact reason deep down but when i removed it, the app maintained ok. If someone knows more deep about this, please care to make a comment to explain.
Related
I've deiced to reword the question after more hours of attempting hacks and fixes, with no end result. I am using the SCREENFULL npm for this.
This web application is a fullscreen interactive UI for a menu system used by employee's. I desired to either have the app launch into fullscreen upon loading OR detect if fullscreen to display prompt button to enable fullscreen and launch the app. Neither seem to be doing the job at all.
My attempts included:
goFullScreen (){
screenfull.request();
}
<button onClick={(e) => this.goFullScreen()}> enable full screen </button>
works fine. Goes full screen. Now to detect to display the app (loggin page, menu etc) or only the fullscreen button (that way the app can only be view in fullscreen).
screenfull.on('change', () => {
if (screenfull.isFullscreen) {
console.log("it freaken works");
return (
<h1> hi </h1>
)
} else if (!screenfull.isFullscreen) {
// display button to go fullscreen
}
});
Does not return the <h1> hi </hi> or any thing within return, but the console does log. Strange.
UPDATE:
I decided to try a DidComponentMount (along with javascript's "onLoad" events) :
componentDidMount () {
screenfull.request();
console.log("request happened");
}
Well, the request did happen, but the fullscreen did not enable. After debugging an error checking I get a webkitfullscreen error using the screen error detector included in the package.
I have no idea why this won't work, even so why this is so difficult.
Is there a work around for this, or am I just making this a lot harder then it should be?
This web app is only running on a Android tablet and google chrome browser.
The solution was simple. https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
It was with the manifest json to get my exact desired result.
I have a chrome extension that is causing user's laptops to slow to a crawl and realllllly use a lot of CPU (or at least causes their fan to go nuts).
I'm wondering how I can profile this, or see what's going on.
Some theories to help guide:
extension needs (unfortunately) to do some polling. I won't go into why this is the case, but trust me that it does.
What this ends up looking like, however, is:
setTimeout(function() {
// our inner scrolling loop
scrollingTimerId = setInterval(function() {
// did the user change the URL?
if (!isModalUrl(window.location.href)) {
clearInterval(scrollingTimerId);
}
// scroll!
doScroll();
}, SCROLL_DELAY);
// our loop to check if we're done
isDoneTimerId = setInterval(function() {
...
}, OTHER_DELAY);
}, TIMEOUT_DELAY);
Perhaps there is some failture to cancel setInterval or something that's causing the usage to increase over time?
extension also sends messages to ALL tabs on certain events. Could this be an issue with multiple Chrome windows open?
Trying to hunt down what performance issues it could be, and also where to look. Perhaps there is a good tool I don't know about in the Chrome dev tools inspector?
I installed the IoT XDK and loaded the blink example. The LED on pin 13 blinks! Great! I changed the interval from 1000ms to 100ms and to 3000ms and reuploaded to the Edison. No change. Light still blinks every second same as before. I even changed the app version info to try to force it to see the update.
I must be missing something obvious.
I've had several, similar, happenings! What I've done since is get into the routine of:
+ Stopping the app (the far right icon, the one you click to run the app)
+ Then click the stop app icon (next to it on the left)
+ Save my file
+ Click upload
+ Click run
Going through this process I never run into the issue you describe. When I do forget a step, I can often replicate what you experience!
Good luck!
The latest software update appears to have solved my issue. I can now vary the duration of the LED pause in the sample code and successfully update my app on the Edison.
I own an AngularJS app (angular v1.2.19) that I converted into iOS app using Cordova/PhoneGap.
However, it seems that the resolve property (see below) is taking into account but the associated page is displayed BEFORE the promise is resolved, leading to some ugly flickering.
Flickering in this case is: the form only displays fieldset and legend + buttons for 1 second, and then the whole data (input etc..) are displayed.
$routeProvider
.when('/page/meetings/123/edit',
{
templateUrl: "edit.html",
controller: "EditCtrl"
resolve: {
activities: ['Activities', function (Activities) {
return Activities.getList().then(function(response) {
return response.data;
});
}]
}
}
}
)
//page is displayed before activities are fully loaded.
Does a known bug regarding resolve property exist with Cordova? Or a configuration I should add?
It works well in a browser, but in the iOS app, I don't manage to make Angular resolve the promise before the page is rendered.
I don't figure out why this only occurs with iOS app and not web browser.
When I remove the resolve section, the page displays without flickering, although I don't have activities populated.
Maybe just a performance reason? Indeed, I tested the path /page/meetings/123/edit in my Ipad 3 (named "new Ipad") from a page where there isn't a lot of content, and it shows the page AFTER promises are resolved => fine.
The strange thing is that when I put the same link on a heavy page..listing several items, the targeted page (edit page) still flickers, displaying no form for about 1 second and then displays the whole.
To make things more strange, the exact same code on Iphone 4s involve flickers no matter where is the /page/meetings/123/edit link (heavy or light page).
On the contrary, web mobile version (Safari) on the iPhone 4s and Ipad is perfect. Really don't figure out why.
After some...hours of search, I found the reason.
In the edit page's controller, I initially did this:
$anchorScroll(); //scrolling to the top
It seems that it conflicts with the display of elements.
That explains why when I come from a page that needed scrolling (like 20 items in the list page), the conflict appears.
So the solution I choose is to do this, in order to delay the scrolling with the most minimal amount of time:
$timeout(
function(){
$anchorScroll();
},
0);
The whole now works well with PhoneGap/Cordova for iOS app.
I am developing phonegap app. And using camera in it. It was working few days ago. I did many changes in last few days and now camera is not working correctly. It opens camera but when I take photo , then from camera app. when I press OK, it restart app.
I am not understanding how it is doing so. I actually unable to understand whether it can restart from my phonegap app. JS code or it only can be restart from android Java code.
I am using this code for camera:
function takePhoto() {
navigator.camera.getPicture(onCameraPicSuccess, onCameraPicFail, {quality: 50,
destinationType: Camera.DestinationType.FILE_URI
});
function onCameraPicSuccess(imageURI) {
alert("coming here in pic success");
var img = '<div style="padding:4px; margin:10px; border: solid 2px #666;float: left; width:30%"><img src="' + imageURI + '" width="100%" /></div>';
$('#images_area').append(img);
}
function onCameraPicFail(message) {
alert('Failed because: ' + message);
}
So any idea, that why app. will restart on using camera app. through above code? My JS code don't have splash screen but my Java code have that. So after pressing OK button of camera, I can see app. restarted with back button binding and menu button binding not working for a while.
So not sure what is happening. If you guys have any such experience or any idea then feel free to share.
If there is some thing more I need to tell. Then let me know.
After doing some more search on stackoverflow.com, I came to know that issue is of android, as android kill the app. in background if it have less memory. So need to free the memory e.t.c. But what I noticed is that application was working fine when I was using JQuery Mobile Forms. But after I changed it to custom, this camera problem appear. So if this is memory related problem, then why it occured on removing jquery mobile forms and doing custom work. In fact, now application is even more smooth with custom work. So I am confused that whether it is memory related problem or something else? And how to tackle this type of app. developed in phonegap.
The phonegap camera API invokes the camera application when you use
navigator.camera.getPicture
Please read it here - http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html#Camera
This pushes your application into the background and that can lead to your app being killed if there isn't enough memory.
If you don't want your application to go into background while the camera is up, you need to use a foreground camera plugin. Take a look at it here
You might need to change it to suit your requirements.
It can be a memory related problem. You can increase the heap size of your application by setting android:largeHeap="true" in your application manifest file.
You shouldn't need to create a whole custom foreground camera, you just need to specify to the aggressive garbage collector that you want to retrieve the old intent instead of starting a new instance. Try setting a flag on the saved intent within the camera plugin:
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
See my post here: https://stackoverflow.com/a/29630548/2782404
Furthermore, increasing heap size and using singleTask/singleInstance didn't work for me
In android menifest file set the launchmode of the activity to "singleTask" or
"singleInstance".
May be your appliction launching the activity in multiple time.
see this link, it explains that this does not actually have to do with phonegap, but with the activities of android. He suggests using a plugin called Foreground Camera Plugin.
PhoneGap camera restarts the application