logo noti android

App.js

@@ -8,6 +8,8 @@ import RootView from './src/RootView';
 import createSagaMiddleware from 'redux-saga';
 import rootSaga from './src/Saga/rootSaga';
 
+import FirebaseNotification from './src/helper/FirebaseNotification';
+
 let bootSplashLogo = require('./src/assets/images/iconSplash.png');
 
 let fakeApiCallWithoutBadNetwork = (ms) =>
@@ -58,6 +60,7 @@ let App = () => {
   return (
     <View style={styles.container}>
       <Provider store={store}>
+        <FirebaseNotification />
         <RootView />
       </Provider>
 

android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,10 @@
       android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true"
       >
+ <!-- <meta-data
+            android:name="com.google.firebase.messaging.default_notification_color"
+            android:resource="@color/bootsplash_background" /> -->
+
 
       <activity
         android:name=".MainActivity"

android/app/src/main/res/values/colors.xml

 <resources>
     <color name="bootsplash_background">#1C6AF6</color>
+ <color name="white">#1C6AF6</color>
+
 </resources>

src/Config/Functions.js

@@ -9,6 +9,17 @@ import {
 import moment from 'moment';
 import _ from 'lodash';
 
+import {DETAILNEW, NOTIFICATION} from '../routers/ScreenNames';
+
+export const convertScreen = (name) => {
+  switch (name) {
+    case 'CUSTOMER_NEWS':
+      return DETAILNEW;
+    default:
+      return DETAILNEW;
+  }
+};
+
 export const requestCameraPermission = async () => {
   try {
     const granted = await PermissionsAndroid.request(

src/Reducers/ScreenInit.js

+import {NEW_SCREEN, CLEAR_SCREEN} from '../actions/actionTypes';
+
+const initialState = {
+  screen: null,
+  id: null,
+};
+// @ts-ignore
+
+export default function ScreenInitReducer(state = initialState, action) {
+  switch (action.type) {
+    case NEW_SCREEN: {
+      console.log('action', action);
+      return {screen: action.body.screen, id: action.body.id_record};
+    }
+
+    default:
+      return state;
+  }
+}

src/Reducers/index.js

@@ -2,12 +2,14 @@ import userReducer from './userReducer';
 import {combineReducers} from 'redux';
 import ModalLoadingReducer from './ModalLoading';
 import SnackReducer from './SnackReducer';
+import ScreenInitReducer from './ScreenInit';
 
 // @ts-ignore
 const rootReducer = combineReducers({
   userReducer,
   ModalLoadingReducer,
   SnackReducer,
+  ScreenInitReducer,
 });
 
 export default rootReducer;

src/RootView.js

@@ -5,7 +5,6 @@ import {connect} from 'react-redux';
 import StackNavigation from './routers/StackNavigation';
 import Modal from 'react-native-modal';
 import {SkypeIndicator} from 'react-native-indicators';
-import FirebaseNotification from './helper/FirebaseNotification';
 import {enableScreens} from 'react-native-screens';
 
 enableScreens();
@@ -13,8 +12,6 @@ enableScreens();
 const RootView = (props) => {
   return (
     <View style={{flex: 1}}>
-      <FirebaseNotification />
-
       <Modal isVisible={props.loadingModal.isVisible}>
         <SkypeIndicator color={'white'} />
       </Modal>

src/Screens/NewFeed/DetailNew.js

@@ -6,6 +6,7 @@ import {WebView} from 'react-native-webview';
 import {root} from '../../apis/url';
 
 const DepositView = (props) => {
+  console.log(props.route);
   return (
     <View style={{flex: 1}}>
       <HeaderBack isWhite={true} title={'Chi tiết'} />

src/actions/ScreenInitAction.js

+import {NEW_SCREEN} from './actionTypes';
+
+export const newScreenInit = (body) => {
+  return {
+    type: NEW_SCREEN,
+    body,
+  };
+};

src/actions/actionTypes.js

@@ -17,3 +17,6 @@ export const UPDATE_REPORT_SUCCESSED = 'UPDATE_REPORT_SUCCESSED';
 
 export const UPDATE_REPORT = 'UPDATE_REPORT';
 export const SAVENAVIGATE = 'SAVENAVIGATE';
+
+export const NEW_SCREEN = 'NEW_SCREEN';
+export const CLEAR_SCREEN = 'CLEAR_SCREEN';

src/helper/FirebaseNotification.js

@@ -6,26 +6,60 @@ import AsyncStorage from '@react-native-community/async-storage';
 import KEY from '../assets/AsynStorage';
 import {showNotificaton, updateNotification} from '../actions/SnackBarAction';
 import {connect} from 'react-redux';
+import {newScreenInit} from '../actions/ScreenInitAction';
+
+import {convertScreen} from '../Config/Functions';
+
 const FirebaseNotification = (props) => {
   messaging().setBackgroundMessageHandler(async (remoteMessage) => {
     console.log('Message handled in the background!', remoteMessage);
   });
-
   messaging().onNotificationOpenedApp(async (remoteMessage) => {
-    console.log('Message handled in the background!', remoteMessage);
+    console.log('On notifi open app-----', remoteMessage);
   });
 
   useEffect(() => {
     requestUserPermission();
     const unsubscribe = messaging().onMessage(async (remoteMessage) => {
       console.log('A new FCM message arrived!', remoteMessage.data);
+      const {action_type, body, title, record_id} = remoteMessage.data;
       props.showNotificaton({
-        title: 'Title',
-        content: 'Content notification',
-        screen: 'NOTIFICATION',
-        id_record: 9,
+        title,
+        content: body,
+        screen: convertScreen(action_type),
+        id_record: record_id,
+      });
+    });
+
+    (async () => await messaging().registerDeviceForRemoteMessages())();
+    messaging().onNotificationOpenedApp((remoteMessage) => {
+      console.log(
+        'Notification caused app to open from background state:',
+        remoteMessage,
+      );
+      const {action_type, body, title, record_id} = remoteMessage.data;
+      props.newScreenInit({
+        screen: convertScreen(action_type),
+        id_record: record_id,
+      });
+    });
+    messaging()
+      .getInitialNotification()
+      .then((remoteMessage) => {
+        console.log(remoteMessage);
+        if (remoteMessage) {
+          console.log(
+            'Notification caused app to open from quit state:',
+            remoteMessage.data,
+          );
+          const {action_type, body, title, record_id} = remoteMessage.data;
+          props.newScreenInit({
+            screen: convertScreen(action_type),
+            id_record: record_id,
           });
+        }
       });
+
     return unsubscribe;
   }, []);
 
@@ -43,6 +77,7 @@ const FirebaseNotification = (props) => {
     let fcmToken = await AsyncStorage.getItem(KEY.FIREBASE);
     console.log(fcmToken);
     if (!fcmToken) {
+      console.log(fcmToken);
       fcmToken = await messaging().getToken();
       if (fcmToken) {
         AsyncStorage.setItem(KEY.FIREBASE, fcmToken);
@@ -58,6 +93,8 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connect(mapStateToProps, {showNotificaton, updateNotification})(
-  FirebaseNotification,
-);
+export default connect(mapStateToProps, {
+  showNotificaton,
+  newScreenInit,
+  updateNotification,
+})(FirebaseNotification);

src/routers/TabNavigation.js

@@ -30,6 +30,18 @@ const TabNavigator = (props) => {
     }, 3000);
   }, []);
 
+  useEffect(() => {
+    checkScreenInit();
+  }, [props.screenInit]);
+
+  const checkScreenInit = () => {
+    if (props.screenInit.screen) {
+      const {screen, id} = props.screenInit;
+      console.log(screen, id);
+      navigate.navigate(screen, {id: id});
+    }
+  };
+
   const showPopUp = () => {
     if (props.user.status == 1) {
       return confirmAlert(
@@ -115,6 +127,7 @@ const mapStateToProps = (state) => {
   return {
     user: state.userReducer,
     notifi: state.CountNotificationReducer,
+    screenInit: state.ScreenInitReducer,
   };
 };