React-Native Animated.spring callback is being delay

Question

I am setting a simple layout on my react-native app with a list of products in which on can click and open a booking flow. When you click on a product, the whole app is sliding to the left, and the product page is sliding from the right to the left.

When I click back from the product page, I am sliding back the app and the product to the right. But because the product page is part of the booking flow, i am suppose to unmount the BookingFlow component by setting a state to false.

Problem is there is a delay in the callback of the animation so it takes 400ms for the BookingFlow component to be unmounted.

I use the callback from Animated.parallel in order to do so:

closeProduct () {
  Animated.parallel([
    Animated.spring(this.props.translateXApp, {
      toValue: 0,
      duration: 140,
      bounciness: 0,
      speed: 14,
      easing: Easing.ease,
      useNativeDriver: true
    }),
    Animated.spring(this.translateXProduct, {
      toValue: width,
      duration: 140,
      bounciness: 0,
      speed: 14,
      easing: Easing.ease,
      useNativeDriver: true
    })
  ]).start(() => {
    this.props.closeBookingFlow()
  })
}

On my app.js here is my code:

    <Animated.View style={[styles.translateXView,{transform: [{translateX: this.translateXApp},{scale:this.scallApp}]}]}>
      <Application  
        openCategory={this.openCategory.bind(this)} 
        openProduct={this.openProduct.bind(this)}
      />
    </Animated.View>

    {
    this.state.showBookingFlow == true?
    <BookingFlow 
      closeBookingFlow = {this.closeBookingFlow.bind(this)}
      onRef={ref => (this.bookingFlowRef = ref)}
      translateXApp = {this.translateXApp}
    />
    :null
    }

I found a trick in order to avoid this issue but it is not very proper. I use a timeout outside of the animation which is waiting 400ms.

  setTimeout(function(){
    that.props.closeBookingFlow()
  }, 400);

Is there a way to avoid the delay in the animated callback? Thanks guys.

Answer 1

I figured out that i needed to add those 2 values to my springs animations: restSpeedThreshold: 100, restDisplacementThreshold: 40