{"record":{"id":"029e9c2d9e0c7ee8","repo":"react-navigation/react-navigation","slug":"couldn-t-find-a-route-at-index-state-index-029e9c","errorCode":null,"errorMessage":"Couldn't find a route at index ${state.index}.","messagePattern":"Couldn't find a route at index (.+?)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/material-top-tabs/src/views/MaterialTopTabBar.tsx","lineNumber":49,"sourceCode":"\nconst renderLabelDefault = (props: MaterialLabelProps) => (\n  <MaterialLabel {...props} />\n);\n\nexport function MaterialTopTabBar({\n  state,\n  navigation,\n  descriptors,\n  ...rest\n}: MaterialTopTabBarProps) {\n  const { colors, dark } = useTheme();\n  const { direction } = useLocale();\n  const { buildHref } = useLinkBuilder();\n\n  const focusedRoute = state.routes[state.index];\n\n  if (focusedRoute == null) {\n    throw new Error(`Couldn't find a route at index ${state.index}.`);\n  }\n\n  const focusedOptions = descriptors[focusedRoute.key]?.options ?? {};\n  const tabBarVariant = focusedOptions.tabBarVariant ?? 'primary';\n\n  const activeColor: ColorValue =\n    focusedOptions.tabBarActiveTintColor ??\n    (tabBarVariant === 'primary' ? colors.primary : colors.text);\n\n  const inactiveColor: ColorValue =\n    focusedOptions.tabBarInactiveTintColor ??\n    Color(colors.text)?.alpha(0.68).string() ??\n    (dark ? 'rgba(255, 255, 255, 0.68)' : 'rgba(0, 0, 0, 0.68)');\n\n  const pressColor: ColorValue =\n    focusedOptions.tabBarPressColor ??\n    Color(tabBarVariant === 'primary' ? colors.primary : colors.text)\n      ?.alpha(0.12)","sourceCodeStart":31,"sourceCodeEnd":67,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx#L31-L67","documentation":"MaterialTopTabBar reads state.routes[state.index] to determine the focused route for the tab bar. A null/undefined focused route means the navigator state is inconsistent (index points past the routes array), so the bar throws early rather than rendering with undefined options.","triggerScenarios":"Rendering MaterialTopTabBar with a navigation state whose index is out of bounds — typically from custom state manipulation (navigation.dispatch with a hand-built state), a third-party state-persistence/rehydration bug, or passing a stale state to a controlled navigator.","commonSituations":"Persisting navigation state to AsyncStorage and restoring a corrupted/stale serialized state; deep-link handling dispatching actions that desync index; custom tab bar integrations feeding the wrong state object.","solutions":["Clear persisted navigation state (remove the stored key from storage) so the navigator rebuilds a valid state.","Stop dispatching hand-crafted state updates; use supported actions (CommonActions.navigate, jumpTo) instead.","Upgrade @react-navigation/* packages to matching latest versions, since mismatched core versions can corrupt state.","Validate restored state shape before passing to initialState (ensure routes.length > index)."],"exampleFix":"// before\n<NavigationContainer initialState={JSON.parse(stored)} />\n// after\nconst initial = JSON.parse(stored);\nconst safe = initial && initial.routes && initial.index < initial.routes.length ? initial : undefined;\n<NavigationContainer initialState={safe} />","handlingStrategy":"validation","validationCode":"function isValidTabState(state) {\n  return Boolean(state && Array.isArray(state.routes) && typeof state.index === 'number' && state.index >= 0 && state.index < state.routes.length);\n}\n// before passing to NavigationContainer/initialState:\nconst initialState = isValidTabState(parsed) ? parsed : undefined;","typeGuard":"function hasValidFocusedRoute(state) {\n  return state != null && Array.isArray(state.routes) && Number.isInteger(state.index) && state.routes[state.index] != null;\n}","tryCatchPattern":"try {\n  renderTabBar(state);\n} catch (e) {\n  if (e instanceof Error && e.message.includes(\"Couldn't find a route at index\")) {\n    resetNavigationState(); // navigation.reset to a known-good route\n  } else throw e;\n}","preventionTips":["Validate persisted state before using it as initialState","Never dispatch hand-built state objects; use supported navigation actions","Clear stored navigation state after package upgrades or screen-tree changes","Keep all @react-navigation packages on the same version"],"tags":["react-navigation","state","tab-navigator"],"backgroundTag":"navigator-state-index-out-of-bounds","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}