Adding new blocks

In this section, you will learn how to add new blocks to the app.

Current working directory is the packages/<package-id> folder.

1. First, create a new React Native component in the components folder. You can use components/CustomBlock.js as a reference.

import React from 'react';
import { View, Text, Button } from 'react-native';

const CustomBlock = ({ attributes, onAction }) => {
  const { title, appmakerAction } = attributes;
  return (
    <View>
      <Text>Custom Block :- {title}</Text>
      <Button onPress={() => onAction(appmakerAction)} />
    </View>
  );
};

export default CustomBlock;

This block is a simple block that displays a title and a button. The button triggers an appmakerAction when pressed.

2. Register the Block

Next, you need to register the block in the blocks/index.js file.

import CustomBlock from './components/CustomBlock';
const blocks = [
  {
    name: 'namespace/custom-block',
    View: CustomBlock,
  },
];

export { blocks };

This code exports an array of blocks, which includes the CustomBlock. The name property is a unique identifier for the block.

3.Use the Block in a Page

Finally, you can use the new block in a page by adding it to the blocks array.

{
  blocks: [
    {
      name: 'namespace/custom-block',
      attributes: {
        title: 'Custom Title',
        appmakerAction: {
          action: 'OPEN_COLLECTION',
          collectionId: 'abcd',
          title: 'Collection title',
        },
      },
    },
  ];
}

The name property should match the name used when registering the block. The attributes property is an object that contains any props that should be passed to the block.