jm-zion / rn-wave-bottom-bar Goto Github PK

View Code? Open in Web Editor NEW

293.0 4.0 24.0 33.21 MB

🌊 Animated Tab Bottom Bar for react-navigation

License: MIT License

JavaScript 8.13% Starlark 1.31% Java 13.67% Ruby 1.76% Objective-C 9.96% TypeScript 65.00% Shell 0.16%

animation bottom-tabs curved react-native react-navigation wave

rn-wave-bottom-bar's Introduction

rn-wave-bottom-bar

Custom animated bottom-tab-bar for react-native.

💾 Installation

Make sure you installed react-native-safe-area-context before installing the library

yarn add rn-wave-bottom-bar

npm install rn-wave-bottom-bar --save

📋 Requirements

React-Navigation v6 installed : https://reactnavigation.org/
React-native reanimated 2.+ installed : https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

⚒️ Usage

<Tab.Navigator
  screenOptions={{
    tabBarActiveTintColor: '#5F0B65',
    tabBarActiveBackgroundColor: '#5F0B65',
    tabBarInactiveBackgroundColor: 'red',
  }}
  tabBar={(props) => (
    <BottomFabBar
      mode={'square' | 'default'}
      isRtl={false}
      // Add Shadow for active tab bar button
      focusedButtonStyle={{
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 7,
        },
        shadowOpacity: 0.41,
        shadowRadius: 9.11,
        elevation: 14,
      }}
      // - You can add the style below to show screen content under the tab-bar
      // - It will makes the "transparent tab bar" effect.
      bottomBarContainerStyle={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
      }}
      {...props}
    />
  )}
>
  <Tab.Screen
    options={{
      tabBarIcon: tabBarIcon('aliwangwang-o1'),
    }}
    name="Home"
    component={generateScreen('Home')}
  />
  <Tab.Screen
    name="Meh"
    options={{ tabBarIcon: tabBarIcon('meh') }}
    component={generateScreen('Meh')}
  />
  <Tab.Screen
    options={{
      tabBarIcon: tabBarIcon('rocket1'),
      tabBarActiveBackgroundColor: '#45014A',
      tabBarActiveTintColor: 'purple',
    }}
    name="Settings"
    component={SettingsScreen}
  />
  <Tab.Screen
    options={{ tabBarIcon: tabBarIcon('Trophy') }}
    name="Trophy"
    component={generateScreen('Trophy')}
  />
  <Tab.Screen
    options={{ tabBarIcon: tabBarIcon('wallet') }}
    name="Wallet"
    component={generateScreen('Wallet')}
  />
</Tab.Navigator>

🔧 Props

Prop	Type	Description
springConfig	`Animated.SpringConfig`	Spring config for the animation

⚒️ Usage with react-navigation v5

Install the version 1.0.3 :

yarn add [email protected]

const Tab = createBottomTabNavigator();

const tabBarIcon =
  (name: string) =>
  ({
    focused,
    color,
    size,
  }: {
    focused: boolean;
    color: string; // Defines fab icon color
    size: number;
  }) =>
    <Icon name={name} size={28} color={focused ? 'white' : 'white'} />;

<NavigationContainer>
  <Tab.Navigator
    tabBarOptions={{
      activeTintColor: 'purple', // Used for the FAB background Color
    }}
    tabBar={(props) => <BottomFabBar color="purple" {...props} />}
  >
    <Tab.Screen
      options={{ tabBarIcon: tabBarIcon('aliwangwang-o1') }}
      name="Home"
      component={generateScreen('Home')}
    />
    <Tab.Screen
      name="Account"
      options={{ tabBarIcon: tabBarIcon('meh') }}
      component={generateScreen('Meh')}
    />
  </Tab.Navigator>
</NavigationContainer>;

Migration

TabBar:

tabBarOptions.activeTintColor -> screenOptions.tabBarActiveBackgroundColor

BottomFabBar :

color -> focusedButtonStyle

📄 Credits

Thanks to W.Candillon for the tuto : https://www.youtube.com/watch?v=6LsLgHeX500

Initial Design : https://uimovement.com/design/tab-bar-3/

Compatibility

✅ Works well with mosts Devices and tested on iPad, IPhones, Android Devices.

✅ Support device orientation.

✅ RTL support. (thanks darkhorse-coder)

📌 Checkout our other libraries :

rn-gauge : https://github.com/Winzana/rn-gauge
rn-exclude-system-gesture-area: https://github.com/Winzana/rn-exclude-system-gesture-area

rn-wave-bottom-bar's People

Contributors

Stargazers

Watchers

rn-wave-bottom-bar's Issues

tabBarBadge is not showing



