CODEWITHSUNDEEP
javascriptiosreactjsreact-native
Piyush Chauhan
Piyush Chauhan

Reputation: 1543

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

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:

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!

Upvotes: 5

Views: 5588

Answers (2)

aksonov
aksonov

Reputation: 853

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.

Upvotes: 7

Piyush Chauhan
Piyush Chauhan

Reputation: 1543

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!

Upvotes: 0

Related Questions