How to redirect to a page in React Native?

Question

this.props.navigator.push({
  component: MainView,
  passProps: {selectedTab: 'home', message: 'this is the messages'},
});

Is this the only way to redirect page? That said, when condition hit, I want to render another page, what is the right way to do in React Native?

Answer 1

There are quite a few different ways to do redirect the page. From the React Native docs, here are the methods available to Navigator:

push(route) - Navigate forward to a new route

pop() - Go back one page

popN(n) - Go back N pages at once. When N=1, behavior matches pop()

replace(route) - Replace the route for the current page and immediately load the view for the new route

replacePrevious(route) - Replace the route/view for the previous page

replacePreviousAndPop(route) - Replaces the previous route/view and transitions back to it

resetTo(route) - Replaces the top item and popToTop

popToRoute(route) - Go back to the item for a particular route object

popToTop() - Go back to the top item

To change view based on a condition, you can have a function that calls this.props.navigator to one of the above actions in the componentWillMount and componentWillUpdate, calling the function if a state variable changes.

I've built a basic demo here demonstrating this. (try replacing .replace with .push to see other common functionality) The code is also below (note the changeView function).

https://rnplay.org/apps/qHEJxQ

"use strict";

var React = require("react-native");

var {
    AppRegistry,
    StyleSheet,
    NavigatorIOS,
    Component,
    TouchableHighlight,
    StyleSheet,
    View,
  Text
} = React;

var project = React.createClass({
    render: function() {
        return (
            <NavigatorIOS
                style={{flex:1}}
                initialRoute={{
                    component: ProfileView,
                            title: 'ProfileView' 
                }}
            />
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

AppRegistry.registerComponent("project", () => project);

var LoginView = React.createClass({

  render: function() {
    return(
        <View style={{flex:1}}> 
            <Text style={{marginTop:100}}>Hello from LOGIN VIEW</Text>
      </View>
    )
  }

})

class ProfileView extends Component {
    constructor (props) {
        super(props);
        this.state = {
            signedin: false
        };
    }

    componentDidUpdate() {
        if(this.state.signedIn) {
        this.props.navigator.replace({
          component: LoginView,
          title: 'LoginView',
        })
      }
    }

    componentDidMount() {
        if(this.state.signedIn) {
        this.props.navigator.replace({
          component: LoginView,
          title: 'LoginView',
        })
      }
    }

    changeView() {
        this.setState({
        signedIn: true
      });
    }

    render () {
        return (
            <View style={styles.container}>
                <Text style={{marginTop:200}}>
                    Welcome
                </Text>
                    <TouchableHighlight onPress={ () => this.changeView() } style={{height:50, flexDirection: 'row', justifyContnet: 'center',backgroundColor: '#ddd'}}>
                    <Text style={{fontSize:20}}>Sign In</Text>
          </TouchableHighlight>
            </View>
        );
    }
};


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

module.exports = ProfileView;

Answer 2

You can do something like this in your initial route page -

renderScene(route, navigator) {
    switch (route.id) {
      case 'first-page':
        var AppFirstPage = require('./app/components/FirstPage');
        return <AppFirstPage navigator={navigator} route={route} user={this.data.user}/>;
        break;
      case 'login-page':
        var LoginPage = require('./app/components/LoginPage');
        return <LoginPage navigator={navigator} route={route}/>;
        break;
      case 'signup-page':
        var SignUpPage = require('./app/components/SignUpPage');
        return <SignUpPage navigator={navigator} route={route}/>;
        break;
    }
  },

and now whenever you want to go to a specific route, you can do -

this.props.navigator.push({
  id: 'signup-page',
  sceneConfig: Navigator.SceneConfigs.FloatFromBottom
})

Hope this helps. Cheers!