CODEWITHSUNDEEP
react-nativecustom-notification
Rover
Rover

Reputation: 768

Create a Custom Notification

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.

Upvotes: 1

Views: 893

Answers (1)

Satheesh
Satheesh

Reputation: 11276

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,
    }
};

enter image description here

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

Upvotes: 1

Related Questions