Example of opening a screen based on a push notification

ios/RNNExample.xcodeproj/xcshareddata/xcschemes/RNNExample.xcscheme

@@ -80,7 +80,7 @@
       </AdditionalOptions>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

ios/RNNExample.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/RNNExample/AppDelegate.m

@@ -78,6 +78,8 @@ - (void)application:(UIApplication *)application didRegisterForRemoteNotificatio
 - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
 fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
 {
+  NSLog(@"didReceiveRemoteNotification hit !!!! ");
+  NSLog(@"UserInfo %@", userInfo);
   [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
 }
 // Required for the registrationError event.

js/features/entry-screen/component.js

@@ -11,6 +11,7 @@ class Entry extends React.Component {
       goToTab,
       goToLogin,
       goToCoinScreen,
+      gotToMessagesScreen,
       scheduleLocalNotification,
       promptNotificationPermission,
       name,
@@ -39,6 +40,9 @@ class Entry extends React.Component {
         <TouchableOpacity onPress={scheduleLocalNotification} style={style.textView}>
           <Text style={style.text}>Schedule local notification</Text>
         </TouchableOpacity>
+        <TouchableOpacity onPress={gotToMessagesScreen} style={style.textView}>
+          <Text style={style.text}>Messages Page</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -52,6 +56,7 @@ Entry.propTypes = {
   goToCoinScreen: PropTypes.func.isRequired,
   scheduleLocalNotification: PropTypes.func.isRequired,
   promptNotificationPermission: PropTypes.func.isRequired,
+  gotToMessagesScreen: PropTypes.func.isRequired,
 };
 
 export default Entry;

js/features/entry-screen/container.js

@@ -1,6 +1,8 @@
 import { connect } from 'react-redux';
+import { Alert, PushNotificationIOS } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import PushNotification from 'react-native-push-notification';
+
 import React from 'react';
 import BaseContainer from '../../shared/base-container'
 import { initializeApp } from '../../shared/app/actions';
@@ -9,19 +11,26 @@ import pages from '../../navigation/pages';
 import { getNavScreen } from '../../utils';
 import Entry from './component';
 
+import postMessage from '../messages/actions';
+
 const mapStateToProps = state => ({
   name: state.app.appName,
 });
 
 const mapDispatchToProps = dispatch => ({
   goToTabs: () => dispatch(initializeApp(navTypes.tab)),
+  postMessage: (message) => dispatch(postMessage(message)),
 });
 
 class EntryContainer extends BaseContainer {
   goToCounter = () => {
     this.props.navigator.push(getNavScreen(pages.COUNTER));
   };
 
+  gotToMessagesScreen = () => {
+    this.props.navigator.push(getNavScreen(pages.MESSAGES));
+  };
+
   goToTabs = () => {
     this.props.goToTabs();
   };
@@ -48,16 +57,26 @@ class EntryContainer extends BaseContainer {
     });
   };
 
+  handleNotification = (notification) => {
+    console.log( 'NOTIFICATION:', notification );
+    // Alert.alert('Push hit with message')
+    console.log('THe payload is');
+    console.log(notification.data.payload);
+    // this.poo
+    this.props.postMessage(notification.data.payload)
+    //// required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
+    notification.finish(PushNotificationIOS.FetchResult.NoData);
+    this.props.navigator.push(getNavScreen(pages.MESSAGES));
+  }
   promptNotificationPermission = () => {
     if (DeviceInfo.isEmulator()) {
       window.alert('This only works on a devie!');
       return;
     }
+
     // Push notification related code
     PushNotification.configure({
-      onNotification: function(notification) {
-        console.log( 'NOTIFICATION:', notification );
-      },
+      onNotification:this.handleNotification,
     });
   }
 
@@ -70,6 +89,7 @@ class EntryContainer extends BaseContainer {
         goToLogin={this.goToLogin}
         goToCoinScreen={this.goToCoinScreen}
         scheduleLocalNotification={this.scheduleLocalNotification}
+        gotToMessagesScreen={this.gotToMessagesScreen}
         promptNotificationPermission={this.promptNotificationPermission}
       />
     );

js/features/messages/actionTypes.js

@@ -0,0 +1,3 @@
+export default {
+  POST_MESSAGE: 'POST_MESSAGE',
+};

js/features/messages/actions.js

@@ -0,0 +1,13 @@
+import t from './actionTypes';
+/**
+ * Append a message to list
+ */
+export default function postMessage(message) {
+  console.log('postMessage hit with message ', message);
+  return dispatch => {
+    dispatch({
+      type: t.POST_MESSAGE,
+      message: message
+    });
+  };
+}

js/features/messages/component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+import style from './style';
+
+class Messages extends React.Component {
+  render() {
+    const { messages } = this.props;
+    const messageViews = [];
+    messages.map((message, index) => {
+      messageViews.push(
+        <View key={index}>
+          <Text> {message} </Text>
+        </View>
+      );
+    });
+    return (
+      <View style={style.container}>
+        <Text style={style.title}>Message Count: {messages.length}</Text>
+        <View style={style.messages}>{messageViews}</View>
+      </View>
+    );
+  }
+}
+
+Messages.propTypes = {
+  messages: PropTypes.array.isRequired,
+};
+
+export default Messages;

js/features/messages/container.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import React from 'react';
+import BaseContainer from '../../shared/base-container';
+import Messages from './component';
+
+
+const mapStateToProps = state => ({
+  messages: state.messages.messages,
+});
+
+const mapDispatchToProps = dispatch => ({
+});
+
+class MessagesContainer extends BaseContainer {
+  render() {
+    return <Messages {...this.props} />;
+  }
+}
+
+// Instantiate and make the magic happen
+const reduxContainer = connect(mapStateToProps, mapDispatchToProps)(
+  MessagesContainer
+);
+
+export default reduxContainer;

js/features/messages/reducers.js

@@ -0,0 +1,22 @@
+import t from './actionTypes';
+
+const defaultState = {
+  messages: [],
+};
+
+const messageScreen = (state = defaultState, action) => {
+  console.log('Message reducer hit');
+  switch (action.type) {
+    case 'LOGOUT':
+      return Object.assign({}, defaultState);
+    case t.POST_MESSAGE:
+      console.log('POST_MESSAGE hit with ', action);
+      return Object.assign({}, state, {
+        messages: [...state.messages, action.message]
+      });
+    default:
+      return state;
+  }
+};
+
+export default messageScreen;

js/features/messages/style.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+  messages: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 20,
+    margin: 15,
+    textAlign: 'center',
+  },
+  button: {
+    padding: 6,
+    margin: 10,
+    backgroundColor: 'red',
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: 'white',
+  },
+});