<Tab.Screen
        options={{
          tabBarBadge: totalUnreadMessages ? totalUnreadMessages : undefined,
          tabBarIcon: ({focused}) => (
            <Icon
              name={
                focused ? 'chatbubble-ellipses' : 'chatbubble-ellipses-outline'
              }
              color={theme.white}
              size={28}
            />
          ),
        }}
        name="ChatsScreen"
        component={ChatsScreen}
        listeners={{
          tabPress: () => {
            ReactNativeHapticFeedback.trigger('impactMedium')
          },
        }}
/>

Font Styles cannot be provided for bottom tab labels

Feature Request

Please Provide a provision for Font Size, Font Style and Font Weight for Bottom Tab Labels.

Why is it needed?

The application's theme or general font sizes differ from that of the bottom tab. Hence customizing the bottom label fonts will be a very useful feature.

UI not proper on Tablet

Device Info:
Model Name: Lenovo Tab4 10
Android Version: 8.1.0

I have tried running my application on Tablet and the unselected icons are going outside the tab. Also the selected tab icon is not centred properly. Even the circle slightly appears to be oval and not round.

Can you please provide tablet support?

RTL support

My app uses I18Manager.forceRTL(true) wheneven an RTL locale is detected.
The rendered tab bar looks fuzzy and disturbed when rendered,

I managed to fix it on ios by stating direction: 'ltr' to the bottomBarContainerStyle

bottomBarContainerStyle={{ position: "absolute", bottom: 0, left: 0, direction: "ltr", right: 0, }}

on android it does not seem to be affected.

I am using "rn-wave-bottom-bar": "2.2.1",

Setting speed movement for circle/square button active

It is possible to set the speed movement for circle/square button active? i know there is props springConfig, but after iam working with it, it seem like to config the animation for the tab bar not the button active, thank you for the respons.

Issue with react-native-safe-area-context

After upgrading my react native version to 0.67.3, i got this error

dependencies

"react": "17.0.2",
"react-native": "0.67.3",
"rn-wave-bottom-bar": "^2.1.1"
"react-native-safe-area-context": "^4.1.2",
"@react-navigation/bottom-tabs": "^6.2.0",

Transparent block remains after hiding tabBar with display: 'none'

Hi! 👋

Firstly, thanks for your work on this project! 🙂

When hiding the tabBar with tabBarStyle: { display: 'none' }, a transparent block persists, preventing interaction with elements behind it. The issue can be fixed by adding pointerEvents="none" ,
I have attached screenshots demonstrating the issue and where the problem seems to reside within the component's styles. I hope this information is sufficient for a fix.

focused button issue

Hi, for bottom navigation in react native version "0.70.6", the focused button is not getting hidden for inactive tabs. For react native version 0.69 it is working perfectly fine. Attaching the video for reference.

Simulator.Screen.Recording.-.iPhone.14.-.2022-12-08.at.16.06.07.mp4

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

cocoapods

example/ios/Podfile

github-actions

.github/workflows/ci.yml

actions/checkout v3

borales/actions-yarn v4.2.0

borales/actions-yarn v4.2.0

borales/actions-yarn v4.2.0

borales/actions-yarn v4.2.0

borales/actions-yarn v4.2.0

actions/checkout v3

borales/actions-yarn v4.2.0

actions/setup-node v3

gradle

example/android/gradle.properties

com.facebook.flipper:flipper 0.189.0

com.facebook.flipper:flipper-network-plugin 0.189.0

com.facebook.flipper:flipper-fresco-plugin 0.189.0

example/android/settings.gradle

example/android/build.gradle

com.android.tools.build:gradle 8.0.0

example/android/app/build.gradle

androidx.swiperefreshlayout:swiperefreshlayout 1.1.0

gradle-wrapper

example/android/gradle/wrapper/gradle-wrapper.properties

gradle 8.1

npm

example/package.json

@react-native-community/masked-view 0.1.11

@react-navigation/bottom-tabs 6.5.7

@react-navigation/native 6.1.6

react 18.2.0

react-native 0.71.8

react-native-gesture-handler 2.9.0

react-native-paper 5.7.0

react-native-reanimated ^2.13.0

react-native-safe-area-context 4.5.1

react-native-screens 3.20.0

react-native-svg 13.9.0

react-native-vector-icons 9.2.0

@babel/core 7.21.4

@babel/runtime 7.21.0

@react-native-community/eslint-config 3.2.0

@types/jest 29.5.1

@types/react-native 0.72.0

@types/react-test-renderer 18.0.0

@typescript-eslint/eslint-plugin 5.59.0

@typescript-eslint/parser 5.59.0

babel-jest 29.5.0

babel-plugin-module-resolver 5.0.0

eslint 8.38.0

jest 29.5.0

metro-react-native-babel-preset 0.76.2

react-native-codegen 0.72.0

react-test-renderer 18.2.0

typescript 5.0.4

package.json

d3-shape ^3.0.0

@babel/core 7.21.4

@babel/runtime 7.21.0

@commitlint/cli 17.6.1

@commitlint/config-conventional 17.6.1

