working notifications

App.js

@@ -1,26 +1,29 @@
 
-import React, { Component } from 'react';
+import React, { Component, useEffect, useState } from 'react';
 import {
   SafeAreaView,
   StyleSheet,
   View,
   Text,
   ImageBackground, 
-  Image
+  Image,
+  TouchableHighlight,
+  Alert
 } from 'react-native';
 
 import Dark  from './components/dark.js'
 import Light from './components/light.js'
 import Blue from './components/blue.js'
 
 import axios from 'axios';
+import PushNotificationIOS from '@react-native-community/push-notification-ios';
 
 class App extends Component {
 
   state = {
     background: null,
     precip: null,
-    temp: null
+    temp: null,
   }
 
   componentDidMount() {
@@ -53,8 +56,6 @@ class App extends Component {
       const celsius = temp - 273;
       let fahrenheit = Math.floor(celsius * (9/5) + 32);
 
-
-      console.log('esponse.data.weather[0].main', response.data)
       this.setState({ 
         precip: response.data.weather[0].main,
         temp: fahrenheit
@@ -64,6 +65,21 @@ class App extends Component {
     .catch(function () {
       console.log("Promise Rejected");
     });
+
+    this.timer = setInterval(() => this.sendLocalNotification(), 5000);
+
+    PushNotificationIOS.addEventListener(
+      'localNotification',
+      this.onLocalNotification,
+    );
+  }
+
+  componentWillUnmount() {
+    PushNotificationIOS.removeEventListener(
+      'localNotification',
+      this.onLocalNotification,
+    );
+    clearInterval(this.timer)
   }
 
   contents(){
@@ -117,6 +133,30 @@ class App extends Component {
     }
   }
 
+  sendLocalNotification = () => {
+    PushNotificationIOS.presentLocalNotification({
+      alertTitle: 'Your Weather Report',
+      alertBody: `${this.state.precip}, ${this.state.temp}°`,
+      applicationIconBadgeNumber: 1,
+    });
+  };
+
+  onLocalNotification = (notification) => {
+    const isClicked = notification.getData().userInteraction === 1
+
+    Alert.alert(
+      'Local Notification Received',
+      `${notification.getTitle()}
+      ${notification.getMessage()}`,
+      [
+        {
+          text: 'Dismiss',
+          onPress: null,
+        },
+      ],
+    )
+  };
+
   render() {
     return(
       <View style={styles.container}>

ios/Podfile.lock

@@ -296,6 +296,8 @@ PODS:
     - React-Core (= 0.63.2)
     - React-cxxreact (= 0.63.2)
     - React-jsi (= 0.63.2)
+  - RNCPushNotificationIOS (1.5.0):
+    - React
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -347,6 +349,7 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -415,6 +418,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCPushNotificationIOS:
+    :path: "../node_modules/@react-native-community/push-notification-ios"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -455,6 +460,7 @@ SPEC CHECKSUMS:
   React-RCTText: 1b6773e776e4b33f90468c20fe3b16ca3e224bb8
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
+  RNCPushNotificationIOS: 8025ff0b610d7b28d29ddc1b619cd55814362e4c
   Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

ios/weather_app_rn_easy_expense.xcodeproj/project.pbxproj

@@ -54,6 +54,7 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = weather_app_rn_easy_expense/main.m; sourceTree = "<group>"; };
 		2D02E47B1E0B4A5D006451C7 /* weather_app_rn_easy_expense-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "weather_app_rn_easy_expense-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D02E4901E0B4A5D006451C7 /* weather_app_rn_easy_expense-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "weather_app_rn_easy_expense-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
+		3EC51FE4251EDB780058058F /* weather_app_rn_easy_expense.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = weather_app_rn_easy_expense.entitlements; path = weather_app_rn_easy_expense/weather_app_rn_easy_expense.entitlements; sourceTree = "<group>"; };
 		4ADFBD18DF37FFBD94DB2E74 /* Pods-weather_app_rn_easy_expense-tvOS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-weather_app_rn_easy_expense-tvOS.debug.xcconfig"; path = "Target Support Files/Pods-weather_app_rn_easy_expense-tvOS/Pods-weather_app_rn_easy_expense-tvOS.debug.xcconfig"; sourceTree = "<group>"; };
 		5ED98BF8288758A56ABC248D /* libPods-weather_app_rn_easy_expense-weather_app_rn_easy_expenseTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-weather_app_rn_easy_expense-weather_app_rn_easy_expenseTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		6968702F04928965F831B114 /* Pods-weather_app_rn_easy_expense-tvOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-weather_app_rn_easy_expense-tvOS.release.xcconfig"; path = "Target Support Files/Pods-weather_app_rn_easy_expense-tvOS/Pods-weather_app_rn_easy_expense-tvOS.release.xcconfig"; sourceTree = "<group>"; };
@@ -125,6 +126,7 @@
 		13B07FAE1A68108700A75B9A /* weather_app_rn_easy_expense */ = {
 			isa = PBXGroup;
 			children = (
+				3EC51FE4251EDB780058058F /* weather_app_rn_easy_expense.entitlements */,
 				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
@@ -161,7 +163,6 @@
 				F2B95EADEBEAE09FD15DBFEB /* Pods-weather_app_rn_easy_expense-weather_app_rn_easy_expenseTests.debug.xcconfig */,
 				78F1A2616B1DAAB5428FA087 /* Pods-weather_app_rn_easy_expense-weather_app_rn_easy_expenseTests.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -655,6 +656,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_ENTITLEMENTS = weather_app_rn_easy_expense/weather_app_rn_easy_expense.entitlements;
 				CURRENT_PROJECT_VERSION = 1;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = weather_app_rn_easy_expense/Info.plist;
@@ -678,6 +680,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_ENTITLEMENTS = weather_app_rn_easy_expense/weather_app_rn_easy_expense.entitlements;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = weather_app_rn_easy_expense/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

ios/weather_app_rn_easy_expense.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

ios/weather_app_rn_easy_expense/AppDelegate.h

@@ -1,7 +1,9 @@
+#import <UserNotifications/UNUserNotificationCenter.h>
+
 #import <React/RCTBridgeDelegate.h>
 #import <UIKit/UIKit.h>
 
-@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>
 
 @property (nonatomic, strong) UIWindow *window;
 

ios/weather_app_rn_easy_expense/AppDelegate.m

@@ -1,4 +1,6 @@
 #import "AppDelegate.h"
+#import <UserNotifications/UserNotifications.h>
+#import <RNCPushNotificationIOS.h>
 
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
@@ -43,6 +45,9 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
+  // Define UNUserNotificationCenter
+  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
+  center.delegate = self;
   return YES;
 }
 
@@ -55,4 +60,47 @@ - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 #endif
 }
 
+//Called when a notification is delivered to a foreground app.
+-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
+{
+  completionHandler(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge);
+}
+
+// Required to register for notifications
+- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
+{
+ [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
+}
+// Required for the register event.
+- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
+{
+ [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+}
+// Required for the notification event. You must call the completion handler after handling the remote notification.
+- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
+fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
+{
+  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+}
+// Required for the registrationError event.
+- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
+{
+ [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
+}
+// IOS 10+ Required for localNotification event
+- (void)userNotificationCenter:(UNUserNotificationCenter *)center
+didReceiveNotificationResponse:(UNNotificationResponse *)response
+         withCompletionHandler:(void (^)(void))completionHandler
+{
+  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
+  completionHandler();
+}
+// IOS 4-10 Required for the localNotification event.
+- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
+{
+ [RNCPushNotificationIOS didReceiveLocalNotification:notification];
+
+}
 @end
+
+

ios/weather_app_rn_easy_expense/Info.plist

@@ -39,6 +39,10 @@
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>remote-notification</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>

ios/weather_app_rn_easy_expense/weather_app_rn_easy_expense.entitlements

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>aps-environment</key>
+	<string>development</string>
+</dict>
+</plist>

package.json

@@ -10,9 +10,11 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/push-notification-ios": "^1.5.0",
     "axios": "^0.20.0",
     "react": "16.13.1",
-    "react-native": "0.63.2"
+    "react-native": "0.63.2",
+    "react-native-push-notification": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",