New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unusuably slow transitions on Android #3049

Closed
kushal opened this Issue Sep 26, 2015 · 35 comments

Comments

Projects
None yet
@kushal
Contributor

kushal commented Sep 26, 2015

Even after applying the idea from #1953 I'm seeing transitions between two screens more or less lock up my device and the simulator in an in-between state for 2 or 3 seconds while JS FPS drops to -2. Is there anything I can be doing to better understand what's going on? One of the screens has multiple images and ScrollViews, but really isn't that complicated. This code runs great on iOS.

@kushal

This comment has been minimized.

Show comment
Hide comment
@kushal

kushal Sep 26, 2015

Contributor

(FWIW, the initial screen is also pretty slow in even showing the highlight indicating the touch registered.)

Contributor

kushal commented Sep 26, 2015

(FWIW, the initial screen is also pretty slow in even showing the highlight indicating the touch registered.)

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 26, 2015

Collaborator

Are you debugging in the Chrome debugger? Animations have been alright on JSC.

Collaborator

ide commented Sep 26, 2015

Are you debugging in the Chrome debugger? Animations have been alright on JSC.

@kushal

This comment has been minimized.

Show comment
Hide comment
@kushal

kushal Sep 26, 2015

Contributor

No, this is running a compiled bundle not attached to Chrome.

On Fri, Sep 25, 2015 at 7:11 PM James Ide notifications@github.com wrote:

Are you debugging in the Chrome debugger? Animations have been alright on
JSC.


Reply to this email directly or view it on GitHub
#3049 (comment)
.

Contributor

kushal commented Sep 26, 2015

No, this is running a compiled bundle not attached to Chrome.

On Fri, Sep 25, 2015 at 7:11 PM James Ide notifications@github.com wrote:

Are you debugging in the Chrome debugger? Animations have been alright on
JSC.


Reply to this email directly or view it on GitHub
#3049 (comment)
.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 26, 2015

Collaborator

Try ?dev=false which helps a lot. We've been testing with some older Android phones (Nexus 5) and have been getting OK animation performance.

Collaborator

ide commented Sep 26, 2015

Try ?dev=false which helps a lot. We've been testing with some older Android phones (Nexus 5) and have been getting OK animation performance.

@kushal

This comment has been minimized.

Show comment
Hide comment
@kushal

kushal Sep 26, 2015

Contributor

You're right, that's much better! It's a still a little slow, though, is
there hope of it getting better? I have a first gen moto x, but most apps
runs smoothly on it.

On Fri, Sep 25, 2015 at 7:36 PM James Ide notifications@github.com wrote:

Try ?dev=false which helps a lot. We've been testing with some older
Android phones (Nexus 5) and have been getting OK animation performance.


Reply to this email directly or view it on GitHub
#3049 (comment)
.

Contributor

kushal commented Sep 26, 2015

You're right, that's much better! It's a still a little slow, though, is
there hope of it getting better? I have a first gen moto x, but most apps
runs smoothly on it.

On Fri, Sep 25, 2015 at 7:36 PM James Ide notifications@github.com wrote:

Try ?dev=false which helps a lot. We've been testing with some older
Android phones (Nexus 5) and have been getting OK animation performance.


Reply to this email directly or view it on GitHub
#3049 (comment)
.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 26, 2015

Collaborator

There are longer-term plans to delegate some of the Animated code to the native layer, and there's one more level of the JIT compiler we may be able to turn on. The prop checks are also a big drain so there could be different tiers of dev mode. The animation demo on the UIExplorer doesn't run well on an iPod touch 5th gen / iPhone 4s either FWIW so we've been targeting mostly newer devices 1-2 yrs old.

Collaborator

ide commented Sep 26, 2015

There are longer-term plans to delegate some of the Animated code to the native layer, and there's one more level of the JIT compiler we may be able to turn on. The prop checks are also a big drain so there could be different tiers of dev mode. The animation demo on the UIExplorer doesn't run well on an iPod touch 5th gen / iPhone 4s either FWIW so we've been targeting mostly newer devices 1-2 yrs old.

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Sep 26, 2015

Collaborator

The lockups usually happen when with navigator screen transitions, as react is rendering the new screen while the animation is happening.

I worked around it by having intializing the new screen with empty data and showing only a spinner. So it doesn't have to render much.

Then the component is initialized with data using InteractionManager.runAfterInteraction, which defers it. The animations are pretty good when I use them this way.

I'm on a Moto G 3 and development mode is on.

Here is a link to the component - https://github.com/scrollback/io.scrollback.neighbor/blob/master/views/discussions-controller.js

It's all temporary code there, but the approach will be the same.

Collaborator

satya164 commented Sep 26, 2015

