How to determine when transitioning? (v5)

[swrobel]

I have screens with Save buttons that I disable when submitting (using Formik), ex:

<SaveButton onPress={formikbag.handleSubmit} disabled={formikbag.isSubmitting}>

However, there is a brief period when the screen re-renders while the transition is happening, where isSubmitting is false (as expected) but the screen effectively should be blocked from input while waiting for the new screen to transition in. I've noticed that users get impatient and just keep tapping the Save button (even though it's disabled), and sometimes double-submit by catching it in that brief moment that it's transitioning and thus re-enabled.

I see that React Navigation used to have isTransitioning that I could check, that was removed in the v5 rewrite. I would like to effectively be able to write:

<SaveButton onPress={formikbag.handleSubmit} disabled={formikbag.isSubmitting || navigation.isTransitioning}>

[satya164]

If you want to check when the screen is transitioning, you can add listeners on transitionStart and transitionEnd: https://reactnavigation.org/docs/stack-navigator/#events

Though not sure why users can tap on a disabled button. Maybe you should add a debounce on your onPress to avoid multiple taps.

[swrobel]

Thank you for the reply. I think I explained the scenario pretty well that is allowing them to tap the button again - the button is not disabled at the time they're tapping it. Is there no simpler way to just get the status, like isTransitioning provided, rather than having to listen to events?

[satya164]

I explained the scenario pretty well that is allowing them to tap the button again - the button is not disabled at the time they're tapping it

Aren't you disabling it after the first tap?

Is there no simpler way to just get the status, like isTransitioning provided, rather than having to listen to events

No, it'll be pretty wasteful to re-render all screens when transitioning. With events, you can explicitly do that for specific components.

If you need it in multiple places, your can create a hook and reuse it.

[swrobel]

Aren't you disabling it after the first tap?

Yes, I am, like so:

<SaveButton onPress={formikbag.handleSubmit} disabled={formikbag.isSubmitting}>

The problem is that when the submit is unsuccessful, the button needs to be re-enabled so that the user can change their input & re-submit. When the submit is successful, it triggers navigation, in which case the screen re-renders with the button enabled, and then the new screen slides over it. There is a brief moment if you're continuing to tap on the button where you can hit Save again just before the new screen slides in (don't ask me why users behave like they do 🤷🏼)

If you need it in multiple places, your can create a hook and reuse it.

I did, but it never seems to indicate that isTransitioning is true

useIsTransitioning.js:

import { useEffect, useState } from 'react'
import { useNavigation } from '@react-navigation/native'

export const useIsTransitioning = () => {
  const navigation = useNavigation()
  const [isTransitioning, setIsTransitioning] = useState(false)

  useEffect(() => {
    const startListener = navigation.addListener('transitionStart', () => {
      setIsTransitioning(true)
    })
    const endListener = navigation.addListener('transitionEnd', () => {
      setIsTransitioning(false)
    })

    return () => {
      startListener.remove()
      endListener.remove()
    }
  }, [navigation])

  return isTransitioning
}

component.js:

const isTransitioning = useIsTransitioning()

<SaveButton onPress={formikbag.handleSubmit} disabled={formikbag.isSubmitting || isTransitioning}>

[satya164]

Just set a brief timeout like 100ms before re-enabling the button and don't do it instantly before navigation happens.

The transition doesn't start immediately when you navigate. State updates are async. There'll always be a small delay. React Navigation should already disable interactions on inactive screens, so your shouldn't really need to listen to transition events for this purpose.

[swrobel]

Thanks! I'm using the 100ms timeout you suggested and that seems to have resolved the issue. Appreciate all of your help @satya164!