Material top tabs

Easy to create Top tabs

Building Top Tabs is very easy using Nano, All you need to know is how to create screen, you can learn creating screen here.

Below is the simple example how to create two page top tabs. First we need to create two screens, say one is Feed and another is Discussions like below.

const feedScreen = {
  v1: [{
    component: NANO.TEXT,
    name: 'text1',
    value: 'FEED'
  }],
};

const discussionScreen = {
  v1: [{
    component: NANO.TEXT,
    name: 'text2',
    value: 'DISCUSSIONS'
  }],
};

And add them to NANO.TAP_TABS component and later to screen like below.

 
const topTabs = {
  name: 'TopTabs',
  component: NANO.TOP_TABS,
  content: [
    {
      name: 'Feed',
      screen: feedScreen,
    },
    {
      name: 'Discussions',
      screen: discussionScreen,
    }
  ]
};

const screen = {
  name: 'Welcome',
  screen: {
    v1: [topTabs],
  },
  style: { flex: 1, justifyContent: 'center' },
};

That's it, Now you will see two top tabs created.