react-navigation-side-tabs
Implements same navigation concepts as @react-navigation with some changes to support side navbar, with fully functional links and support for several methods already well documented into their docs
Support
EmulatorAndroid | DeviceAndroid | EmulatoriOS | DeviceiOS | SimulatorWeb |
---|---|---|---|---|
❓ | ✅ | ✅ | ❓ | ✅ |
Instalation
React-navigation-side-tabs depends into the @react-navigation package as mentioned above, i've tryed to keep as many support i could for the same properties. We can disscuss improvements and new properties
$ yarn add react-navigation-side-tabsor$ npm install react-navigation-side-tabs --save
Implementation
I've implemented two basic projects, one of them is using bottom-navigation
and other that only uses this package.
You can download and try yourself the package working, here's a basic implementation
; ;;; const Tab = ; const App = { return <TabNavigator initialRouteName="LinkScreen" tabBarOptions= activeTintColor: '#e91e63' iconHorizontal: true iconSize: 32 labelSize: 32 showLabel: true tabWidth: 130 > <TabScreen name="Home" component=Home options= title: 'Home Test' tabBarLabel: 'Home' <Ionicons name="md-home" color='#000' size=20 /> <Ionicons name="md-home" color=color size=size /> /> <TabScreen name="LinkScreen" component=Link options= tabBarLabel: 'Updates sada dasdas' <Ionicons name="md-home" color='#000' size=20 /> <Ionicons name="md-home" color=color size=size /> /> </TabNavigator> ;}
Important properties
Some of these properties already ued into the navigation package, but here they have some special use cases that need a special attention
Tab.Navigator.iconHorizontal
Defines if the the orientation of the icons and their labels, defaults for horizontal,
<TabNavigator tabBarOptions= iconHorizontal: true > ...</TabNavigator>
Tab.Navigator.iconSize
You can customize each icon size directly into the component passed to the Navigator
component, but i recommend using this property because we apply some validations and treatment using the iconSize to guarantee the labels width doesn't overflow the side panel.
<TabNavigator tabBarOptions= iconSize: 32 > ...</TabNavigator>
Tab.Navigator.labelSize
Defines the fontSize of the labels located into the side panel, you may don't need this if you configure only to show icons
<TabNavigator tabBarOptions= labelSize: 12 > ...</TabNavigator>
Tab.Navigator.showLabel
Defines if the render only icons or also respectivelly labels
<TabNavigator tabBarOptions= labelSize: 12 > ...</TabNavigator>
Tab.Navigator.tabWidth
By default, the sidetab width gonna be directly related to the iconSize if any value given, you configure your own width also.
<TabNavigator tabBarOptions= tabWidth: 160 > ...</TabNavigator>
Tab.Screen.title
Used to define the title in each screen, currently notsupporting stack navigation
<TabNavigator> <TabScreen options= title: 'Home Title Screen' > ... </TabScreen></TabNavigator>
Example web screen-shot
Roadmap
- Implement TS Support (Even using the base TS method from navigation, i've optioned to use vanillaJS because i don't quite familiar yet with TS, any help is well received!)
- Give more support for Header implementation
- Implements Eslint
- Redeploys npm package
- Create zeit.co web demos