FluidBottomNavigation for React Native

This is a cloned version of fluidbottomnavigation-rn. This package have some additional parameters.

Example

To run the example project, clone the repo, and run npm install from the Example directory first.

Installation

It is available through npm. To install just run

npm i -s react-native-fluidbottomnavigation

in your project directory. And then link it's native dependency with

npm i -s react-native-view-overflow

and you're done!

Usage

import TabBar, { iconTypes } from "react-native-fluidbottomnavigation";

<TabBar
	activeTab={activeTab}
    iconStyle={{ width: 50, height: 50 }}
    tintColor="blue"
    onPress={(tabIndex) => {
        console.warn(tabIndex);
    }}
    iconActiveTintColor="black"
    iconInactiveTintColor="blue"
    tintColor="#f5f5f7"
    titleColor="red"
    titleFontFamily="Europa-Regular"
    isRtl={ true }
    iconSize={25}
    values={[
        { title: "Home", icon: "alarm", tintColor: curTab == 0 ? "red" : "blue", isIcon: true, iconType: iconTypes.MaterialIcons },
        { title: "Home1", image: require("./home.png"), tintColor: curTab == 1 ? "red" : "blue", },
        { title: "Home2", image: require("./home.png"), tintColor: curTab == 2 ? "red" : "blue", },
        { title: "Home3", image: require("./home.png"), tintColor: curTab == 3 ? "red" : "blue", },
        { title: "Home4", image: require("./home.png"), tintColor: curTab == 4 ? "red" : "blue", },
    ]}
/>

Customization

Optionally you can pass tintColor prop, to adjust styling to your app.

1. iconStyle => Now you can style your icon used in navigator without editing core module

2. isRtl => New feature for apps that requires rtl.

3. tintColor => tintColor in values let's you add specific color for each icon

4. activeTab => Now you can set currently focused tab with activeTab prop

5. containerBackgroundColor => Now you can change default container background color by passing color value to containerBackgroundColor prop

6. itemMaskBackgroundColor => Now you can change default mask color by passing color value to itemMaskBackgroundColor prop

7. iconSize => Now you can set icon size by passing integer value to iconSize prop

8. isIcon => Now you can choose either image or icon as tabbar icon by passing isIcon to each item prop

9. iconType => All icons from react-native-vector-icons are supported. Can import iconTypes to get all the supported types

10. iconActiveTintColor => Now you can change active icon tint color by passing iconActiveTintColor value

11. iconInactiveTintColor => Now you can change inactive icon tint color by passing iconInactiveTintColor value

12. titleFontFamily => Now you can change fontFamily of the title by passing font family to titleFontFamily

13. titleColor => Now you can change color of the title by passing color to titleColor

Extra paramters added

| Property | Type | Default | Description | Required | | ------------- | ------------- | ------------- | ------------- | ------------- | | iconStyle | ImageStyle | { width: 20, height: 20 } | iconStyle prop allows you to customize the icon used in bottom tab bar | false | | isRtl | Boolean | false | If you have rtl in your app, set valueto true and the bottom tab bar will show in reverse order | false | | tintColor | String | Black | You can assign custom color for each icon by passing tintColor prop along with title and icon. This can be used to assign unique color for active tab | false | | activeTab | Number | true | Now default tab by passing activeTab prop | null | | default (replaced with activeTab) | Boolean | false | Now default tab can be set by passing default prop along with title and icon. This can be used to focus aspecific tab before any user interaction | true | | containerBackgroundColor | String | white | Now you can change default container background color by passing color value to containerBackgroundColor prop. It accespts string and hex values | false | | itemMaskBackgroundColor | String | white | Now you can change default mask color by passing color value to itemMaskBackgroundColor prop. It accespts string and hex values | false | | iconSize | Number | 25 | Now you can set icon size by passing integer value to iconSize prop | false | | isIcon | Boolean | false | Now you can choose either image or icon as tabbar icon by passing isIcon to each item prop | false | | iconType | String | false | All icons from react-native-vector-icons are supported. Can import iconTypes to get all the supported types | false | | icon | Image or String | false | Valid image path or icon name if isIcon is set to true | false | | iconActiveTintColor | String | black | Valid color | false | | iconinactiveTintColor | String | black | Valid color | false | | titleFontFamily | String | undefined | Valid font family name | false | | titleColor | String | black | Color | false |

Note: Either image or icon is accepted. By default, library checks for image. If you want to show react native icon as tabbar icon, you must set isIcon to true and set value to icon prop

Author

Injas M T P

License

react-native-fluidbottomnavigation Component is available under the MIT license. See the LICENSE file for more info.