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

• Firstly, We can use Navigator ponent as a top level ponent and pass down the props to each child ponents which required navigator object or use passProps to transfer them to next view and use props again to make them available to child ponents.
• 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 ponent 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',
        ponent: 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',
        ponent: 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 (
        <WeleView 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!

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

• Firstly, We can use Navigator ponent as a top level ponent and pass down the props to each child ponents which required navigator object or use passProps to transfer them to next view and use props again to make them available to child ponents.
• 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 ponent 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',
        ponent: 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',
        ponent: 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 (
        <WeleView 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!

• javascript
• ios
• reactjs
• react-native

• It's many lines of code, what should I do ? – Piyush Chauhan Commented Jul 20, 2015 at 8:39
• I'm using Fluxxor and now provided sample code should be fine. @zvona – Piyush Chauhan Commented Jul 20, 2015 at 8:43

2 Answers 2

Please check https://github./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 ponent (usually index.*.js) and then use something like Actions.logIn or Actions.logOut anywhere in the code to navigate to needed screen.

I was able to fix the issue, it should work fine in the repository given.

I forgot to import the View and Text from React in other_view.js file. Silly Mistake!