The lockups usually happen when with navigator screen transitions, as react is rendering the new screen while the animation is happening.

I worked around it by having intializing the new screen with empty data and showing only a spinner. So it doesn't have to render much.

Then the component is initialized with data using InteractionManager.runAfterInteraction, which defers it. The animations are pretty good when I use them this way.

I'm on a Moto G 3 and development mode is on.

Here is a link to the component - https://github.com/scrollback/io.scrollback.neighbor/blob/master/views/discussions-controller.js

It's all temporary code there, but the approach will be the same.

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Sep 26, 2015

Collaborator

@satya164 is spot on. Until we get Navigator transitions running on the main thread (probably not ready in the near future), this is the recommended practice - and even when that is done, you might want to still use this approach at least for some of your new scene.

Collaborator

brentvatne commented Sep 26, 2015

@satya164 is spot on. Until we get Navigator transitions running on the main thread (probably not ready in the near future), this is the recommended practice - and even when that is done, you might want to still use this approach at least for some of your new scene.

@astreet

This comment has been minimized.

Show comment
Hide comment
@astreet

astreet Sep 28, 2015

Contributor

You can also try using renderToHardwareTextureAndroid: true on the screens (top level Views within Navigator) you're navigating between (and false afterwards) in case it's the GPU being overloaded. Otherwise I'd need to see a systrace to figure out where the bottleneck is -- unfortunately, we haven't created docs for how to capture these yet, I'll create an issue for that.

Contributor

astreet commented Sep 28, 2015

You can also try using renderToHardwareTextureAndroid: true on the screens (top level Views within Navigator) you're navigating between (and false afterwards) in case it's the GPU being overloaded. Otherwise I'd need to see a systrace to figure out where the bottleneck is -- unfortunately, we haven't created docs for how to capture these yet, I'll create an issue for that.

@astreet astreet added the Android label Sep 28, 2015

@NishanthShankar

This comment has been minimized.

Show comment
Hide comment
@NishanthShankar

NishanthShankar Oct 7, 2015

Just adding to the conversation... Animations using react-tween-state are seamless in Android. Not sure if they can be used in Navigator though

Just adding to the conversation... Animations using react-tween-state are seamless in Android. Not sure if they can be used in Navigator though

@sankhadeeproy007

This comment has been minimized.

Show comment
Hide comment
@sankhadeeproy007

sankhadeeproy007 Oct 27, 2015

I'm having the same issues. The UI is crisp in general, but there's huge lag whenever there is a change of scene involved. I noticed no FPS drops, in the debugger. @kushal @satya164 @brentvatne any help?
I tried the InteractionManager method. Still no improvement.

I'm having the same issues. The UI is crisp in general, but there's huge lag whenever there is a change of scene involved. I noticed no FPS drops, in the debugger. @kushal @satya164 @brentvatne any help?
I tried the InteractionManager method. Still no improvement.

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Oct 27, 2015

Collaborator

@sankhadeeproy007 InteractionManager improved it for me a lot, and after turning off dev mode, there is no lag at all. Are you sure you're not doing any work in the JavaScript thread while the transition is happening?

Collaborator

satya164 commented Oct 27, 2015

@sankhadeeproy007 InteractionManager improved it for me a lot, and after turning off dev mode, there is no lag at all. Are you sure you're not doing any work in the JavaScript thread while the transition is happening?

@sankhadeeproy007

This comment has been minimized.

Show comment
Hide comment
@sankhadeeproy007

sankhadeeproy007 Oct 27, 2015

@satya164 Fixed. Actually there was nesting of Navigators in my earlier code. A slight refactor made things smooth. Both on the emulator as well as my device. Thanks.

@satya164 Fixed. Actually there was nesting of Navigators in my earlier code. A slight refactor made things smooth. Both on the emulator as well as my device. Thanks.

@wallacyyy

This comment has been minimized.

Show comment
Hide comment
@wallacyyy

wallacyyy Oct 30, 2015

