Skip to content
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

Animated transitions using redux #37

Closed
Kureev opened this issue Jan 29, 2016 · 1 comment
Closed

Animated transitions using redux #37

Kureev opened this issue Jan 29, 2016 · 1 comment

Comments

@Kureev
Copy link

Kureev commented Jan 29, 2016

This issue is a follow-up for #29.

As It was mentioned in the #29, there is a pretty simple way to make this reference implementation working with a redux (see an issue above for details). But the one question left: animated transitions using redux.

I believe we all want to keep our components as stateless as possible, but for me it looks crazy to pipe a transition animation values thru the redux flow. I'm wondering if during this discussion we can find a nice solution for this.

Variants I can see so far:

  • Use a native code for the transition management. Simply put, it's about writing a native implementation for the animation queue. Every time we need to render a navigation route, we send a route component and a bunch of animation instructions to the native platform. A native platform builds an RCTView based on the passed component and perform a transition using an animation instructions we supplied.
    I think this variant can help us solving a performance issue we have with Navigator. But of course, on the other hand it means having a two native implementation for iOS and Android. If we go this way, we need to have a strong iOS and Android developers.
  • Use Animated library. That will be a bit crazy: just imagine sending thousands of actions for every transition 😃. Plus it doesn't solve a performance issue - if JS thread will be busy, it'll drop a FPS. But, this is the simplest possible implementation I can imagine.

If you have any ideas about this, please, let me know.

@Kureev Kureev closed this as completed Feb 3, 2016
@ericvicenti
Copy link
Owner

We use Animated right now for this, as you can see from NavigationAnimatedView, NavigationCard, and NavigationHeader.

The problem, as you say, is performance of running the animations on the JS thread. For now, that is a known problem. Animated is designed in such a way to support driving the animations from the main thread. Until that gets fixed on both platforms, we are still likely to drop frames. @kmagiera is already hacking on this for fire-and-forget animations on Android: facebook/react-native#5613

We still need to move to Animated.Event to make sure our gestures can happen on the main thread as well: #38

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants