I've been using reanimated to implement some nice 60fps animations in our apps at work.
I'm on 0.60.3 with react Native, so I use the fast refresh functionality.
I have an issue where if I write anything that includes reanimated and therefore is executed on the UI thread and not the js, reloading doesn't work, whether it's fast-refresh or a full reload of the app. A full, stopping the app and building it again makes it work though.
Here's what happens:
Let's say I'm trying to animate the translateY of an Animated.View. I write the code and it works. If I make a change to anything in the code (even just saving the code again without changing anything) the animation completely stops working. If I swap my Animated.View to a normal View, save, reload, change it back to Animated.View, save reload again it works again until I make changes to reanimated code. Normal JS changes work though.
It's doing the same for both iOS and Android, whether I'm in the simulator or on device.
I'm trying to figure out what could be causing this. I'm assuming what's happening is metro updates the JS code but everything "over the bridge" doesn't get updated.
But who is it to blame for this? Is it metro, node, react Native or something else? Any response is appreciated, it's driving me crazy.
Related
I'm currently using https://github.com/react-native-webview/react-native-webview for a website to load within the app. The app is essentially a glorified website so everything in implemented on webapp.
Anyway, I've bunch of stylings changes based on window.onscroll function in webapp.
Obviously they work just fine when loaded from browser, whether it be mobile or desktop.
My problem is the react native web view doesn't respond to any of those functions from window.onscroll.
I tried to do something like injectJavaScript inside but there are many on scroll functions and that will basically mean i am replicating same thing from web to ReactNative just to inject JS. Even then, some variables are dynamic so injectJavaScript essentioally woudln't work unless that injected JS triggers on scroll function somehow.
How can I solve this issue?
TLDR; window.onscroll function on webview is not being triggered when loaded from webview.
It was a bug from google.
Android System WebView was having problem this few time but it was fixed on February 1. That's what I mean.
Kindly go on playstore and search for Android System WebView and update it and try again
My Angular 2 Application is slow to respond (1-5 seconds) to key input, button clicks, tabbing across inputs, etc. only when Chrome Developer Tools is open. Material 2 animations also become slow and choppy.
I've been developing this application for three months, and use Chrome DevTools every day. This issue cropped up seemingly overnight.
What I know:
I stashed all pending application changes to revert my application to a time when this was not a problem. The issue persisted.
Chrome DevTools doesn't seem to slow down any other application (ie. google inbox, google maps) in the same browser session.
Maddeningly, when I run the DevTools' Timeline "Record" to try to gain visibility into the issue, the issue disappears and the page reacts at normal speed again! I assume this is the best clue that I have, but I don't know the internal workings of DevTools well enough to know how "Timeline Record" changes things.
I've restarted Chrome and deleted all cached data.
Nothing of the sort happens in Firefox or IE when I open the Developer tools in those.
Any recommendations on where to look next would be greatly appreciated!
Final answer:
Remove all breakpoints
Even if they're not getting hit this fixed it for me and got performance back to normal.
May be a bigger issue if you have logging breakpoints - so try deleting those first if you're attached to your breakpoints.
Previous answers:
I came up with a workaround - although still not really figured out what is actually wrong.
I also discovered a bunch of tools I didn't even know existed that I'd skipped over before - they're under More tools.
Start by opening the Performance Monitor. This shows a nice CPU graph isolated for your Chrome tab - the Windows task manager is as useless as it ever was.
This is the behavior I got when choosing a date from mat-calendar. No other logic running - just selecting a date. I removed everything from app-component and just put a mat-calendar and it took ten seconds to change the date!
Other controls are generally fine. I could open dialogs, use combo boxes etc. and nice and fast. But selecting a date gave me this nonsense:
I tried emptying local storage, clearing cache, etc. and then I changed port number for my website. I simply changed dev.example.com:44300 to dev.example.com:44301 - in other words Chrome now thought it was a different website.
This is what it looked like after I switched port number.
I also got the same effect using a reverse proxy server - which put my local machine on the internet - so I could try to duplicate the issue from other machines. I could not.
So hope that helps someone - still no clue what's in the cache for this server that is having such a massive impact on performance. But for sure it's not just my code.
Here's a few other things to try:
Test with --aot flag
This didn't make a difference to me, but good to narrow things down.
Add some controls that don't do anything (as a control)
This way you can find if some specific action or control is causing the slow down. You should of course be able to toggle these instantly.
Just toggle them on and off, hide something.
<mat-radio-group>
<mat-radio-button [value]="false">
bloop
</mat-radio-button>
<mat-radio-button [value]="false">
bloop bloop
</mat-radio-button>
</mat-radio-group>
Enable Rendering debugging options
Make sure you aren't re-rendering the whole page constantly
The rendering option above will show this to some extent, but one thing I like to do is just add a random text box - type in it and if the text subsequently disappears you know that control has been rerendered.
<!-- yes, just a standard text box -->
<input type="text"/>
Just hide things with *ngIf="false"
Hide controls (yours and third party) and see if anything is causing problems.
For me I'm currently suspecting mat-calendar is causing issues - but I'm still thoroughly confused as to why enabling 'Record' makes the problem non existent.
I've fixed the issue, but I'll never know what was causing it. Likely a setting that I had accidentally changed.
I deleted the Chrome App and reinstalled, everything is back to normal. I'm going to leave this question open in case anyone else has this problem or wants to contribute.
It is normal for every web app to run slowly with Chrome dev tools opened.
Especially if you have inspect tab open, that it's like a new page opened in the same time + has animations on any block render.
We had this issue today at a colleagues workstation. Turned out that it was a chrome-extension (don't remember, something with "ghost" in its name). So maybe try out using guest-mode and check whether the issue still occurs. If it doesn't, successively reactivate the extensions to see which one is causing the problems. If it still occurs, follow the other proposed approaches.
I recently started uses Onsen-ui, and I am having a lot of fun with it.
I am using crosswalk for my Android application and this has gotten rid of almost every performance issue I've had. Pages scroll smoothly and everything is super responsive!
The only issue that remains is that there is a noticeable stutter between page changes. When I tap the button to go back (or to navigate forward to another page), the app will seem to 'pause' very briefly (similar to the 300ms click issue, but not the same because everything else is instantly responsive), then it will proceed to play the first one or two frames of the page transition animation, stutter again, and then complete the animation smoothly.
This is very jarring and really ruins the experience in an app where you navigate from page to page frequently!
I don't known what's causing the issue, but if I had to guess I would say that the first stutter is caused by AngularJs loading in the template data and the second is AngularJs actually processing the data once it is loaded (binding to all the properties - or whatever the correct term is! I'm new, forgive me :) ). Maybe the issue could be resolved by caching templates if angular supports such a thing?
Of course this is just a guess, love to hear if you guys had similar issues and would love a solution!
Note that this is tagged as Android + Crosswalk, but I don't mean to single out Android. The issue might be persistent in iOS too, but I don't have an iOS device to test on.
I am developing a reasonably large application on PhoneGap version 2.8 for Android. The issue that I can't seem to fix or even understand why it is happening is described as follows. When I start the application, initially a white screen is shown, which is completely fine since I undestand that it takes a moment or two to launch cordova. I have added a plugin to the project that puts the application to the background when user clicks "back" button in the "home" view. I can see that my app is still running in the task manager which is all fine and dandy. If I click on the app to bring it to foreground, app returns to foreground but views blank white screen for ~3 seconds, after which my view is rendered. I am wondering if there is any way I could speed up whatever the process is going on. I have noticed that it doesn't happen if my app isn't installed with APK but is run by IDE in debug mode (in which case it runs instantly just like any other normal app), but it still persists, if I click on the app icon in the apps menu.
I know that onDeviceReady event is fired way before the blank screen is gone. I know that some html is added into DOM tree. By the time white screen disappears even my ajax request is back with more data to be displayed on the screen. I know that whatever is, that effect is not because of my scripts being loaded in.
I suspect that this is effect is due to Phonegap taking a moment to restore it's Activity, or WebView to restore (if that makes sense).
I have tested that on different physical devices (Galaxy S2 and S3, HTC One X).
There is alot of optimization still to be done (memory is leaking somewhere, and there seems to be alot of performance issues with older phones eg. HTC One V).
I have tried to show Splashscreen while the white screen is up, but it is hard to estimate, when i should hide it (javascript seems to be running asynchroniously in relation to white screen).
Perhaps anyone would be kind enough to explain what is causing the white screen to be present and what could be done to resolve that issue.
Much obliged,
Erich
So I just started Working with Sencha Touch 2 and I am already running into some issues. I am currently working through the getting started tutorial but then I'm stuck because after I've made some changes and refresh the page, the loading screen just keeps loading non-stop. This prevents me from moving forward with the tutorial because not matter what I do, it just keeps loading. I tried creating a new project but then run into the same issue again. Can anyone help with this? I would really appreciate it.
Thanks!
I think this is because you must have something in your code that throws an error and therefore prevent the application from executing properly.
Maybe you should try to debug it with Firebug
Hope this helps