# 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.

{% code title="src/routes.ts" %}
```typescript
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',
	},
}];
```
{% endcode %}

Import this array to your plugin file:

{% code title="src/index.ts" %}
```typescript
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,
});

```
{% endcode %}

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:

{% code title="src/components/TaskCreateButton/TaskCreateButton.tsx" %}
```typescript
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}
		/>
	);
};
```
{% endcode %}

Also, create an index file to export the component:

{% code title="src/components/TaskCreateButton/index.ts" %}
```typescript
export * from './TaskCreateButton';

import { TaskCreateButton } from './TaskCreateButton';
export default TaskCreateButton;
```
{% endcode %}

### Step 3: Add Button in Header

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

{% code title="src/routes.ts" %}
```jsx
{
	name: 'TasksApp',
	screen: 'PendingTasksScreen',
	path: '',
	exact: false,

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

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

![](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FgPJyKKYbjcwCt9TjxlmZ%2FScreenshot%202022-04-22%20at%2011.18.32%20PM.png?alt=media\&token=2993a539-f979-479b-94de-1a8e6af36b1e) ![](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FScKKpz6r3Ev8C2z0DnRZ%2FScreenshot%202022-04-22%20at%2011.18.33%20PM.png?alt=media\&token=68739d58-c4e8-4750-921f-9cd09845d1e0)