Even using the InteractionManager, dev mode off, nearly no content on render and single Navigator I still have a 1sec lock between transitions on Android testing with a Nexus 5.
I know it sounds not significant but I think it is, takes a lot off the native user experience that is what react-native is all about.
I will downgrade to older version to get the other transitions (#3669), maybe other things that are not a fade can be better to smooth the problem visually.

Even using the InteractionManager, dev mode off, nearly no content on render and single Navigator I still have a 1sec lock between transitions on Android testing with a Nexus 5.
I know it sounds not significant but I think it is, takes a lot off the native user experience that is what react-native is all about.
I will downgrade to older version to get the other transitions (#3669), maybe other things that are not a fade can be better to smooth the problem visually.

@jonolock91

This comment has been minimized.

Show comment
Hide comment
@jonolock91

jonolock91 Nov 6, 2015

I'm having a similar problem with the transitions between scenes pretty much making my app unresponsive. On another note, I get a blank white screen on my Android emulator when I load it up, it's only when I debug in Chrome that my app actually displays anything, is this normal behaviour?

I'm having a similar problem with the transitions between scenes pretty much making my app unresponsive. On another note, I get a blank white screen on my Android emulator when I load it up, it's only when I debug in Chrome that my app actually displays anything, is this normal behaviour?

@astreet

This comment has been minimized.

Show comment
Hide comment
@astreet

astreet Nov 10, 2015

Contributor

Again, make sure you're running with dev mode off. The built in Navigator (if you're not nesting them ;) ) should work well. If not, I have just published https://facebook.github.io/react-native/docs/android-ui-performance.html which gives some steps for debugging android UI issues in react native.

Contributor

astreet commented Nov 10, 2015

Again, make sure you're running with dev mode off. The built in Navigator (if you're not nesting them ;) ) should work well. If not, I have just published https://facebook.github.io/react-native/docs/android-ui-performance.html which gives some steps for debugging android UI issues in react native.

@jonolock91

This comment has been minimized.

Show comment
Hide comment
@jonolock91

jonolock91 Nov 10, 2015

Thanks I'll have a read through that. How do I find the application logs file to turn off dev mode?

Thanks I'll have a read through that. How do I find the application logs file to turn off dev mode?

@astreet

This comment has been minimized.

Show comment
Hide comment
@astreet

astreet Nov 10, 2015

Contributor

Use adb logcat to print the application logs.

Contributor

astreet commented Nov 10, 2015

Use adb logcat to print the application logs.

@rockvic

This comment has been minimized.

Show comment
Hide comment

rockvic commented Nov 22, 2015

Mark...

@arathunku

This comment has been minimized.

Show comment
Hide comment
@arathunku

arathunku Jan 14, 2016

I've got similar problem and I've written more about it @ #4666 (comment)
tl;dr:

  • debug mode off
  • release build
  • navigator is used for transitions
  • navigator is not nested, it's basically just view -> navigator + toolbar -> wrapper view -> screen
  • changing view takes from 4 to 10 seconds or sometimes just hangs.
  • android
  • no heavy computations while I'm changing the view, basically just a request to API

Thank in advance, much appreciated! ❤️

I've got similar problem and I've written more about it @ #4666 (comment)
tl;dr:

  • debug mode off
  • release build
  • navigator is used for transitions
  • navigator is not nested, it's basically just view -> navigator + toolbar -> wrapper view -> screen
  • changing view takes from 4 to 10 seconds or sometimes just hangs.
  • android
  • no heavy computations while I'm changing the view, basically just a request to API

Thank in advance, much appreciated! ❤️

@tomauty

This comment has been minimized.

Show comment
Hide comment
@tomauty

tomauty Jan 14, 2016

Contributor

Anyone here using redux-logger should make sure it is disabled on dev=false builds. This slowed my transitions down a lot.

Contributor

tomauty commented Jan 14, 2016

Anyone here using redux-logger should make sure it is disabled on dev=false builds. This slowed my transitions down a lot.

@arathunku

This comment has been minimized.

Show comment
Hide comment
@arathunku

arathunku Jan 14, 2016

omg, that was it! THANK YOU @tomauty ❤️ ❤️ 😍 💃

One line...

const loggerMiddleware = createLogger({
  predicate: (getState, action) => __DEV__
});

omg, that was it! THANK YOU @tomauty ❤️ ❤️ 😍 💃

One line...

const loggerMiddleware = createLogger({
  predicate: (getState, action) => __DEV__
});
@tomauty

This comment has been minimized.

Show comment
Hide comment
@tomauty

tomauty Jan 14, 2016

Contributor

I was hoping that would fix it for someone :) There was some discussion about it in December, but nothing came of it. Either a memory issue due to not being able to GC logged objects, or something about the formatters it uses. In any case, cheers!

Contributor

tomauty commented Jan 14, 2016

I was hoping that would fix it for someone :) There was some discussion about it in December, but nothing came of it. Either a memory issue due to not being able to GC logged objects, or something about the formatters it uses. In any case, cheers!

@crockpotveggies

This comment has been minimized.

Show comment
Hide comment
@crockpotveggies

crockpotveggies Mar 8, 2016

@tomauty that also fixed issues on our end here, too. Nice thinking!

@tomauty that also fixed issues on our end here, too. Nice thinking!

@L3V147H4N

This comment has been minimized.

Show comment
Hide comment

@arathunku 👍 AWESOME

@egold

This comment has been minimized.

Show comment
Hide comment
@egold

egold Jun 16, 2016

