hub / github.com/Mindinventory/react-native-tabbar-interaction

github.com/Mindinventory/react-native-tabbar-interaction @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

15 symbols 37 edges 11 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

React Native Tabbar 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


import {
  TabBar,
  TabsType,
} from "@mindinventory/react-native-tab-bar-interaction";
...

const tabs = [
  {
    name: 'Home',
    activeIcon: <Icon name="home" color="#fff" size={25} />,
    inactiveIcon: <Icon name="home" color="#4d4d4d" size={25} />
  },
  {
    name: 'list',
    activeIcon: <Icon name="list-ul" color="#fff" size={25} />,
    inactiveIcon: <Icon name="list-ul" color="#4d4d4d" size={25} />
  },
  {
    name: 'camera',
    activeIcon: <Icon name="camera" color="#fff" size={25} />,
    inactiveIcon: <Icon name="camera" color="#4d4d4d" size={25} />
  },
  {
    name: 'Notification',
    activeIcon: <Icon name="bell" color="#fff" size={25} />,
    inactiveIcon: <Icon name="bell" color="#4d4d4d" size={25} />
  },
  {
    name: 'Profile',
    activeIcon: <Icon name="user" color="#fff" size={25} />,
    inactiveIcon: <Icon name="user" color="#4d4d4d" size={25} />
  },

];
...

return (
  <TabBar
    tabs={tabs}       
    containerWidth={350}    
    onTabChange={(tab: TabsType, index: number) => 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.

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 sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.

Extension points exported contracts — how you extend this code

TabsDataType (Interface)

src/TabBar/TabBar.tsx

TabBarProps (Interface)

(no doc)

src/TabBar/TabBar.tsx

Core symbols most depended-on inside this repo

src/TabBar/TabBar.tsx

getPathXCenter

called by 1

src/TabBar/TabBar.tsx

getPathXCenterByIndex

called by 1

src/TabBar/TabBar.tsx

handleTabPress

called by 1

src/TabBar/TabBar.tsx

App

called by 0

example/src/App.tsx

Shape

Function 12

Interface 3

Languages

TypeScript100%

Modules by API surface

src/TabBar/TabBar.tsx8 symbols

example/src/App.tsx5 symbols

src/TabBar/TabItem.tsx1 symbols

src/TabBar/AnimatedCircle.tsx1 symbols

For agents

$ claude mcp add react-native-tabbar-interaction \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact