Skip to main content

How to Customise the Appmaker Message View

Description​

In this doc we will see how to customise the Appmaker message view using react-native-toast-notifications. We will be using the react-native-toast-notifications library to customise the message view. By this method we can conditionally show the message view based on the message type.

Steps​

  1. Add react-native-toast-notifications library to your theme peer dependencies.

  2. For this library to work you have to add a wrapper for your app code. For this you can add the following code in your theme index.js file.

import { Toast } from 'react-native-toast-notifications';
import { addFilter } from '@appmaker-xyz/core';

function activate(settings) {
  addFilter('wrap-appmaker-app-component', 'your-theme', (App) => {
    const FinalApp = (props) => (
      <ToastProvider>
        <App {...props} />
      </ToastProvider>
    );
    return FinalApp;
  });
}
  1. In your theme index.js inside the activate function add the following code.
import { Toast } from 'react-native-toast-notifications';
import { addFilter } from '@appmaker-xyz/core';

function activate(settings) {
  addFilter('change-appmaker-message-view-success','your-theme', (currentValue,{ title, buttonTitle, buttonAction, message },
    deps,) => {
      if(title == 'Added to cart') {
        Toast.show(title, {
          type: 'success',
          placement: 'bottom',
          duration: 4000,
          offset: 30,
          animationType: 'slide-in',
        });
        return true; // return true to hide default appmaker message view
      }
      return currentValue; // return currentValue to show default appmaker message view
  });
}
  1. For customizing the message view for different message types you can you can refer to the react-native-toast-notifications library documentation. You can refer to their docs for more customizations.