Can't add Bottom Navigation from React Native Paper

Question

I recently got started with react-native and react-native-paper, I followed the docs to set up everything, however when I try to add a bottom navigation, I get the following error : TypeError: undefined is not an object (evaluating 'route.map'). Can you please help me resolve this issue.

This is my code :

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;


export default function App() {
  const [navigationIndex, setNavigationIndex] = useState(0)
  const [navigationRoutes] = useState([
    { key: 'music', title: 'Music', icon: 'inbox' },
    { key: 'albums', title: 'Albums', icon: 'album' },
    { key: 'recents', title: 'Recents', icon: 'history' },
  ])

  return (
    <BottomNavigation
      shifting={true}
      navigationState={{ navigationIndex, navigationRoutes }}
      onIndexChange={index => setNavigationIndex(index)}
      renderScene={ BottomNavigation.SceneMap({
        music: MusicRoute,
        albums: AlbumsRoute,
        recents: RecentsRoute,
      })}
    />
  );
}

This is the error :

Thanks in advance, Volck

Answer 1

BottomNavigation.navigationState follows this method signature:

Type: { index: number; routes: Route[]; }

https://callstack.github.io/react-native-paper/bottom-navigation.html#navigationState

Try updating your code. The navigation library is complaining that routes is undefined. Use routes in the navigationState instead of navigationRoutes.

export default function App() {
  // ....
  return (
    <BottomNavigation
      shifting={true}

      // change navigationState object to match expected method signature
      navigationState={{ index: navigationIndex, routes: navigationRoutes }}

      onIndexChange={index => setNavigationIndex(index)}
      renderScene={ BottomNavigation.SceneMap({
        music: MusicRoute,
        albums: AlbumsRoute,
        recents: RecentsRoute,
      })}
    />
  );
}