Closed AdamTimberlake-Which closed 2 years ago
Hi! Please provide a description/code example on how to reproduce this issue.
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.
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.
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>
);
}
@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?
https://github.com/IjzerenHein/react-navigation-shared-element/pull/191 should probably do it.
Thanks @IjzerenHein — could we get a new release when you have time please?
@Whichoney released as https://github.com/IjzerenHein/react-navigation-shared-element/releases/tag/v3.1.3
Awesome, thanks brother!
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 withcreateSharedElementStackNavigator
that default no longer works. Double-clicking on a bottom tab item does nothing.