How to jump to another view on or before render?

Question

Below is my index.ios.js and ProfileView.js, I want to navigate to LoginView from within ProfileView immediately if this.state.toContinue is false. I tried to push the view to this.props.navigator but it didn't work :(

// index.ios.js
"use strict";

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

var {
    AppRegistry,
    StyleSheet,
    NavigatorIOS,
} = React;

var ProfileView = require('./ProfileView');

var project = React.createClass({
    render: function() {
        return (
            <NavigatorIOS
                style={styles.navigationContainer}
                initialRoute={{
                    title: "Your Profile",
                    component: ProfileView
                }}
            />
        );
    }
});

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

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


// ProfileView.js
"use strict";

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

var LoginView = require("./LoginView");

var {
    Component,
    StyleSheet,
    View,
} = React;


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

    isSignedIn () {
        return false;
    }

    render () {
        if (!this.state.toContinue) {
            // jump to LoginView
        }

        return (
            <View style={styles.container}>
                <Text>
                    Welcome
                </Text>
            </View>
        );
    }
};


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

module.exports = ProfileView;

Any help is appreciated!

Answer 1

I'm pretty sure the reason it isn't working is that your "this" reference is being changed from where you want it to be by the if statement you have before it in the render function.

Check out what I have here. It is set up and working.

Note that there are known issues regarding the title in NavigatorIOS not functioning correctly when using .replace, discussed here and here.

The working code is also below:

"use strict";

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

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

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

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

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


// ProfileView.js
"use strict";

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

var LoginView = React.createClass({

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

})

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

    isSignedIn () {
        return false;
    }

    changeView() {
        this.props.navigator.replace({
        component: LoginView,
        title: 'LoginView',
      })
    }

    componentDidMount() {
      if (!this.state.toContinue) {
        this.changeView()
      }
    }

    render () {
        return (
            <View style={styles.container}>
                <Text>
                    Welcome
                </Text>
            </View>
        );
    }
};


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

module.exports = ProfileView;