# 3.1 Pending Tasks Screen

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.

{% code title="src/screens/PendingTasksScreen/PendingTasksScreen.tsx" %}
```typescript
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';
```
{% endcode %}

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

Also, create the following index file:

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

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

And also:

{% code title="src/screens/index.ts" %}
```typescript
import { PendingTasksScreen } from './PendingTasksScreen';

export const screens = {
	PendingTasksScreen,
};
```
{% endcode %}

### 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](https://github.com/BlueBaseJS/plugin-react-navigation) & [React Router](https://github.com/BlueBaseJS/plugin-react-router) integrations.

The navigation API is loosely based on [React Navigation V5](https://reactnavigation.org/docs/5.x/getting-started). It is very simple to create your own routes. Just add the `routes` property to your plugin. This is an array of objects:

```typescript
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 <mark style="color:green;">Line 23</mark>. 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 <mark style="color:green;">Line 24</mark>. 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.

![Web](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FgRlCX6HfMauNydj7021T%2FScreenshot%202022-04-22%20at%2010.36.27%20AM.png?alt=media\&token=56fd52e9-b7c6-47b3-b0b8-14908343e374) ![iOS](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2Fxk0tXCvBzBtLzkJk62Yj%2FScreenshot%202022-04-22%20at%2010.36.37%20AM.png?alt=media\&token=b137795c-e0ec-4d0b-aab1-8dfbcf63da28)
