IjzerenHein / IjzerenHein/react-navigation-shared-element

[v5]/[v3] Maximum update depth exceeded [ in SharedElementStackNavigator (at createSharedElementStackNavigator.js:99) ]

Open
#127 4 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.