@tisch7/react-native-tab-bar-interaction
v1.0.5
Published
A tabbar component for React Native
Downloads
9
Maintainers
Readme
This package is a fork from https://github.com/Mindinventory/react-native-tabbar-interaction
It accepts 5 icons instead of 3
React Native Tabbar Interaction
Beautiful Tabbar Interaction with Sliding Inset FABs, made with React Native.
Check it out on Béhance (https://www.behance.net/gallery/68043143/Tab-bar-interaction-with-animated-icons)
Check it out on Dribbble (https://dribbble.com/shots/4844696-Tab-bar-interaction-with-animated-icons)
Read about how we made this on our blog (https://www.mindinventory.com/blog/create-tabbar-plugin-with-react-native/)
Installation
npm i mindinventory/react-native-tab-bar-interaction
Android: react-native run-android
iPhone: react-native run-ios
Usage
import TabBar from "@mindinventory/react-native-tab-bar-interaction";
...
render() {
return (
<TabBar bgNavBar="white" bgNavBarSelector="white" stroke="skyblue>
<TabBar.Item
icon={require('./tab1.png')}
selectedIcon={require('./tab1.png')}
title="Tab1"
screenBackgroundColor={{ backgroundColor: '#008080' }}
>
<View>
{/*Page Content*/}
</View>
</TabBar.Item>
<TabBar.Item
icon={require('./tab2.png')}
selectedIcon={require('./tab1.png')}
title="Tab2"
screenBackgroundColor={{ backgroundColor: '#F08080' }}
>
<View>
{/*Page Content*/}
</View>
</TabBar.Item>
<TabBar.Item
icon={require('./tab3.png')}
selectedIcon={require('./tab1.png')}
title="Tab3"
screenBackgroundColor={{ backgroundColor: '#485d72' }}
>
<View>
{/*Page Content*/}
</View>
</TabBar.Item>
</TabBar>
);
}
Component props
| prop | value | required/optional | description | | --- | --- | --- | --- | | icon | image source | required | the icon when item is not focus | | selectedIcon | image source | required | the icon when item is focus | | title | string | required | title of item | | screenBackgroundColor | string | required | background color of screen | | bgNavBar | string | option | background color of nav | | bgNavBarSelector | string | option | background color of nav selected | | stroke | string | option | border color of nav |
Dependencies
react-native-svg
Changelog
Version: 1.0
- Initial Build
LICENSE!
React-native-tabbar-interaction is MIT-licensed.
Let us know!
We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.