React-native-push-notification: create badge number icon in Android

Created on 4 Dec 2016  路  3Comments  路  Source: zo0r/react-native-push-notification

How can I create Badge Icon in Android like iOS?
In the readme file it says
"PushNotification.setApplicationIconBadgeNumber(number: number)
Works natively in iOS.
Uses the ShortcutBadger on Android, and as such will not work on all Android devices."

But https://github.com/leolin310148/ShortcutBadger is not a react native library

Stale

All 3 comments

@georgi-kovachev Here is an example

import React from 'react'
import { Button, ScrollView, Text, KeyboardAvoidingView } from 'react-native'
import PushNotification from 'react-native-push-notification'
import { connect } from 'react-redux'

// Styles
import { Colors } from '../Themes/'

import styles from './Styles/NotificationsScreenStyle'

class NotificationsScreen extends React.Component {
  showNotification () {
    PushNotification.setApplicationIconBadgeNumber(1)

    PushNotification.localNotification({
      /* Android Only Properties */
      id: '0', // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
      ticker: 'My Notification Ticker', // (optional)
      autoCancel: true, // (optional) default: true
      largeIcon: 'ic_launcher', // (optional) default: "ic_launcher"
      smallIcon: 'ic_notification', // (optional) default: "ic_notification" with fallback for "ic_launcher"
      bigText: 'Ditt fordon med registreringsnummer ANE486 ska besiktigas om en vecka', // (optional) default: "message" prop
      subText: 'Det n盲rmar sig', // (optional) default: none
      color: Colors.primary, // (optional) default: system default
      vibrate: true, // (optional) default: true
      vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
      tag: 'some_tag', // (optional) add tag to message
      group: 'group', // (optional) add group to message
      ongoing: false, // (optional) set whether this is an "ongoing" notification

      /* iOS and Android properties */
      title: 'Besiktningsp氓minnelse', // (optional, for iOS this is only used in apple watch, the title will be the app name on other iOS devices)
      message: 'Det 盲r snart dags att besiktiga ditt fordon', // (required)

      playSound: false, // (optional) default: true
      number: '10', // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
      repeatType: 'minute' // (Android only) Repeating interval. Could be one of `week`, `day`, `hour`, `minute, `time`. If specified as time, it should be accompanied by one more parameter 'repeatTime` which should the number of milliseconds between each interval
    })
  }

  render () {
    return (
      <ScrollView style={styles.container}>
        <KeyboardAvoidingView behavior='position'>
          <Text>NotificationsScreen Screen</Text>
          <Button
            onPress={() => this.showNotification()}
            title='Show notification'
          />
        </KeyboardAvoidingView>
      </ScrollView>
    )
  }
}

const mapStateToProps = state => {
  return {}
}

const mapDispatchToProps = dispatch => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(NotificationsScreen)

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

The suggested solution works when used in tandem, but doesn't if only setApplicationIconBadgeNumber is invoked.

Was this page helpful?
0 / 5 - 0 ratings