@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 no tab is active at all!

@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;

Hi! I tried everything from tutorials. I also use props initialIndex but still couldn’t make tab active initially. I use onsen-react with meteor. please guide me too!

Hi!

@Julian-Wagner I also run the demo example but it doesn’t show the initial tab active at all! How can you make the first tab active when first going to the tab page?

Hi! any help???

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

okay thank you a lot :)

@munsterlander can you tell how can i use iOS flat on android? because when i run on android, the theme change to material design automatically

Since onsen ui is the framework for only front-end development, I suppose it would work with any backend language and language. Is it possible if I combine onsen with express js?