react native navigator best way to model in a large app?

Question

I would like to know how to model an app with Navigator component of react-native for large app. I have two ways in mind:

• Firstly, We can use Navigator component as a top level component and pass down the props to each child components which required navigator object or use passProps to transfer them to next view and use props again to make them available to child components.
• Secondly, People are talking about the flux architecture and they say trigger some action and use that action to trigger the navigation for next view. This is good because we can check for various states and redirect or restrict user to different view e.g. loggedIn, loggedOut, Owner etc.

I tried to model navigation using second strategy with triggering some action and stores listening to it and emitting the change with state as the payload. Then, I check the Navigation Top View component to check for key and use if statement to trigger the navigation using this.prop.navigator.push. The problem, I encountered with this is navigator doesn't change for else if statements. Theoretically, it should work but it's not working and I have no clue.

For model one, I'm having problems with passing props down. It is messy!

Can someone provide me a sample modelled diagram or github app for any of the use case ?

Sample Code:

var Navigation = React.createClass({
  mixins: [FluxMixin, StoreWatchMixin("NavigationStore")],
  getStateFromFlux: function() {
    var flux = this.getFlux();

    console.log('Handled the Navigation: ', flux.store('NavigationStore').getState());
    // console.log(this.props.navigator);
    var currentState = flux.store("NavigationStore").getState();
    if(currentState.data.key !== undefined && currentState.data.key.explore !== undefined) {
      this.props.navigator.push({
        id: 'YETANOTHERVIEW',
        title: 'Yet Another View',
        component: SomethingView,
        navigationBar: <NavigationBar title="Something View" />,
        passProps: {
          navigator: this.props.navigator
        }
      });
    } else if(currentState.data.key !== undefined && currentState.data.key.other !== undefined) {
      this.props.navigator.push({
        id: 'OTHERVIEW',
        title: 'Other View',
        component: OtherView,
        navigationBar: <NavigationBar title="Other View" />,
        passProps: {
          navigator: this.props.navigator
        }
      });
    } else if(currentState.data.key !== undefined && currentState.data.key.appointments !== undefined) {
      AlertIOS.alert('Foo Title', 'My Alert Message');
    }
    return flux.store("NavigationStore").getState();
  },
  render: function() {
    return (
        <WelcomeView navigator={this.props.navigator} />
    );
  }
});

NavigatorStore:

var NavigationStore = Fluxxor.createStore({
  initialize: function() {
    this.data = {};

    this.bindActions(
      constants.CHANGE_NAVIGATION, this.onChangeNavigation,
    );
  },

  onChangeNavigation: function(payload) {
    console.log('on change navigation: ', payload);
    this.data = payload;
    this.emit("change");
  },

  getState: function() {
    return {
      data: this.data,
    };
  },
});

If Someone like to study the code, please go to this page: React Native Flux Navigation Discussion

I have three branches navigation, sidemenu-below and master. Sidemenu models the first case while Navigation models the second case.

UPDATE

I now have branches navigation, sidemenu-below, initial and master.

navigation is using flux actions. master is using props

other experiments are in sidemenu-below and initial branches.

Fixed the code, works fine!

Answer 1

Please check https://github.com/aksonov/react-native-router-flux, maybe it will help you and anybody who interesting to manage navigation within large app.

It allows to define all app transitions ('routes') within top-level app component (usually index.*.js) and then use something like Actions.logIn or Actions.logOut anywhere in the code to navigate to needed screen.