Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

how to make tab active [onsen with react js]



  • 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



  • Hi! any help???



  • @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.



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


  • @munsterlander no tab is active at all!

    0_1483038375514_Screen Shot 2016-12-29 at 20.05.43.png



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



  • @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?



  • @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?