DynamicIcon 📌

An enhanced Icon that can render any of the following:

• BB.Components.Icon

• BB.Components.Image

• A custom component

System Component 📌

This component is shipped with BlueBase Core.

Usage

Icon

The following example shows how to use BlueBase Icon component:

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

// Then somewhere in your app:
<DynamicIcon
    type="icon"
    size={250}
    name="rocket"
/>

Image

The following example shows how to use an image as an icon:

<DynamicIcon
    type="image"
    size={250}
    source={{ uri: 'https://picsum.photos/200' }}
/>

Component

The following example shows how to use a custom component as an icon:

const CustomComponent = ({ size }: { size: number }) => (
	<View style={{ height: size, width: size, backgroundColor: 'red' }} />
);

// Then somewhere in your component:		
<DynamicIcon
    type="component"
    size={250}
    component={CustomComponent}
/>

It is also possible to use a component registered in the ComponentRegistry by using it's name:

<DynamicIcon
    type="component"
    size={250}
    component="CustomComponent" // equivalent to BB.Components.resolve('CustomComponent')
/>

Properties

prop	type	required	default	description
type	'component' | 'icon' | 'image'	yes	-	If value is: component: Icon is a custom component, and looks for 'component' prop icon: Icon is an instance of BB.Components.Icon and looks for 'icon' prop image: Icon is an instance of BB.Components.Image and looks for 'source' prop
component	React Component | string	-	-	Used when type is 'component'. Either a component or a component name (string). In case of string, it will be fetched from Component Registry.
name	string	-	-	Used when type is 'icon'. This is the name prop of the BB.Components.Icon component
source	Image Source Prop Type	-	-	Used when type is 'image'. This is the Image source.
size	number	-	100	Icon size.
testID	string	no	-	Used to locate this view in end-to-end tests.