Redirect to ReactNative component from webview

Question

I am using react native WebView to open some complex form steps. I want app user to redirect Android app Home page(react native component) after completing last step(http://example.com/completed/) in WebView.

Answer 1

I've solved that problem doing this:

_onLoad(state) {
    //I check the url to see if everything goes right
    if (state.url.indexOf(BASEURL + '/auth/success') != -1) {
      let token = state.url.split("token=")[1];
      token = token.substring(0, token.length - 4);
      //Here I'm caming back
      NavigationsActions.back();
      //In your case you might do something like this:
      NavigationsActions.replaceRoute({
          id: 'your route id'
      });
      SessionActions.setSession(token);
    }
}

I've found a great tutorial, which helps me to understand how it works here.

Here you have how my entire component looks like:

import React, { Component } from 'react';
import {
  StyleSheet,
  WebView,
  Text
} from 'react-native';
import NavigationsActions from '../../actions/NavigationsActions';
import NavigationConstants from '../../constants/NavigationConstants';
import RouteConstants from '../../constants/RouteConstants';
import SessionActions from '../../actions/SessionActions';

var BASEURL = 'http://localhost:8080';

class FacebookLogIn extends Component {
  render() {
    return (
      <WebView onNavigationStateChange={this._onLoad} style={styles.container} source={{ uri: BASEURL + '/auth/facebook' }}/>
    );
  }

  _onLoad(state) {
    console.log(state.url);
    if (state.url.indexOf(BASEURL + '/auth/success') != -1) {
      let token = state.url.split("token=")[1];
      token = token.substring(0, token.length - 4);
      NavigationsActions.back();
      SessionActions.setSession(token);
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

module.exports = FacebookLogIn;