3.4 Tab Navigation

To improve the user experience of our app, we want to add tabs on the main page. One tab will show all pending tasks, while the other one will show the completed tasks.

Step 1: Add Tab Navigator

It is possible to add nested routes in BlueBase. Whenever we want to do this, we will add a navigator property in the route. There are several navigators available to use (i.e. switch, stack, tab, bottom-tabs, drawer).

Inside the navigator, we add our desired routes:

{
	name: 'TasksApp',
	screen: Noop,
	path: '',
	exact: false,
	
	options: {
		title: 'My Tasks',
		headerRight: () => <TaskCreateButton />
	},
	
	navigator: {
		headerMode: 'none',
		type: 'tab',
	
		routes: [{
			exact: true,
			name: 'PendingTask',
			path: 'pending',
			screen: 'PendingTasksScreen',

			options: {
				title: 'Pending',
			},
		}, {
			exact: true,
			name: 'CompletedTasks',
			path: 'completed',
			screen: 'CompletedTasksScreen',

			options: {
				title: 'Completed',
			},
		}],
	},
}

When you run the app, you should now see 2 tabs on the main page like the screenshots below:

Web

iOS

Step 2: Tab Icons

Another thing we can do to make our UI pleasing is by adding icons to our tabs. This is done by:

• Adding tabBarIcon to route.options.

• Adding tabBarOptions to the navigator.

See the code below for example:

src/routes.ts

{
	name: 'TasksApp',
	screen: Noop,
	path: '',
	exact: false,
	
	options: {
		title: 'My Tasks',
		headerRight: () => <TaskCreateButton />
	},
	
	navigator: {
		headerMode: 'none',
		type: 'tab',
	
		routes: [{
			exact: true,
			name: 'PendingTask',
			path: 'pending',
			screen: 'PendingTasksScreen',

			options: {
				title: 'Pending',
				tabBarIcon: ({ color }) => <Icon name="checkbox-multiple-blank-outline" color={color} />,
			},
		}, {
			exact: true,
			name: 'CompletedTasks',
			path: 'completed',
			screen: 'CompletedTasksScreen',

			options: {
				title: 'Completed',
				tabBarIcon: ({ color }) => <Icon name="checkbox-multiple-marked" color={color} />,
			},
		}],
	
		tabBarOptions: {
			showIcon: true,
			tabStyle: {
				flexDirection: 'row',
			},
		},
	},
}

Web

iOS