Kotlin block integration

In this doc we will learn how we can integrate our code with Nativeblocks

Get started

Make sure that your project meets these requirements:

• Uses Android API level 26 or higher
• Uses Jetpack (AndroidX)

Initialization

Root gradle

repositories {
    mavenCentral()
}

Module gradle

dependencies {
    implementation ("io.nativeblocks:nativeblocks-android:1.0.1")
}

After initialization we need to write our ui component with help of jetpack compose, and then import it into Nativeblocks

In this doc we will cover basic SDK api

Component

Let's start to build our component,

We have one composable and we need to define all properties and actions of the component,

@Composable
fun ImageComponent(
    modifier: Modifier = Modifier,
    imageUrl: String,
    shape: Shape = RectangleShape,
    scaleType: ContentScale = ContentScale.None,
    contentDescription: String,
    onClick: () -> Unit
) {
    val modifierResult = Modifier
        .clip(shape)
        .clickable {
            onClick.invoke()
        }
        .then(modifier)

    AsyncImage(
        model = imageUrl,
        contentDescription = contentDescription,
        contentScale = scaleType,
        modifier = modifierResult
    )
}

Component into block

After providing all properties and actions we have to wrap it into Nativeblocks SDK, and connect component data, properties and events with Nativeblocks,

class ImageBlock : INativeBlock {

    @Composable
    override fun BlockView(blockProps: BlockProps) {
        val visibility = blockProps.variables?.get(blockProps.block?.visibility)
        if ((visibility?.value ?: "true") == "false") {
            return
        }

        // block data
        val data = blockProps.block?.data ?: mapOf()
        val imageUrl = blockProps.variables?.get(data["url"]?.value)?.value.orEmpty()
        val contentDescription = blockProps.variables?.get(data["contentDescription"]?.value)?.value.orEmpty()

        // block properties
        val properties = blockProps.block?.properties ?: mapOf()
        val imageShape = properties["shape"]?.valueMobile
        val scaleType = properties["scaleType"]?.valueMobile

        // block events
        val action = blockProps.actions?.get(blockProps.block?.key)
        val onClick = blockProvideEvent(blockProps, action.orEmpty(), "onClick")

        ImageComponent(
            modifier = Modifier,
            imageUrl = imageUrl,
            shape = shapeMapper(imageShape),
            scaleType = scaleTypeMapper(scaleType),
            contentDescription = contentDescription,
            onClick = {
                onClick?.invoke()
            }
        )
    }
}

Register block

At the end the ImageBlock must be registered into Nativeblocks,

NativeblocksManager.getInstance().provideBlock(
  blockType = "MY_AWESOME_IMAGE_BLOCK",
  block = ImageBlock()
)

From now on, the MY_AWESOME_IMAGE_BLOCK is accessable for every frame in Nativeblocks