how to make tab active [onsen with react js]

[iriekun]

Hello,

I follow this tutorial https://github.com/OnsenUI/react-onsenui-kitchensink/blob/master/main.js

but i couldn’t make the tab home active! I didn’t see any line of example code make tab active too but in demo the home tab is active.

Could you please tell me how to make a tab active(for example Home tab) by default? What I am trying to do is after user login it will link to the tab page with home tab active

thank you

[iriekun]

Hi! any help???

[munsterlander]

@iriekun As demonstrated in the help documents, this section sets the initial state:

getInitialState: function() {
    return {
      index: 0
    }
  }

The tabs are basically a 0 based array. Change the number to indicate the tab.

[iriekun]

@munsterlander i also tried it but it doesn’t work!!! I couldn’t understand why! It shoudn’t be that complicated!!! I also tried to use initialndex from this example
https://onsen.io/blog/react-onsen-ui-navigator-tabs/#nodebb/comments
but still it didn’t work too!

here is my code

class Home extends React.Component {
  gotoComponent(component) {
    this.props.navigator.pushPage({comp: component});
  }

  renderToolbar() {
    return (
      <Toolbar>
        <div className='center'>Home</div>
      </Toolbar>
    );
  }

  render() {
    return (
      <Page renderToolbar={this.renderToolbar}>
        <List
          renderHeader={() => <ListHeader>Components</ListHeader>}
          dataSource={[{
            name: 'Story Mission',
            component: StoryCarousel
		  }, {
            name: 'Speed dials',
            component: StoryCarousel
          }]}
          renderRow={(row) =>
            <ListItem tappable onClick={this.gotoComponent.bind(this, row.component)}>
              {row.name}
            </ListItem>
          }
        />
      </Page>
    );
  }
}

var Tabs = React.createClass({
	getInitialState: function() {
    return {
      index: 0
    }
  },
  renderTabs: function() {
    return [
      {
        content: <Home navigator={this.props.navigator}/>,
        tab: <Ons.Tab label="Home" icon="ion-ios-home-outline" active />
      },
      {
        content: <Home navigator={this.props.navigator} />,
        tab: <Ons.Tab label="Dialogs" icon="ion-ios-albums-outline" />
      },
      {
        content: <Home />,
        tab: <Ons.Tab label="Forms" icon="ion-edit" />
      }
    ];
  },

  render: function() {
    return (
      <Ons.Page>
        <Ons.Tabbar
          renderTabs={this.renderTabs}
        />
      </Ons.Page>
    );
  }
});

class App extends React.Component {
  renderPage(route, navigator) {
    const props = route.props || {};
    props.navigator = navigator;

    return React.createElement(route.component, props);
  }

  render() {
    return (
      <Ons.Navigator
        initialRoute={{component: Tabs, props: {key: 'main'}}}
        renderPage={this.renderPage}
      />
    );
  }
}

export default App;

[iriekun]

@munsterlander no tab is active at all!

[munsterlander]

@iriekun You have a lot of extra code that I stripped out to confirm the tabbar works. Here is your basic template working: https://codepen.io/munsterlander/pen/aBeXpb

[iriekun]

@munsterlander but when I put it in the meteor project, it still doesn’t show the initial tab! I tried everything now! Could it have the conflict with meteor or what?

[munsterlander]

@iriekun Well, I would guess that if the code I provided works until it is rolled in with Meteor, then Meteor is the source of the issue. Now what that is, I don’t know.

On a side note and personal thought, I always wonder why so many projects roll so many frameworks into one that duplicate a ton of the efforts. I question the need for Meteor to begin with and the same goes for Angular, React, the whole lot. Unless it is some huge and super complex application with a building of developers, it always seems like overkill.

Ok, off my rant and back to your problem. Is anything being output into the console at all?