/Javascript/React/React native push notifications npm

React native push notifications npm

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

React native push notifications npm

export const App = () => {
  const [permissions, setPermissions] = useState({});

  useEffect(() => {
    PushNotificationIOS.addEventListener('notification', onRemoteNotification);
  });

  const onRemoteNotification = (notification) => {
    const isClicked = notification.getData().userInteraction === 1;

    if (isClicked) {
      // Navigate user to another screen
    } else {notificat
      // Do something else with push ion
    }
  };
};

Source: npmjs.com

React native push notifications npm

import PushNotificationIOS from '@react-native-community/push-notification-ios';

Source: npmjs.com

Similar codes

7 votes270 views1 answer
The path argument must be of type string. received undefined react
Javascript React
7 votes261 views1 answer
How to place a line break in react native
Javascript React
0 vote228 views1 answer
Import button react-bootstrap
Javascript React
0 vote258 views1 answer
React native svg size
Javascript React
0 vote367 views1 answer
How to prevent clickjacking in react js
Javascript React
0 vote271 views1 answer
React hooks update parent state from child
Javascript React
-1 vote278 views1 answer
How to use error in react hook form
Javascript React
123 votes360 views3 answers
Set interval react
Javascript React
48 votes244 views1 answer
Emmet not working in react nextjs
Javascript React
1 vote267 views1 answer
How to detect onend reach of scrollview in react native
Javascript React