How to delay react-navigation action with setTimeout?

Question

I have a navigation function that navigates inside a nested stack. The route goes:

• Course Tab
• • Course Item

Here's the function:

const goToCourse = () => {

    props.navigation.navigate(
        NavigationActions.navigate({
            routeName: 'CourseTab',
            // Delay this action slightly until slightly after the first navigation has completed.
            action: setTimeout(() => {NavigationActions.navigate({
                routeName: "CourseItem",
            })}, 330)
        })
    )
}

Unfortunately using setTimeout in this way does not work. I would like to know how to achieve this using alternative means?

Answer 1

Separate the functions. There's no need to utilise the action.

const goToCourse = (courseId) => {

    const NaviOne = NavigationActions.navigate({
        routeName: 'CourseTab'
    })

    const NaviTwo = NavigationActions.navigate({
        routeName: "CourseItem"
    })

    props.navigation.dispatch(NaviOne)
    setTimeout(() => { props.navigation.dispatch(NaviTwo) }, 1000)

}