IjzerenHein / IjzerenHein/react-navigation-shared-element
[v5]/[v3] Maximum update depth exceeded [ in SharedElementStackNavigator (at createSharedElementStackNavigator.js:99) ]
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 125
- PR merge metrics
- No merged PRs in 30d
Description
I am having this error after replacing createStackNavigator with createSharedElementStackNavigator and this is the case with 5.0.0-alpha1 and v3 as well
```
[Thu Dec 10 2020 15:48:46.732] ERROR Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in SharedElementStackNavigator (at createSharedElementStackNavigator.js:99)
in WrapNavigator (at navigation/index.js:69)
in JobNavigator (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at BottomNavigation.tsx:734)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at BottomNavigation.tsx:719)
in RCTView (at View.js:34)
in View (at BottomNavigation.tsx:699)
in RCTView (at View.js:34)
in View (at BottomNavigation.tsx:698)
in BottomNavigation (created by Context.Consumer)
in ThemedComponent (created by withTheme(BottomNavigation))
in withTheme(BottomNavigation) (at MaterialBottomTabView.tsx:94)
in MaterialBottomTabViewInner (at MaterialBottomTabView.tsx:191)
in MaterialBottomTabView (at createMaterialBottomTabNavigator.tsx:45)
in MaterialBottomTabNavigator (at navigation/index.js:120)
in TabNavigator (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:619)
in RCTView (at View.js:34)
in View (at Screens.tsx:84)
in MaybeScreen (at CardStack.tsx:612)
in RCTView (at View.js:34)
in View (at Screens.tsx:54)
in MaybeScreenContainer (at CardStack.tsx:494)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:455)
in GestureHandlerRootView (at GestureHandlerRootView.android.js:31)
in GestureHandlerRootView (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at navigation/index.js:289)
in MainNavigator (at App.js:100)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:99)
in ThemeProvider (at Portal.tsx:54)
in RCTView (at View.js:34)
in View (at PortalManager.tsx:42)
in PortalManager (at PortalHost.tsx:133)
in Portal.Host (at Provider.tsx:81)
in Provider (at App.js:97)
in Provider (at App.js:96)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
```
**Navigation Code**
```
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
import { View, Dimensions, Image } from 'react-native';
import { IconButton, Appbar, Text, Badge } from 'react-native-paper';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import Constants from 'expo-constants';
import Login from 'screens/login';
import Register from 'screens/register';
import Register2 from 'screens/register-2';
import Register3 from 'screens/register-3';
import PreLoader from 'screens/preloader';
import GetStarted from 'screens/get-started';
import JobList from 'screens/jobs/job-list';
import JobDetails from 'screens/jobs/job-details';
import EmptyScreen from 'screens/empty';
import TabBar from 'components/MaterialTopTabBar';
import TabBarLabel from 'components/TabBarLabel';
let _navigator;
const images = {
logo: require('MonaseqInfluencer/assets/logo-small.png'),
logoMini: require('MonaseqInfluencer/assets/logo-mini.png'),
};
function JobNavigator() {
const Stack = createSharedElementStackNavigator();
return (
);
}
function MyJobsNavigator() {
const Stack = createStackNavigator();
return (
);
}
function MessagesNavigator() {
const Stack = createStackNavigator();
return (
);
}
function NotificationNavigator() {
const Stack = createStackNavigator();
return (
);
}
function AccountNavigator() {
const Stack = createStackNavigator();
return (
);
}
function TabNavigator() {
const Tab = createMaterialBottomTabNavigator();
return (
(
),
tabBarLabel: 'كل العروض',
}}
/>
(
),
tabBarLabel: 'عروضي',
}}
/>
(
),
tabBarLabel: 'الرسائل',
}}
/>
(
),
tabBarLabel: 'الإشعارات',
}}
/>
(
),
tabBarLabel: 'حسابي',
}}
/>
);
}
function LoginNavigator() {
const Stack = createStackNavigator();
return (
);
}
function RegisterNavigator() {
const Stack = createStackNavigator();
return (
);
}
function AuthTabsNavigator() {
const Tab = createMaterialTopTabNavigator();
return (
}
tabBarOptions={{
labelStyle: {
fontFamily: 'DinBold',
fontSize: 14,
lineHeight: 21,
},
activeTintColor: 'rgb(33, 150, 243)',
inactiveTintColor: 'rgb(178, 178, 178)',
style: {
backgroundColor: 'transparent',
elevation: 0,
},
tabMarginRight: 16,
tabStyle: {
alignItems: 'flex-start',
paddingLeft: 0,
paddingRight: 0,
width: 'auto',
marginRight: 16,
},
contentStyle: {
flex: 0.7,
flexDirection: 'column',
paddingTop: 4,
paddingLeft: 25,
},
containerStyle: {
justifyContent: 'flex-start',
flexDirection: 'row-reverse',
},
leftContent: (
),
indicatorStyle: {
backgroundColor: 'rgb(33, 150, 243)',
},
showIcon: true,
}}
swipeEnabled={false}>
);
}
function MainNavigator() {
const Stack = createStackNavigator();
return (
);
}
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function navigate(routeName, params) {
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params,
}),
);
}
function goBack() {
_navigator.dispatch(NavigationActions.back());
}
export default {
navigate,
setTopLevelNavigator,
MainNavigator,
};
```
If i change this line to the following so that the root is the createSharedElementStackNavigator stack it works other wise it breaks, Please note that also changing to createStackNavigator does not break the app but no shared element transition of course
```
export default {
navigate,
setTopLevelNavigator,
MainNavigator: JobNavigator,
};
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at createSharedElementStackNavigator.js:99 and the JobNavigator usage in navigation/index.js. Reproduce the warning with react-navigation-shared-element v5.0.0-alpha1 and v3, then trace the repeated updates in the navigator stack. Done means the reported navigation setup no longer produces the maximum update depth warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100