/Javascript/React/Notification react native

Notification react native

Push notification react native

import PushNotificationIOS from '@react-native-community/push-notification-ios';
import { Platform } from 'react-native';
import PushNotification from 'react-native-push-notification';

class NotificationManager {
    configure = () => {
        PushNotification.configure({
            onRegister: function (token: any) {
                console.log('TOKEN:', token);
            },
            onNotification: function (notification: any) {
                console.log('NOTIFICATION:', notification);
                notification.finish(PushNotificationIOS.FetchResult.NoData);
            },
            permissions: {
                alert: true,
                badge: true,
                sound: true,
            },
            popInitialNotification: true,
            requestPermissions: true,
        });
        PushNotification.createChannel(
            {
                channelId: 'fcm_fallback_notification_channel', // (required)
                channelName: 'Channel', // (required)
            },
            (created) => console.log(`createChannel returned '${created}`),
        );
    };

    buildAdroidNotification = (id: number, title: string, message: string, data = {}, options = {}) => {
        return {
            id: id,
            autoCancel: true,
            largeIcon: options.largeIcon || 'ic_launcher',
            smallIcon: options.smallIcon || 'ic_launcher',
            bigText: message || '',
            subText: title || '',
            vibration: options.vibration || 300,
            vibrate: options.vibrate || false,
            priority: options.priority || 'high',
            importance: options.importance || 'high',
            data: data,
        };
    };
    buildIOSNotification = (id: number, title: string, message: string, data = {}, options = {}) => {
        return {
            alertAction: options.alertAction || 'view',
            category: options.category || '',
            userInfo: {
                id: id,
                item: data,
            },
        };
    };
    cancelAllNotification = () => {
        console.log('cancel');
        PushNotification.cancelAllLocalNotifications();
        if (Platform.OS === 'ios') {
            PushNotificationIOS.removeAllDeliveredNotifications();
        }
    };

    showNotification = (id: number, title: string, message: string, data = {}, options = {}, date: Date) => {
        PushNotification.localNotificationSchedule({
            //Android
            ...this.buildAdroidNotification(id, title, message, data, options),

            // iOS
            ...this.buildIOSNotification(id, title, message, data, options),

            // Android and iOS
            title: title || '',
            message: message || '',
            playSound: options.playSound || false,
            soundName: options.soundName || 'default',
            date: date,
        });
    };
    unregister = () => {
        PushNotification.unregister();
    };
}
export const notificationManager = new NotificationManager();

Source: betterprogramming.pub

Push notification react native

/**
 * @format
 */

import PushNotificationIOS from '@react-native-community/push-notification-ios';
import { AppRegistry } from 'react-native';
import PushNotification from 'react-native-push-notification';
import App from './App';
import { name as appName } from './app.json';

// Must be outside of any component LifeCycle (such as `componentDidMount`).
PushNotification.configure({
  // (optional) Called when Token is generated (iOS and Android)
  onRegister: function (token) {
    console.log('TOKEN:', token);
  },

  // (required) Called when a remote is received or opened, or local notification is opened
  onNotification: function (notification) {
    console.log('NOTIFICATION:', notification);

    // process the notification
    // (required) Called when a remote is received or opened, or local notification is opened
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },

  // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
  onAction: function (notification) {
    console.log('ACTION:', notification.action);
    console.log('NOTIFICATION:', notification);
    // process the action
  },

  // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
  onRegistrationError: function (err) {
    console.error(err.message, err);
  },

  // IOS ONLY (optional): default: all - Permissions to register.
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  // Should the initial notification be popped automatically
  // default: true

  popInitialNotification: true,

  /**
   * (optional) default: true
   * - Specified if permissions (ios) and token (android and ios) will requested or not,
   * - if not, you must call PushNotificationsHandler.requestPermissions() later
   * - if you are not using remote notification or do not have Firebase installed, use this:
   *     requestPermissions: Platform.OS === 'ios'
   */

  requestPermissions: true,
});

AppRegistry.registerComponent(appName, () => App);

Source: betterprogramming.pub

Notification react native

yarn add react-native-push-notification

Source: github.com

React native notifications error

// Added by Youtube : CodingBite
buildscript {
    ext {
        //...
        kotlinVersion = "1.3.72"    //added for react native notifications
    }
    dependencies {
        //...
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.72"        //added for react native notifications
    }
}

Similar codes

0 vote163 views1 answer
Icon with label in react native
Javascript React
0 vote150 views3 answers
React native navigation change header title
Javascript React
2 votes145 views2 answers
React native image swiper
Javascript React
5 votes141 views1 answer
How to create component in reactjs
Javascript React
0 vote140 views1 answer
Preview image before upload reactjs
Javascript React
-2 votes137 views1 answer
React spring transition animations
Javascript React
0 vote205 views1 answer
Get call log in react native android
Javascript React
0 vote178 views1 answer
Text input underline react native
Javascript React
-1 vote164 views2 answers
React map example leaflets
Javascript React
9 votes132 views2 answers
How to redirect react router from the app components
Javascript React