Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mindinventory/react-native-tabbar-interaction
Tabbar Component For React-Native
https://github.com/mindinventory/react-native-tabbar-interaction
android easy-to-use ios react-animation react-native react-native-component react-native-library react-native-navigation react-tab reactnative reactnative-animation-challenges rtl-support tabbar tabs
Last synced: 5 days ago
JSON representation
Tabbar Component For React-Native
- Host: GitHub
- URL: https://github.com/mindinventory/react-native-tabbar-interaction
- Owner: Mindinventory
- License: mit
- Created: 2018-08-07T13:21:43.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T10:29:00.000Z (about 1 month ago)
- Last Synced: 2025-01-10T16:07:15.058Z (12 days ago)
- Topics: android, easy-to-use, ios, react-animation, react-native, react-native-component, react-native-library, react-native-navigation, react-tab, reactnative, reactnative-animation-challenges, rtl-support, tabbar, tabs
- Language: TypeScript
- Homepage: https://www.mindinventory.com/react-native-app-development.php
- Size: 4.33 MB
- Stars: 823
- Watchers: 18
- Forks: 170
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Tabbar Interaction [](https://www.npmjs.com/package/@mindinventory/react-native-tab-bar-interaction)
Beautiful Tabbar Interaction with Sliding Inset FABs,
made for React Native with RTL support.
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)
# Installation
using npm:
```
npm install @mindinventory/react-native-tab-bar-interaction
```
using yarn:
```
yarn add @mindinventory/react-native-tab-bar-interaction
```
## Dependencies
- `react-native-reanimated`
### Supported platform
- Android
- Ios
# Usage
```js
import Tabbar from "@mindinventory/react-native-tab-bar-interaction";
...
const tabs = [
{
name: 'Home',
activeIcon: ,
inactiveIcon:
},
{
name: 'list',
activeIcon: ,
inactiveIcon:
},
{
name: 'camera',
activeIcon: ,
inactiveIcon:
},
{
name: 'Notification',
activeIcon: ,
inactiveIcon:
},
{
name: 'Profile',
activeIcon: ,
inactiveIcon:
},
];
...
return (
console.log('Tab changed')}
/>
);
```
## Component props
### Tabbar
| prop | value | required/optional | description |
| -------------------------- | -------- | ----------------- | -------------------------------------------------------------------- |
| tabs | array | required | It is user for showing icon and label. |
| tabBarContainerBackground | string | optional | Use for change tabBar container color. |
| onTabChange | function | required | Use to perform any action when click on tab. |
| containerBottomSpace | number | optional | Use to add space between tabBar container and from bottom of screen. |
| containerWidth | number | required | Use for set width of tabBar container |
| containerTopRightRadius | number | optional | Use for add top right radius on tabBar container |
| containerTopLeftRadius | number | optional | Use for add top left radius on tabBar container |
| containerBottomLeftRadius | number | optional | Use for add bottom left radius on tabBar container |
| containerBottomRightRadius | number | optional | Use for add bottom right radius on tabBar container |
| defaultActiveTabIndex | number | optional | Use to set default active tab |
| transitionSpeed | number | optional | Use to set transition speed |
| circleFillColor | string | optional | Use to set background color for circle |
### tabs
| properties | value | required/optional | description |
| ------------ | --------- | ----------------- | -------------------------------------------- |
| name | string | required | use for showing tab label. |
| activeIcon | component | required | Use for showing tab active icon/image. |
| inactiveIcon | component | required | Use for showing tab inactiveIcon icon/image. |
# LICENSE!
React-native-tabbar-interaction is [MIT-licensed](https://github.com/Mindinventory/react-native-tabbar-interaction/blob/master/LICENSE).
# 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.