Material bottom tabs

Easy to create Bottom tabs

Building Bottom 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 bottom 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',
    props: {
      style: {
      
      }
    }
  }]
};

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

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

const bottomTabs = {
  name: 'BottomTabs',
  component: NANO.BOTTOM_TABS,
  navigatorProps: {
      activeColor: "yellow",
      inactiveColor: "black",
      barStyle: {
          backgroundColor: 'white',
          paddingVertical: 0,
          borderTopColor: "white",
          borderTopWidth: 0,
          elevation: 1,
          height: 70,
        },
      shifting: false
  },
  content: [
    {
      name: 'Feed',
      screen: feedScreen,
      props: {
        screenProps:{
          options:{
            tabBarIcon: "timeline"
          }
        }
      }
    },
    {
      name: 'Discussions',
      screen: discussionScreen,
      props: {
        screenProps:{
          options:{
            tabBarIcon: "comment"
          }
        }
      }
    }
  ]
};

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

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