@tomauty 🍻 this made my day

egold commented Jun 16, 2016

@tomauty 🍻 this made my day

@PierBover

This comment has been minimized.

Show comment
Hide comment
@PierBover

PierBover Jul 8, 2016

Are transition animations still being calculated on the JS thread for Android?

Apparently for iOS the animation were moved to the native thread in 0.29.0:

Add support for native animations on iOS (19e2388) - @buba447

But, the summary of that commit says:

This ports animations over to the native thread and performs them natively. A lot of this work has already been done on Android, but this PR enables a few animation nodes that Android doesn't yet support such as Transform, Multiplication, and Addition nodes.

Are transition animations still being calculated on the JS thread for Android?

Apparently for iOS the animation were moved to the native thread in 0.29.0:

Add support for native animations on iOS (19e2388) - @buba447

But, the summary of that commit says:

This ports animations over to the native thread and performs them natively. A lot of this work has already been done on Android, but this PR enables a few animation nodes that Android doesn't yet support such as Transform, Multiplication, and Addition nodes.

@mkonicek mkonicek added the Icebox label Oct 27, 2016

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Oct 27, 2016

Contributor

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/unusuably-slow-transitions-on-android

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

Contributor

mkonicek commented Oct 27, 2016

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/unusuably-slow-transitions-on-android

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

@mkonicek mkonicek closed this Oct 27, 2016

@Oxyaction

This comment has been minimized.

Show comment
Hide comment
@Oxyaction

Oxyaction Nov 4, 2016

Turning off the remote js debugging worked for me.

Turning off the remote js debugging worked for me.

@L3V147H4N

This comment has been minimized.

Show comment
Hide comment
@L3V147H4N

L3V147H4N Jan 15, 2017

Check you are not doing any unnecessary debugging. Youcan use the DEV flag to prevent debugging in production

Check you are not doing any unnecessary debugging. Youcan use the DEV flag to prevent debugging in production

@Jickelsen

This comment has been minimized.

Show comment
Hide comment
@Jickelsen

Jickelsen Feb 14, 2017

No idea why this is so hard to find but https://reactnavigation.org/ seems to be the new official navigator, which also uses native animations for transitions. Just started using it the other day but I'm happy with it so far.

No idea why this is so hard to find but https://reactnavigation.org/ seems to be the new official navigator, which also uses native animations for transitions. Just started using it the other day but I'm happy with it so far.

@joshuapinter

This comment has been minimized.

Show comment
Hide comment
@joshuapinter

joshuapinter Mar 13, 2017

Contributor

@Jickelsen The only thing holding me back from using this is passing initialProps to the Navigator and then to the first scene, which is super important for our workflow. I created an issue to address this here: react-navigation/react-navigation#634

Contributor

joshuapinter commented Mar 13, 2017

@Jickelsen The only thing holding me back from using this is passing initialProps to the Navigator and then to the first scene, which is super important for our workflow. I created an issue to address this here: react-navigation/react-navigation#634

@npomfret

This comment has been minimized.

Show comment
Hide comment
@npomfret

npomfret Apr 2, 2017

Contributor

I'm still getting mega-slow navigation transition animations on a physical android device running RN0.42.

Tried turing off dev mode, which did improve it slightly but not much. Any other suggestions?

Contributor

npomfret commented Apr 2, 2017

I'm still getting mega-slow navigation transition animations on a physical android device running RN0.42.

Tried turing off dev mode, which did improve it slightly but not much. Any other suggestions?

@vjtc0n

This comment has been minimized.

Show comment
Hide comment
@vjtc0n

vjtc0n Apr 17, 2017

@npomfret yes, this issue is really bigger than I thought.
My version is 0.43.3 and it's extremely slow as well as dropping fps while transition with animation.
I also tested with Navigator (from react-native), react-native-router-flux, wix/react-native-navigation and even facebook-community/react-navigation.
The issue's still there. :(

vjtc0n commented Apr 17, 2017

@npomfret yes, this issue is really bigger than I thought.
My version is 0.43.3 and it's extremely slow as well as dropping fps while transition with animation.
I also tested with Navigator (from react-native), react-native-router-flux, wix/react-native-navigation and even facebook-community/react-navigation.
The issue's still there. :(

@mehulmpt

This comment has been minimized.

Show comment
Hide comment
@mehulmpt

mehulmpt Apr 25, 2017

Just to add, I was running the app over wifi. I switched it to USB by running adb reverse tcp:8081 tcp:8081 and the navigator transitions work great now. Don't know how wifi was causing issue

Just to add, I was running the app over wifi. I switched it to USB by running adb reverse tcp:8081 tcp:8081 and the navigator transitions work great now. Don't know how wifi was causing issue

@facebook facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.