React-native-router-flux: How to know when transition animation has ended

[badaz]

Version

Tell us which versions you are using:

• react-native-router-flux v3.30.1
• react-native v0.28.0

Everything is in the title : is it possible to know when the transition animation has ended in order to start calculating stuff after it for better UX ? (I'm having trouble using InterractionManager.runAfterInterractions, it is simply not working on Android)
Tx

[dwilt]

I'd definitely be interested in this as well. I've noticed major performance bottlenecks when data is trying to be rendered onto a scene that is still transitioning in. I have manual delays in my componentDidMount on the component that is being transitioned in so it will wait until the transition has finished to guarantee a smooth transition. Having a method on a component called onEnterComplete would be ideal - similar to how React and Ionic call their methods (componentDidMount, ionViewEnter):

class DetailPage extends Component {
  onEnterComplete() {
    // Scene entered successfully. Now fire off async calls
  }
}

<Scene component={DetailPage} />

or at the very least have a callback on the Scene component directly:

var enterCallback = () => {

}

<Scene onEnterComplete={enterCallback} component={DetailPage} />

[vonovak]

Try using the interactions manager as in the following link. Works for me on Android
https://github.com/facebook/react-native/issues/2248

[badaz]

As I said in my first message it's not working on Android, at least in 0.28, I'll try with a more recent version when I'm back from holidays. Anyway, when I wrap anything inside a runAfterInterractions the code is just never triggered. If you follow the link in the page you posted you'll see in the issues that someone is having the same pb with runAfterInterractions. After googling it I found someone who said it does not work in dev mode but works in release... well I don't really want to have to comment out every runAfterInterractions when I dev so I haven't tried it.

[dwilt]

@vonovak Interactions manager worked perfectly as a solution for me on iOS. But to @badaz 's point, I haven't tested on Android. Good example and understanding here:

https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Just make sure to include InteractionsManager in your import. It's missing in the example:

import { 
    InteractionsManager
} from 'react-native'

[badaz]

Yeah I imported it. Maybe a typo (like a missing 's' in InteractionsManager?) Maybe it comes from my code but I doubt it since my code works without it, I'll try in the boilerplate project when I'm back from holydays

[stereodenis]

componentDidMount() {
  InteractionManager.runAfterInteractions(() => {
    this.setState({ ready: true })
  })
}

[stereodenis]

@badaz closing issue?

[ghost]

Thanks for the tip, I only recently realized that runAfterInterractions did work but that it took a very long time before it actually ran the code after each react-native-router-flux transition, although nothing seems to be animating in the mean time. I have not investigated yet but I don't really play with animations in the rest of my code so I suspect react-native-router-flux to be doing some invisible animation stuff. However this is not the initial point of this issue, so yes, you can close it ! Thanks again

[carleryd]

I had the same experience @badasve
I wanted to delay loading my camera component(react-native-camera) on Android.
The switch to the tab was much smoother, but in total I would say it took at least 50% longer to get the camera up and running, so something is a bit off unfortunately... I would also guess it has to do with react-native-router-flux since I'm not working with any animation in my camera component.

[badaz]

@carleryd I found a not so elegant solution since then: now I'm using nextFrame https://github.com/corbt/next-frame which force renders a frame whenever you call it, so you can call it in loops that do heavy computing so as to not blocking the UI. Problem is it is async, complex and ugly if you do not use the async/await syntax so you have to rework your code in order to use it, and I don't really like having all those "await nextFrame()" bits in my code, but it is working for me so far.