Create a Custom Notification

Question

Add a custom notification in it. I am using react-native-background-actions as it is showing a default notification. But i need to add a custom notification as i have to show a Progress bar in the notification to show a progress of downloading.

const options = {
    taskName: 'Downloading',
    taskTitle: 'ExampleTask title',
    taskDesc: 'ExampleTask description',
    taskIcon: {
      name: 'ic_launcher',
      type: 'mipmap',
    },
    color: '#ff00ff',
    linkingURI: 'yourSchemeHere://chat/jane', // See Deep Linking for more info
    parameters: {
      delay: 15000,
    },
  };

Please let me know if anybody have an idea that how can i create a custom notification in the react native.

score 1 · Accepted Answer · answered Jun 06 '22 at 08:06

There is an in-built way to show a progress bar with react-native-background-actions. Did you check this?

You can actually pass it as a taskProgressBarOptions to the configuration.

const options = {
    taskName: 'Example',
    taskTitle: 'ExampleTask title',
    taskDesc: 'ExampleTask description',
    taskIcon: {
        name: 'ic_launcher',
        type: 'mipmap',
    },
    color: '#ff00ff',
    linkingURI: 'yourSchemeHere://chat/jane', // See Deep Linking for more info
    parameters: {
        delay: 1000,
    },
    taskProgressBarOptions:{
        max: 100,
        value: 80,
    }
};

So when the progress changes you need to call the below method with the updated progress value.

await BackgroundService.updateNotification({taskProgressBarOptions:{
        max: 100,
        value: 80,
}}); // Only Android, iOS will ignore this call

One more doubt can i add a button button on this notification — Rover, Jun 07 '22 at 10:32
No, I don't think you can do that with this plugin. You might want to implement a native plugin yourself. Your initial question was to add a progress bar and I hope the answer solves that, kindly accept the answer if it helped you. — Satheesh, Jun 07 '22 at 13:36

Create a Custom Notification

1 Answers1