Here's a simple example to demonstrate that how can we jump/open a specific screen based on the notification. For example, when a user clicks on the notification, the app should open and directly jump to notifications page instead of home page.
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
AsyncStorage,
BackAndroid,
Platform,
} from 'react-native';
import PushNotification from 'react-native-push-notification';
let initialRoute = { id: 'loginview' }
export default class MainClass extends Component
{
constructor(props)
{
super(props);
this.handleNotification = this.handleNotification.bind(this);
}
handleNotification(notification)
{
console.log('handleNotification');
var notificationId = ''
//your logic to get relevant information from the notification
//here you navigate to a scene in your app based on the notification info
this.navigator.push({ id: Constants.ITEM_VIEW_ID, item: item });
}
componentDidMount()
{
var that = this;
PushNotification.configure({
// (optional) Called when Token is generated (iOS and Android)
onRegister: function(token) {
console.log( 'TOKEN:', token );
},
// (required) Called when a remote or local notification is opened or received
onNotification(notification) {
console.log('onNotification')
console.log( notification );
that.handleNotification(notification);
},
// ANDROID ONLY: (optional) GCM Sender ID.
senderID: "Vizido",
// IOS ONLY (optional): default: all - Permissions to register.
permissions: {
alert: true,
badge: true,
sound: true
},
// Should the initial notification be popped automatically
// default: true
popInitialNotification: true,
/**
* (optional) default: true
* - Specified if permissions (ios) and token (android and ios) will requested or not,
* - if not, you must call PushNotificationsHandler.requestPermissions() later
*/
requestPermissions: true,
});
}
render()
{
return (
<Navigator
ref={(nav) => this.navigator = nav }
initialRoute={initialRoute}
renderScene={this.renderScene.bind(this)}
configureScene={(route) =>
{
if (route.sceneConfig)
{
return route.sceneConfig;
}
return Navigator.SceneConfigs.FadeAndroid;
}
}
/>
);
}
renderScene(route, navigator)
{
switch (route.id)
{
// do your routing here
case 'mainview':
return ( <MainView navigator={navigator} /> );
default:
return ( <MainView navigator={navigator} /> );
}
}
}