@react-native-community/bob 0.17.1

@react-native-community/eslint-config 3.2.0

@react-navigation/bottom-tabs 6.5.7

@react-navigation/native 6.1.6

@semantic-release/changelog 6.0.3

@semantic-release/git 10.0.1

@semantic-release/npm 10.0.3

@semantic-release/release-notes-generator 10.0.3

@types/jest 29.5.1

@types/react-native-vector-icons 6.4.13

@types/react-test-renderer 18.0.0

@typescript-eslint/eslint-plugin 5.59.0

add 2.0.6

babel-jest ^29.3.1

eslint 8.38.0

eslint-config-prettier 8.8.0

eslint-plugin-prettier 4.2.1

husky ^8.0.0

jest 29.5.0

jest-environment-jsdom ^29.3.1

lint-staged 13.2.1

metro-react-native-babel-preset 0.76.2

prettier 2.8.7

react 18.2.0

react-native 0.71.8

react-native-reanimated ^2.13.0

react-native-safe-area-context 4.5.1

react-native-svg 13.9.0

react-native-testing-library 2.2.0

react-native-typescript-transformer 1.2.13

react-native-vector-icons 9.2.0

react-test-renderer 18.2.0

semantic-release 21.0.1

ts-jest 29.1.0

tslint 6.1.3

tslint-react 5.0.0

typescript 5.0.4

@react-navigation/bottom-tabs *

@react-navigation/native *

react *

react-native *

react-native-safe-area-context ^4.2.1

react-native-vector-icons *

Check this box to trigger a request for Renovate to run again on this repository

color

how to change the navigation bar white background color to transparent? I mean the color which is behind the selected tab

Android unfocus shadow button after was focused

This is only on Android, there is a shadow that appeared after clicking and clicking on another button.
How I can control the unfocus button style?

React Navigation tabBarBadge property

Hello, does this library support tabBarBadge property?

https://reactnavigation.org/docs/tab-based-navigation/#add-badges-to-icons

Is there a way to set up a badge without rebuilding bar?

Add Tab Name or Label to the Tab Bar

Hi @Jm-Zion,

Thanks for the great library. It works like charm. One thing I would like to add yo my tabBar was the name or the label of the tabBar. Given the animating tab, is there any possibility of adding the label to the tab bar or at least to the tabs which are inactive currently.

Any help would be great. Thanks a ton.

Can't hide in specific screen

Stack Navigator (This should hide the Bottom Tab Bar when focused on "Home", "Levels" screens unfortunately it didn't). I only want to show the bottom-tab on MainScreen.

I think it did hide the @react-navigation/bottom-tabs but not the custom tab. I tried removing tabBar and it did hide actually

const Navigation = ({ navigation, route }) => {
  useLayoutEffect(() => {
    const tabHiddenRoutes = ['Home', 'Levels'];

    if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
      navigation.setOptions({ tabBarStyle: { display: 'none' } });
    } else {
      navigation.setOptions({ tabBarStyle: { display: 'flex' } });
    }
  }, [navigation, route]);

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="MainScreen" component={MainScreen} />
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Levels" component={Levels} />
    </Stack.Navigator>
  );
};

<Tab.Navigator
      backBehavior="none"
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.wrongLetter,
        tabBarInactiveTintColor: colors.textWhite,
        tabBarActiveBackgroundColor: colors.wrongLetter,
      }}
      tabBar={props => (
        <BottomFabBar
          {...props}
          mode="default"
          focusedButtonStyle={{
            shadowOffset: { width: 0, height: 7 },
            shadowColor: '#000',
            shadowOpacity: 0.41,
            shadowRadius: 9.11,
            elevation: 10,
          }}
          bottomBarContainerStyle={{
            position: 'absolute',
            height: 75,
            bottom: 0,
            left: 0,
            right: 0,
          }}
        />
      )}
    >
       <Tab.Screen .... />
       <Tab.Screen .... />
       <Tab.Screen .... />
       <Tab.Screen .... />
       <Tab.Screen .... />
    </Tab.Navigator>

Bottom bar overlapping screen

When i set bottomBarContainerStyle to absolute, bottom bar overlap screen.

bottomBarContainerStyle={{ position: 'absolute', bottom: 0, left: 0, right: 0, }}

If i unset bottomBarContainerStyle, looks weird..

If i set bottomBarContainerStyle to absolute,
overlap flatlist and scrollbar.

How can i fix this?

and also, focusedButtonStyle's shadow options are doesn't work.

Bottom tab bar is not hiding under keyboard / only taking the props of tabBarActiveBackgroundColor

i installed the library it is working fine but tab bar is not hiding under keyboard modal . i set the "tabBarHideOnKeyboard: true" in the screenOption. kindly let me the if there is any work around or solution whatever it is Thanks

Custom Header Not working.

I can't click my back button when navigate from bottomfab bar to other screen. the other screen header cant'use.