jm-zion/rn-wave-bottom-bar

🌊 Animated Tab Bottom Bar for react-navigation

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')
          },
        }}
/>

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?

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

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

color

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

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.

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>

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.

• chore(deps): update dependency @types/react-native-vector-icons to v6.4.18
• chore(deps): update dependency babel-plugin-module-resolver to v5.0.2
• chore(deps): update dependency ts-jest to v29.1.2
• chore(deps): update jest monorepo (@types/jest, babel-jest, jest, jest-environment-jsdom)
• chore(deps): update react-navigation monorepo (@react-navigation/bottom-tabs, @react-navigation/native)
• chore(deps): update semantic-release monorepo (@semantic-release/npm, semantic-release)
• chore(deps): update commitlint monorepo to v17.8.1 (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency @types/react-test-renderer to v18.3.0
• chore(deps): update dependency eslint-config-prettier to v8.10.0
• chore(deps): update dependency react-native to v0.74.0 (react-native, @types/react-native)
• chore(deps): update dependency react-native-safe-area-context to v4.10.1
• chore(deps): update dependency react-native-svg to v13.14.0
• chore(deps): update dependency typescript to v5.4.5
• chore(deps): update react monorepo to v18.3.1 (react, react-test-renderer)
• fix(deps): update dependency com.android.tools.build:gradle to v8.3.2
• fix(deps): update dependency react-native-gesture-handler to v2.16.0
• fix(deps): update dependency react-native-paper to v5.12.3
• fix(deps): update dependency react-native-screens to v3.31.1
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update borales/actions-yarn action to v5
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency react-native-svg to v15
• chore(deps): update dependency react-native-testing-library to v6
• chore(deps): update dependency react-native-vector-icons to v10
• chore(deps): update semantic-release monorepo (major) (@semantic-release/npm, @semantic-release/release-notes-generator, semantic-release)
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Open

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

• chore(deps): update dependency prettier to v2.8.8
• chore(deps): update babel monorepo to v7.24.4 (@babel/core, @babel/runtime)
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency gradle to v8.7
• chore(deps): update dependency lint-staged to v13.3.0
• chore(deps): update dependency metro-react-native-babel-preset to v0.77.0
• chore(deps): update dependency react-native-reanimated to v2.17.0
• chore(deps): update typescript-eslint monorepo to v5.62.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update flipper_version to v0.250.0 (com.facebook.flipper:flipper-network-plugin, com.facebook.flipper:flipper)
• chore(deps): update dependency react-native-reanimated to v3
• Click on this checkbox to rebase all open PRs at once

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

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.

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.

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",

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?

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.

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.

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?

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",

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.