Redirect to ReactNative component from webview

Question

I use my own WebView to open some complex form steps. I want the application user to redirect the Android application home page (respond to its own component) after completing the last step ( http://example.com/completed/ ) in the WebView.

Answer 1

I solved this problem by 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 found a great tutorial that helps me understand how it works here .

This is what my whole 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;

Answer 2

, -, , https://reactnavigation.org/docs/en/stack-actions.html.

- onNavigationStateChange 1-

1-

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

2- , , ,

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});

this.props.navigation.dispatch(navigateAction);