js/navigation/pages.js

@@ -9,6 +9,7 @@ const commonPages = {
   ERROR: 'error',
   COINS: 'coins',
   VERIFY: 'verify',
+  MESSAGES: 'messages',
 };
 
 const pages = Object.assign({}, commonPages);

js/reducers/index.js

@@ -7,6 +7,7 @@ import thunk from 'redux-thunk';
 import RehydrationServices from '../services/RehydrationServices';
 import colorScreen from '../features/color-screen/reducers';
 import counter from '../features/counter/reducer';
+import messages from '../features/messages/reducers';
 import crypto from '../features/coin-screen/reducers';
 import app from '../shared/app/reducers';
 import loading from '../shared/app/loading/reducers';
@@ -21,6 +22,7 @@ const appReducer = combineReducers({
   colorScreen,
   counter,
   crypto,
+  messages
 });
 
 const reducers = (state, action) =>

js/shared/routes.js

@@ -7,6 +7,7 @@ import LoginContainer from '../features/login-screen/container';
 import ColorContainer from '../features/color-screen/container';
 import CoinScreenContainer from '../features/coin-screen/container';
 import CounterContainer from '../features/counter';
+import MessagesContainer from '../features/messages/container';
 import pages from '../navigation/pages';
 
 const pageMap = [
@@ -18,6 +19,7 @@ const pageMap = [
   { id: pages.ERROR, component: ErrorContainer },
   { id: pages.COINS, component: CoinScreenContainer },
   { id: pages.VERIFY, component: VerifyContainer },
+  { id: pages.MESSAGES, component: MessagesContainer },
 ];
 
 export default pageMap;