sb_rn/App.js at main · ahron1/sb_rn · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect} from 'react';
import messaging from '@react-native-firebase/messaging';
import GlobalProvider from './src/context/Provider';
import {Provider as PaperProvider} from 'react-native-paper';
import AppNavContainer from './src/navigations';
import PushNotification from 'react-native-push-notification';
import {Alert} from 'react-native';

const App = () => {
  PushNotification.createChannel(
    {
      channelId: 'notification_channel_1', // (required)
      channelName: 'notification_channel_1', // (required)
      playSound: true, // (optional) default: true
      soundName: 'default',
      vibrate: true, // (optional) default: true. Creates the default vibration pattern if true.
    },
    // created => console.log(`createChannel returned '${created}'`), // (optional) callback returns whether the channel was created, false means it already existed.
  );

  const notificationHelper = remoteMessage => {
    // console.log('FCM Notification', JSON.stringify(remoteMessage));

    if (remoteMessage.data.alert_title && remoteMessage.data.alert_body) {
      Alert.alert(
        remoteMessage.data.alert_title,
        remoteMessage.data.alert_body,
      );
    }
  };

  // assume remoteMessage object contains 1)notification 2)data

  //foreground notification
  useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      PushNotification.localNotification({
        channelId: 'notification_channel_1',
        message: remoteMessage.notification.body,
        title: remoteMessage.notification.title,
        largeIconUrl: remoteMessage.notification.android.imageUrl,
      });
      notificationHelper(remoteMessage);
    });
    return unsubscribe;
  }, []);

  //foreground notification
  // useEffect(() => {
  // const unsubscribe = messaging().onMessage(async remoteMessage => {
  // if (remoteMessage) {
  // notificationHelper(remoteMessage);
  // }
  // });
  //
  // return unsubscribe;
  // }, []);

  // background notification - from app background state
  useEffect(() => {
    messaging().onNotificationOpenedApp(remoteMessage => {
      if (remoteMessage) {
        notificationHelper(remoteMessage);
      }
    });
  }, []);

  // initial notification - from app quit state
  useEffect(() => {
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          notificationHelper(remoteMessage);
        }
      });
  }, []);

  return (
    <GlobalProvider>
      <PaperProvider>
        <AppNavContainer />
      </PaperProvider>
    </GlobalProvider>
  );
};

export default App;