Customizing existing blocks

In this section, you will learn how to customize existing blocks.

You can add custom components to the existing blocks by following the steps below: Let the current working directory be the packages/<package-id> folder.

1. Open the <package-id>/components folder in your favorite text editor. If no components folder exists, create one.
2. Create a new file in the components folder and name it <Name your component>.js. For example, productTitle.js.
3. Add the following code to the file:

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

const productTitle = ({ attributes, clientId, ...props }) => {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Product Title</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 10,
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
    },   
});
export default productTitle;

4. Save the file.
5. Open the <package-id>/blocks folder in your favorite text editor. If no blocks folder exists, create one.
6. Register the block in blocks/index.js file. To register the block, add the following code to the blocks/index.js file: Let's take an example of shopify-product-data block.

import  productTitle  from '../components/productTitle';
const blocks = [
  {
   name: 'appmaker/shopify-product-data',
   View: productTitle, // The component to be rendered
  },
];
export { blocks };

1. Save the file.
2. Open the <package-id>/index.js file in your favorite text editor.
3. Import the block in index.js file. To import the block, add the following code to the index.js file:

import { blocks } from './blocks/index';

sample index.js file

import { appmaker } from '@appmaker-xyz/core';
import { blocks } from './blocks/index';
export function activate(params) {
   console.log('Package Activated');
}
const Plugin = {
  id: '<package-id>',
  activate,
  blocks,
  //pages,
};
appmaker.registerPlugin(Plugin);
export default Plugin;

10. Save the file.

Reload the app and you will see the changes.

You have now edited an existing block in your project.