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:

src/index.ts

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:

src/components/TaskListEmptyState/TaskListEmptyState.tsx

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

Light Mode

Light Mode

Dark Mode

Dark Mode

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

Key	Use Case
NoTasks	Default version
NoTasks_dark	Dark mode version
NoTasks_light	Light mode verion
NoTasks_desktop	Desktop Screen Size version
NoTasks_mobile	Mobile Screen Size version
NoTasks_desktop_dark	Desktop Screen Size version on Dark mode
NoTasks_mobile_dark	Mobile Screen Size version on Dark mode
NoTasks_desktop_light	Desktop Screen Size version on Light mode
NoTasks_mobile_light	Mobile Screen Size version on Light mode