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.

src/screens/PendingTasksScreen/PendingTasksScreen.tsx

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:

src/screens/PendingTasksScreen/index.ts

export * from './PendingTasksScreen';

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

And also:

src/screens/index.ts

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.

Web

iOS