10clouds/fluidbottomnavigation-rn

Animated Tab Bar Component for React Native

FluidBottomNavigation for React Native

The Animated Tab Bar for React Native

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 fluidbottomnavigation-rn

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

react-native link react-native-view-overflow

and you're done!

Usage

This component requires just 2 props. onPress function, that should handle rendering tabs and an array of values objects that contains title and icons for given tabs.

<TabBar
  onPress={(tabIndex) => { this._handlePress(tabIndex) }}
  values={[
    { title: "News", icon: require("./assets/news.png") },
    { title: "Requests", icon: require("./assets/requests.png") },
    { title: "Events", icon: require("./assets/events.png") },
    { title: "Members", icon: require("./assets/members.png") },
    { title: "Account", icon: require("./assets/account.png") }
  ]}
/>

Customization

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

Author

Patryk Mierzejewski

License

FluidBottomNavigation Component is available under the MIT license. See the LICENSE file for more info.

fluidbottomnavigation-rn's Issues

How to move from one tab to another when onPress of any button

Hey guys,

Anyone discovered that how can we move from one tab to another tab with tab animation when we click on any touchable views or button.

Help would be appreciated!

Thanks

work with react-navigation

Hi. I think this animation is amazing! Any chance you could post an example with it being used with react-navigation?

Item's bubble quality isn't good ! (pixel pixel)

I have custom the tab bar with my own icons and titles but same as picture the bubble isn't clear ; pixels of blue circle are obvious 🙄🤔 what should I do make them like library's preview ?

I have use png icons and here is my code :
`
<TabBar
onPress={tabIndex => {
this.setState({
currentPage: tabIndex
})
}}
values={[
{ title: "منو", icon: require("../../assets/png/menu_stork.png") },
{ title: "گروه ها", icon: require("../../assets/png/group_stork.png") },
{ title: "پیام ها", icon: require("../../assets/png/message_stork.png") },
{ title: "درایو", icon: require("../../assets/png/drive_stork.png") },
{ title: "خانه", icon: require("../../assets/png/home_stork.png") }
]}
/>

`

监听问题

如何监听

proper way to render page

Hi I am trying to implement this within my app, I got the tabs to show but how do I link the pages to the tab. I pretty new to react-native so please forgive me if there is a simple solution.