3.3 Task Create 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.

src/routes.ts

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:

src/index.ts

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:

src/components/TaskCreateButton/TaskCreateButton.tsx

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:

src/components/TaskCreateButton/index.ts

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:

src/routes.ts

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

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

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