5.3 Dynamic Images

Let's make our app a bit visually pleasing by adding some images. The perfect place to do this is in the TaskListEmptyState component.

Step 1: Download Image

Download the following image and put it at ssets/no-tasks-light.png.

Step 2: Add the Image to the Plugin

Modify your plugin to add an assets property like the in the code below:

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

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

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

	assets: {
		NoTasks: require('../assets/no-tasks-light.png'),
	},

	// ... Other properties
});

Basically, we're telling BlueBase that the said image has an ID NoTasks and where to find it. Now we can just reference this image by this ID and BlueBase will take care of loading and rendering it across formats.

Step 3: Use the Image in the Component

Modify the ComponentState node in the TaskListEmptyState component and add a prop imageSource="NoTasks" as shown in the code below:

<ComponentState
    imageSource="NoTasks"
    title={__('No tasks')}
    imageProps={{ resizeMode: 'contain' }}
    description={__('Start by creating a new task')}
    actionTitle={__('Create Task')}
    actionOnPress={goToCreate}
    actionProps={{ size: 'small', color: 'success', variant: 'outlined' }}
    {...props}
/>

Now when you refresh the app, you should see an image in the empty state.

Step 4: Use a Different Image for Dark Mode

Sometimes we need a different variant of an image for dark mode. Don't worry, we have got you covered here as well.

Download the following image and put it at: assets/no-tasks-dark.png.

Now, modify the assets property in the plugin to match the following:

assets: {
    NoTasks_dark: require('../assets/no-tasks-dark.png'),
    NoTasks_light: require('../assets/no-tasks-light.png'),
},

Try refreshing your app. You'll see different images will be rendered in light mode and dark mode.

Basically, you can define a different image with the same ID (NoTasks in this example) for all of the following scenarios: