mindinventory/react-native-tabbar-interaction

Tabbar Component For React-Native

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-svg
• react-native-svg-transformer

Configure dependencies in file metro.config.js update this module export.

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

create one declarations.d.ts in your root directory.

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

Supported platform

• Android
• Ios

Usage

import Tabbar 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}
    tabBarContainerBackground='#6699ff'
    tabBarBackground='#fff'
    activeTabBackground='#6699ff'
    labelStyle={{ color: '#4d4d4d', fontWeight: '600', fontSize: 11 }}
    onTabChange={() => 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.
tabBarBackground	string	required	Use for change tabBar background color.
activeTabBackground	string	optional	Use for change active tab background color.
labelStyle	style	optional	Use for apply style on tab label.
onTabChange	function	optional	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	optional	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

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.

Version Migration

Version: 2.2.2

How to migrate version 1.0.0 to 2.1.2+.

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.

react-native-tabbar-interaction's Issues

how we can add more than 3 tab ,is there any alternate options for it?

I have 5 tab, i want to use this library for tab. but i'm not able add more than 3 tab.
showing error like this " Three tab should be work."

Can I use this plugin with React Navigation createBottomTabNavigator?

I need to change the default createBottomTabNavigator design to this plugin can I do that?

Getting Module Parse Failure for this

Getting following error :
~node_modules/@mindinventory/react-native-tab-bar-interaction/TabBar.js 29:12

Module parse failed: Unexpected token (29:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| return (

        <View style={{flex: 1}}>

| {child}
|

Add typings for TypeScript

Please, add typings for this component to use it with TypeScript.

run in android not work like demo

Hi. Sir.
Could you check lib run in Android. I run in Android and curve of tabbar not like demo, Could you give me code draw curve like demo, please

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module `react-native-tab-bar-interaction` from `/Users/Ton/Desktop/Internship/navigationDemo/App1.js`: Module `react-native-tab-bar-interaction` does not exist in the Haste module map This might be related to https://github.com/facebook/react-native/issues/4968

I have this problem anybody can solve it.( My react native version 3) or this library cannot support in version 3

تب bar

Already added dependency but still error

I have added dependency using

npm i mindinventory/react-native-tab-bar-interaction

It throws error: bundling failed: Error: Unable to resolve module react-native-tab-bar-interaction
Module react-native-tab-bar-interaction does not exist in the Haste module map

Could not resolve dependency

Hi All,

I'trying to install react-native-tabbar-interaction but I'm getting this error:

fadeIn in selectedIcon

How can I add fadeIn in selectedIcon?

How can we change transition speed ?

Hello
Good job!
Hoe can we change speed of transition?
If this is not already added in the functionality then please add it.

And also i have one more issue in the library like when application comes from background that time icon is not display.

Tabs get fixed when opening keyboard

I have a screen with inputs, when I type something Tabs on with the keyboard, I'm trying to keep it down, but I still can't

Use SVG as tab icons

This package is really slicky and nice as i was able to install it and use it.
The truth is, what attracted me was the transitions of the SVG images been used as the Tab Icons.

But now, i am stuck with using a still image as the tab icons.

So my question is how can i use an SVG image as the tab icons so that my icon transition would be complete as we have in the demo image design.

Failed to compile, because of not resolving path

If I want to compile it, I always get message:

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve './Tabbar/TabBar' in '/var/www/.../node_modules/@mindinventory/react-native-tab-bar-interaction'

Is there something wrong with the paths?

Types error when using with typescript/tsx

I am getting below errors when using this awesome package with typescript.

I have followed the installation instructions as specified on the package's github page

Even though I do have skipLibCheck: true in tsconfig's compilerOptions and also have 'node_moduels in the excluded list of tsconfig, not sure why getting these errors, most of these are for the type discrepancies in node_modules/@mindinventory/react-native-tab-bar-interaction folder.

Please help

Adding more screens

hello, I am working on a project and loved to use this Tabbar, I am having issues here, I am to use five screen against the recommended three screens. Please how to i go about this

Change active tab

Hello! Thank you a lot for your job!
I have one question: How i can change active tab by default? Now default active slide is first, but i want change it on therty

Custom Screen

How can i goto custom screen if i select and tab.

5 item tabbar

hi
did u solve add 5 item to menu?
that for responsibility

Already added three tab items but still returns an Error: "Error: Three tab should be work"

import React, { Component } from 'react';
import {View} from 'react-native';
import { Container, Header, Content, Card, CardItem, Text, Body } from 'native-base';
import TabBar from "react-native-tab-bar-interaction";

export default class App extends Component {
render() {
return (

        <TabBar.Item
         icon={require('./images/jeepney.png')}
         selectedIcon={require('./images/noimage.png')}
         title="Tab1"
         screenBackgroundColor={{ backgroundColor: '#008080' }}
     >
        
      Tab First
        
        </TabBar.Item>

        <TabBar.Item
         icon={require('./images/parking.png')}
         selectedIcon={require('./images/noimage.png')}
         title="Tab2"
         screenBackgroundColor={{ backgroundColor: '#F08080' }}
     >
        
        Tab Second
        
        </TabBar.Item>

        <TabBar.Item
         icon={require('./images/shuttle.png')}
         selectedIcon={require('./images/noimage.png')}
         title="Tab3"
         screenBackgroundColor={{ backgroundColor: '#485d72' }}
     >
         
         Tab Third
         
         </TabBar.Item>

         

);

}
}

Hello

No valid versions available for react-native-tab-bar-interaction

A workaround is to install it like npm install https://github.com/Mindinventory/react-native-tabbar-interaction.git, but regular npm install is not working. It throws No valid versions available for react-native-tab-bar-interaction

this doesn't look like the animation...

In Android selected icon is cutting.

Hi,

Thanks a lot for this wonderful library. In iOS its working fine but in Android I am facing issue. The selected icon in the circle is getting cut. Will you please guide me here.

How to add one more tab? It will be more helpful if it supports 4 tabs too.

NavBar not transparent after import ScrollView or FlastList on Page Content

<View style={styles.container}>
                <TabBar>
                    <TabBar.Item
                        icon={require('../../Images/certificate.png')}
                        selectedIcon={require('../../Images/certificate.png')}
                        title="Tab1"
                        screenBackgroundColor={{ backgroundColor: COLORS.COLOR_VIBLO }}
                    >
                        <View style={{flex: 1, backgroundColor: 'yellow'}}>
                            <ScrollView>
                                <Text>12321</Text>
                                ....
                            </ScrollView>
                        </View>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={require('../../Images/profile.png')}
                        selectedIcon={require('../../Images/profile.png')}
                        title="Tab2"
                        screenBackgroundColor={{ backgroundColor: '#F08080' }}
                    >
                        <View>
                            {/*Page Content*/}
                        </View>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={require('../../Images/trophy.png')}
                        selectedIcon={require('../../Images/trophy.png')}
                        title="Tab3"
                        screenBackgroundColor={{ backgroundColor: '#485d72' }}
                    >
                    <View>
                        {/*Page Content*/}
                    </View>
                    </TabBar.Item>
                </TabBar>
            </View>

Missing " in documentation

      <TabBar bgNavBar="white" bgNavBarSelector="white" stroke=**"skyblue**>
      here a " is missing after skyblue
      
      don't know if this is the right place to submit such an issue. First timer here!

In Android keyboard shifts the tab bar up.

Hi,

In Android, I am facing an issue. I have multiple TextInputs. When I click on any of the TextInput, the keyboard shifts the tab bar. I am attaching the screenshots.

Please help.

Thanks :)

wrong position in rtl

I just make the width 200 to produce the issue and you can understand what I am take about

Warning to set useNativeDriver to true or false

Request to add source code for the example shown in the gif

tab is not responsive in all devices uses same size width and height