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:

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

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:

Ok, so now with the configurations out of the way, it's time to start coding our app. The first thing we need to do is to create an application skeleton by developing empty screens and configuring the navigation mechanism.

The first screen that we are going to create is going to show a list of pending tasks.

Step 1: Create Screen View

Let's start by creating our screen view component. Let's call it PendingTasksScreen. Feel free to copy the code below.

import React from 'react';
import { Text, View } from 'react-native';

export const PendingTasksScreen = () => {
	return (
		<View style={{ padding: 10 }}>
			<Text>PendingTasksScreen</Text>
		</View>
	);
};

PendingTasksScreen.displayName = 'PendingTasksScreen';

All we're doing right now is rendering the component name. Don't worry we will add the actual list later.

Also, create the following index file:

export * from './PendingTasksScreen';

import { PendingTasksScreen } from './PendingTasksScreen';
export default PendingTasksScreen;

And also:

import { PendingTasksScreen } from './PendingTasksScreen';

export const screens = {
	PendingTasksScreen,
};

Step 2: Create Route

BlueBase provides an abstraction to create navigation plugins. This allows us to be able to use any navigation library in our app. For now, we have created React Navigation & React Router integrations.

The navigation API is loosely based on React Navigation V5. It is very simple to create your own routes. Just add the routes property to your plugin. This is an array of objects:

import { createPlugin } from '@bluebase/core';
import { ToDoAppIcon } from './components/ToDoAppIcon';
import { PendingTasksScreen } from './components/PendingTasksScreen';

export default createPlugin({
	key: 'tasks',
	name: 'Tasks',
	description: 'A todo app made with BlueBase framework.',

	// ... Other plugin properties

	indexRoute: 'TasksApp',
	
	components: {
		// Components
		ToDoAppIcon,

		// Screens
		PendingTasksScreen,
	},

	routes: [{
		name: 'TasksApp',
		screen: 'PendingTasksScreen',
		path: '',
		exact: false,

		options: {
			title: 'My Tasks',
		},
	}]
});

Explanation of the code above:

• Line 12: We changed the plugin's index route to the new one created at Line 23. By doing this, whenever we press the task icon on our launcher, we get navigated to this screen.

• Line 19: Notice we added the PendingTasksScreen component to BlueBase. This is so we can reference it in our route configuration at Line 24. This is where we tell BlueBase what component to render once we have navigated to that route.

• Line 23: Name of the route. We use this name to navigate to this screen. We will see an example of this later.

• Line 25: Path of the screen. This is used to create the URL for the web. The URL pattern is [[host]]/p/[[plugin-key]]/[[route-path]]. Since this is the plugin home page, we leave it empty. Please see the URL in the browser screenshot for an example.

• Line 28: Route options, like title, etc.

That's all. Run your app, and test your new screen.

We also need a screen to create a new task.

Step 1: Create Route

Similar to the previous section, now we create our third route. Notice that I have now moved the routes array dedicated file, to keep to code readable.

export const routes = [
{
	name: 'CreateTask',
	screen: 'CreateTaskScreen',
	path: 'create',
	exact: true,

	options: {
		title: 'Create Task',
	},
},
{
	name: 'EditTask',
	screen: 'EditTaskScreen',
	path: 't/:taskId',
	exact: true,

	options: {
		title: 'Edit Task',
	},
},
{
	name: 'TasksApp',
	screen: 'PendingTasksScreen',
	path: '',
	exact: false,

	options: {
		title: 'My Tasks',
	},
}];

Import this array to your plugin file:

import { createPlugin } from '@bluebase/core';

import { ToDoAppIcon } from './components/ToDoAppIcon';
import { routes } from './routes';
import { screens } from './screens';

export default createPlugin({
	key: 'tasks',
	name: 'Tasks',
	description: 'A todo app made with BlueBase framework.',

	components: {
		// Components
		ToDoAppIcon,

		// Screens
		...screens,
	},

	icon: {
		component: 'ToDoAppIcon',
		type: 'component',
	},

	indexRoute: 'TasksApp',

	routes,
});

This should create the third route, which should be accessible via the following URL:

http://localhost:19006/p/tasks/create

Step 2: Create a Button to Navigate

But we still need a way to navigate to this route in our UI. This time we will add an icon button in the header.

Create the following component:

import { IconButton } from '@bluebase/components';
import { useNavigation, useTheme } from '@bluebase/core';
import React, { useCallback } from 'react';

export interface TaskCreateButtonProps {}

export const TaskCreateButton = (_props: TaskCreateButtonProps) => {
	const { theme } = useTheme();
	const { navigate } = useNavigation();

	const onPress = useCallback(() => {
		navigate('CreateTask');
	}, []);

	return (
		<IconButton
			name="plus"
			onPress={onPress}
			color={theme.palette.text.secondary}
		/>
	);
};

Also, create an index file to export the component:

export * from './TaskCreateButton';

import { TaskCreateButton } from './TaskCreateButton';
export default TaskCreateButton;

Step 3: Add Button in Header

To add our new TaskCreateButton to the screen, add the headerRight property in the route options like so:

{
	name: 'TasksApp',
	screen: 'PendingTasksScreen',
	path: '',
	exact: false,

	options: {
		title: 'My Tasks',
		headerRight: () => <TaskCreateButton />
	},
}

That's it, run your app to test it out.

Next up, we are going to create a screen that will allow a user to edit a task.

Step 1: New Screens

Before we move forward to adding new routes, let's quickly create 3 copies of our PendingTasksScreen component, and give them the following names:

• CreateTaskScreen

• EditTaskScreen

• CompletedTasksScreen

So now we should have 4 screens in total.

Step 2: Adding Edit Route

Add the following EditTask route to the routes array:

routes: [{
	name: 'EditTask',
	screen: 'EditTaskScreen',
	path: 't/:taskId',
	exact: true,

	options: {
		title: 'Edit Task',
	},
},
{
	name: 'TasksApp',
	screen: 'PendingTasksScreen',
	path: '',
	exact: false,

	options: {
		title: 'My Tasks',
	},
}]

This should create the second route, which should be accessible via the following URL:

http://localhost:19006/p/tasks/t/123

Step 3: Create a Button to Navigate

But we still need a way to navigate to this route in our UI. Let's modify our PendingTasksScreen component to add a button:

import { Button, View } from '@bluebase/components';
import { useNavigation } from '@bluebase/core';
import React, { useCallback } from 'react';
import { Text } from 'react-native';

export const PendingTasksScreen = () => {
	const { push } = useNavigation();

	const goToEdit = useCallback(() => {
		push('EditTask', { taskId: '123' });
	}, []);

	return (
		<View>
			<Text>PendingTasksScreen</Text>
			<Button title="Go To Edit Screen" onPress={goToEdit} />
		</View>
	);
};

PendingTasksScreen.displayName = 'PendingTasksScreen';

Notice, that we use the push method from BlueBase's useNavigation hook. The method takes route name and optional params object as its arguments.

Run your app, you should now be able to navigate between routes.

Step 4: Extract Route Param

Notice that the value of path property in the route is :taskId. This means that any value that is entered in this part of the URL will be captured in the taskId param. For example the URL http://localhost:19006/p/tasks/123 will extract value 123 in the taskId variable.

Let's see how we can use this value, modify the EditTaskScreen component to match the following content:

import { useNavigation } from '@bluebase/core';
import React from 'react';
import { Text, View } from 'react-native';

export const EditTaskScreen = () => {
	const { getParam } = useNavigation();
	const taskId = getParam('taskId', null);

	return (
		<View style={{ padding: 10 }}>
			<Text>EditTaskScreen: {taskId}</Text>
		</View>
	);
};

EditTaskScreen.displayName = 'EditTaskScreen';

Notice the code on Line 7, we use the getParam function to extract the URL param.