React-Native render a page on push notification

Question

My index.ios.js responds to a push notifications. I want this to send the user to a different page if the phone is open. I am unsure how to do that. I am using OneSignals for push.

import React, { Component } from 'react';
import { ... } from 'react-native';

export default class Example extends Component {
    componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
    }

    onReceived(notification) {
        // triggers on push
    }

    renderScene(route, navigator){ 
      return <route.component navigator={navigator} />
    }

    render() {
        return (
            <Navigator initialRoute={{component: Login}} 
            renderScene={this.renderScene.bind(this)} />
        )
    }   
}

AppRegistry.registerComponent('Example', () => Example);

What I tried

I tried to changed the state then re-render the whole app which works temporarily but locks you in that page because the state cannot update.

forceRerender(route, navigator){
  return <BarberShow navigator={navigator}  />
}

render() {
  if(this.state.notification){
    return <Navigator initialRoute={{component: AppointmentShow}} renderScene={this.forceRerender.bind(this)}/>
  }else{
    return <Navigator initialRoute={{component: Login}} renderScene={this.renderScene.bind(this)} />
  }
}

Ata Mohammadi · Accepted Answer · 2017-02-21 09:10:10Z

Where did you changed the state in your code?

I'd also recommend you to use 'React-native-router-flux' which is a great module for managing navigation.

In case you use that :

import React, { Component } from 'react';
import { ... } from 'react-native';
import Actions from 'react-native-router-flux';

export default class Example extends Component {
    componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
    }

    onReceived(notification) {
        // triggers on push
        Actions.customView({notification})
    }

    renderScene(route, navigator){ 
      return <route.component navigator={navigator} />
    }

    render() {
        return (
            <Navigator initialRoute={{component: Login}} 
            renderScene={this.renderScene.bind(this)} />
        )
    }   
}

AppRegistry.registerComponent('Example', () => Example);

You can easily navigate user to any view/component and send the notification data to that view as well.

Mohamed Kamal · Accepted Answer · 2017-02-21 09:51:26Z

1

For react native I recommend to use Ex-Navigation you can use it in both (react native and exponent) and it's really good and east.

answered Feb 21, 2017 at 9:51

Mohamed Kamal

111 bronze badge

Comments

Alain Goldman · Accepted Answer · 2017-02-21 20:14:21Z

1

Solution

All you have to do is add a global scope variable to keep track of navigator so that index.ios.js has access to it.

var _navigator;
export default class Example extends Component {
    componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
    }

    onReceived(notification) {
        _navigator.push({
          component: NewPageHere
        });
    }

    renderScene(route, navigator){ 
      _navigator = navigator;
      return <route.component navigator={navigator} />
    }

    render() {
        return (
            <Navigator initialRoute={{component: Login}} 
            renderScene={this.renderScene.bind(this)} />
        )
    }   
}

edited Feb 21, 2017 at 20:14

answered Feb 21, 2017 at 18:14

Alain Goldman

2,9085 gold badges48 silver badges75 bronze badges

Collectives™ on Stack Overflow

React-Native render a page on push notification

What I tried

3 Answers 3

Comments

Comments

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I tried

3 Answers 3

Comments

Comments

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related