Double-clicking on bottom tab doesn't reset navigation

[AdamTimberlake-Which]

When using createStackNavigator if you double-click on a bottom tab item, it resets the navigation to the initial screen. However when you replace it with createSharedElementStackNavigator that default no longer works. Double-clicking on a bottom tab item does nothing.

[IjzerenHein]

Hi! Please provide a description/code example on how to reproduce this issue.

[AdamTimberlake-Which]

Sure: https://imgur.com/a/8B1qwMD

In the first example is the default createStackNavigator which takes you back to the homepage on press. In the second example using createSharedElementStackNavigator the press does nothing.

[IjzerenHein]

Thanks. Please also share your code-setup, I want to see call to createSharedElementStackNavigator and your JSX for composing your navigator and screens as well as all the props set.

[AdamTimberlake-Which]

Reviews tab:

import type { ReactElement } from 'react';
import React from 'react';
import { createSharedElementStackNavigator } from 'react-navigation-shared-element';

import { screenOptions } from '../App/utils';
import Index from './components/Index';
import Search from './components/Search';
import type { StackParamList } from './types';

const Stack = createSharedElementStackNavigator<StackParamList>();

export default function Reviews(): ReactElement {
    return (
        <Stack.Navigator screenOptions={screenOptions}>
            <Stack.Screen
                name="Search"
                component={Index}
                options={{
                    headerShown: false,
                }}
                sharedElements={(): string[] => ['search']}
            />

            <Stack.Screen name="SearchResults" component={Search} options={{ title: 'Search', headerShown: false }} />
        </Stack.Navigator>
    );
}

And that component is sat in a standard createBottomTabNavigator:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import type { ReactElement } from 'react';
import React from 'react';

import Account from '@app/screens/Account';
import Reviews from '@app/screens/Reviews';
import Saved from '@app/screens/Saved';

export const Tab = createBottomTabNavigator();

export default function Main(): ReactElement {
    return (
        <Tab.Navigator>
            <Tab.Screen
                name="ReviewsTab"
                component={Reviews}
                options={{
                    title: 'Search',
                }}
            />
            <Tab.Screen
                name="SavedTab"
                component={Saved}
                options={{
                    title: 'Saved',
                }}
            />
            <Tab.Screen
                name="AccountTab"
                component={Account}
                options={{
                    title: 'Account',
                }}
            />
        </Tab.Navigator>
    );
}

[AdamTimberlake-Which]

@IjzerenHein looking at the source for createStackNavigator we're probably missing the following useEffect: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/navigators/createStackNavigator.tsx#L91-L114 right?

[AdamTimberlake-Which]

https://github.com/IjzerenHein/react-navigation-shared-element/pull/191 should probably do it.

[AdamTimberlake-Which]

Thanks @IjzerenHein — could we get a new release when you have time please?

[IjzerenHein]

@Whichoney released as https://github.com/IjzerenHein/react-navigation-shared-element/releases/tag/v3.1.3

[AdamTimberlake-Which]

Awesome, thanks brother!