"Warm" launch push notifications - apple-push-notifications

Question

First off, "warm launch" means to launch the app from a background state using a system push notification.
I'm struggling to route my application to the proper screen for warm launch notifications.
On a cold launch, the notification is available via PushNotificationIOS.popInitialNotification(), but returns null on a warm launch. Responding to the 'notification' event is difficult, because there's no way that I'm aware of to determine if the app is launching from the background, or if it's receiving a notification while running in the foreground.
What is the proper way to handle warm launch notifications in React Native?
Here's my PushNotificationHandler, which wraps the core navigation of the app:
export default class PushNotificationHandler extends React.Component {
constructor(props) {
super(props)
this.state = {
modalInitialRoute: null,
modalOpen: false,
}
}
openModalWithRoute(route) {
this.setState({
modalInitialRoute: route,
modalOpen: true,
})
}
closeModal() {
this.setState({
modalOpen: false,
})
}
renderModal() {
const {
modalInitialRoute,
modalOpen,
} = this.state
return (
<Modal
close={() => this.closeModal()}
open={modalOpen}
initialRoute={modalInitialRoute}/>
)
}
componentWillMount() {
PushNotificationIOS.addEventListener('register', this._onPushNotificationRegistration)
PushNotificationIOS.addEventListener('notification', this._onPushNotification)
}
componentDidMount() {
this.requestPushNotificationPermission()
const notification = PushNotificationIOS.popInitialNotification()
if (notification) {
this.displayNotification(notification)
}
}
componentWillUnmount() {
PushNotificationIOS.removeEventListener('register', this._onPushNotificationRegistration)
PushNotificationIOS.removeEventListener('notification', this._onPushNotification)
}
requestPushNotificationPermission() {
PushNotificationIOS.checkPermissions((permissions) => {
// If no permissions are allowed, request permissions.
if (!(permissions.alert || permissions.badge || permissions.sound)) {
PushNotificationIOS.requestPermissions()
}
})
}
_onPushNotificationRegistration(deviceToken) {
const {
registerForPushNotifications,
} = this.props
const userId = this.props.parentId
registerForPushNotifications(userId, deviceToken)
}
_onPushNotification(notification) {
const {
receivePushNotification,
} = this.props
receivePushNotification(notification)
}
displayNotification(notification) {
const {
receivePushNotification
} = this.props
const data = notification.getData()
switch (data.type) {
case WORKSHEET_FEEDBACK:
this.openModalWithRoute({
component: SubmissionDetailsScreenContainer,
title: 'Submission Details',
key: 'submissionDetails',
props: {
submissionId: data.sID,
},
})
default:
break
}
}
render() {
//return this.renderModal()
return (
<View>
<View>
{this.props.children}
</View>
{this.renderModal()}
</View>
)
}
}

Answer 1

To listen for push notifications when the app is in the foreground or background add these two delegates to the bottom of your AppDelegate.m.
-(void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
UA_LINFO(#"Application received remote notification %#", userInfo);
[RCTPushNotificationManager application:application didReceiveRemoteNotification:userInfo]; }
-(void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
UA_LINFO(#"Application received remote notification -- UIBackgroundFetchResult: %#", userInfo);
[RCTPushNotificationManager application:application didReceiveRemoteNotification:userInfo];}
These delegates will call the RCTPushNotificationManager bridge passing the notification data which can then be handled from your app by listening to the notification event on the PushNotificationIOS component. You could register this handler from componentWillMount of your top-level component of your react native app.
PushNotificationIOS.addEventListener( 'notification', this._onNotification );

Answer 2

I accomplished this by creating an app state that stored wether the app was in background or foreground. When you use remote notification event handler, it pops only when you are currently in the app or coming in from a warm notification. So I just route the user only if the app was in background state and I received a remote notification. All handled in the componentDidMount I used redux to store the global state, but you could use another state handler.
componentDidMount() {
AppState.addEventListener('change', (appState) => {
if (currentAppState === 'background') {
this.props.dispatch(updateStatus(false));
} else if (currentAppState === 'active') {
this.props.dispatch(updateStatus(true));
}
});
PushNotificationIOS.addEventListener('notification', (notification) => {
if (this.props.status === false) {
let data = notification.getData();
this.props.remoteNavigator.resetTo({});
});
}
In this example this.props.status is wether my app is in the background or foreground. Which gets updated by the redux action updateStatus