Tab navigation

Just as routing is an important part of your web app, navigation between screens is crucial for mobile apps. There are several ways to tackle this functionality, however the de facto standard for React Native is to use a package called React Navigation. We're also going to use this for our app. To get started, follow the installation steps as described here.

Tab navigation

React Navigation has multiple types of navigators available to navigate through your app. We're going to start of with one you're undoubtedly familiar with, a Bottom Tabs Navigator. To install this navigator, run the following:

npm install @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler @react-native-community/masked-view

Try it out and make a navigator with two screens, Timesheets and Team Members. Then turn it into a component which you import from the navigation directory.

You'll probably have noticed that your tabs have come with built in headers. For now we can leave them as is, as we'll turn these into our Subheader's later on.

Customizing your navigator

If you have a look at the Bottom Tabs Navigator page in the React Navigation docs, you'll see that it offers all kinds of options for us to adjust it to our needs. Let's pimp our navigator a bit! Change the icons to the one corresponding with the app design and have them change color when active.

Adding a header component

Now that we have our styling spot on, we can return to the matter of the Subheader. Make this component and pass it on to your navigator via the screenOptions.