How can I hide the bottom bar on other screens of Navigation Stack?

[hoaphantn7604]

How can I hide the bottom bar on other screens of Navigation Stack?

[Amitdutta121]

Thank you for the clarification.

[hoaphantn7604]

hi All,
Refer Ex:

import React from 'react';
import { Alert, Animated, TouchableOpacity, View } from 'react-native';
import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
import { scale } from 'react-native-size-scaling';
import Ionicons from 'react-native-vector-icons/Ionicons';
import HomeScreen from 'screens/home';
import SettingScreen from 'screens/setting';
import { styles } from './styles';

export const bottomBarRef = React.createRef<any>();
// bottomBarRef?.current?.setVisible(false); //Hidden
// bottomBarRef?.current?.setVisible(true); //Visible

export const tabBar = () => {
  const _renderIcon = (routeName: string, selectedTab: string) => {
    let icon = '';

    switch (routeName) {
      case 'title1':
        icon = 'ios-home-outline';
        break;
      case 'title2':
        icon = 'settings-outline';
        break;
    }

    return <Ionicons name={icon} size={scale(25)} color={routeName === selectedTab ? 'black' : 'gray'} />;
  };
  const renderTabBar = ({ routeName, selectedTab, navigate }: any) => {
    return (
      <TouchableOpacity
        onPress={() => navigate(routeName)}
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        {_renderIcon(routeName, selectedTab)}
      </TouchableOpacity>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <CurvedBottomBar.Navigator
        ref={bottomBarRef}
        style={styles.bottomBar}
        strokeWidth={0.5}
        height={scale(55)}
        circleWidth={scale(55)}
        bgColor="white"
        initialRouteName="title1"
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View style={styles.btnCircle}>
            <TouchableOpacity
              style={{
                flex: 1,
                justifyContent: 'center',
              }}
              onPress={() => Alert.alert('Click Action')}>
              <Ionicons name={'apps-sharp'} color="gray" size={scale(25)} />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar={renderTabBar}>
        <CurvedBottomBar.Screen name="title1" position="LEFT" component={({ navigate }) => <HomeScreen />} />
        <CurvedBottomBar.Screen name="title2" position="RIGHT" component={({ navigate }) => <SettingScreen />} />
      </CurvedBottomBar.Navigator>
    </View>
  );
};

[hoaphantn7604]

Hi @iamsaadMehmood ,
I’m working on it.

[iamsaadMehmood]

hi @hoaphantn7604,
Sure and Thanks for replying

[hoaphantn7604]

hi @iamsaadMehmood ,
Now has more method setVisible. Used to hide/show the tab bar. Ex: ref.current.setVisible(false).
Please install later version (2.1.0).

[Amitdutta121]

Can you be a little more descriptive about how to use the setVisible method?

[hoaphantn7604]

Hi @Amitdutta121 ,
Use react Ref. Call method ref.current.setVisible(false) to hidden, ref.current.setVisible(true) to show.

[Amitdutta121]

How to get the ref of the bottom tab?

[iamsaadMehmood]

@hoaphantn7604 we can use it by navigation.getParent()?.setVisible(false) right??

[Amitdutta121]

not able to use it this way cause it says "undefined" is not a function

[amit-bs23]

@iamsaadMehmood I faced a problem where Touchable opacity is not working on top of the screen after using this library. Manly, if you had any button at the top of the screen, the android touch event does not register. Did you face such problems?

[hoaphantn7604]

@iamsaadMehmood I faced a problem where Touchable opacity is not working on top of the screen after using this library. Manly, if you had any button at the top of the screen, the android touch event does not register. Did you face such problems?

Re-check with later version 2.1.1

[vipulchakravarthy]

@hoaphantn7604 @iamsaadMehmood

hi All, Refer Ex:

import React from 'react';
import { Alert, Animated, TouchableOpacity, View } from 'react-native';
import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
import { scale } from 'react-native-size-scaling';
import Ionicons from 'react-native-vector-icons/Ionicons';
import HomeScreen from 'screens/home';
import SettingScreen from 'screens/setting';
import { styles } from './styles';

export const bottomBarRef = React.createRef<any>();
// bottomBarRef.current.setVisible(false); //Hidden
// bottomBarRef.current.setVisible(false); //Visible

export const tabBar = () => {
  const _renderIcon = (routeName: string, selectedTab: string) => {
    let icon = '';

    switch (routeName) {
      case 'title1':
        icon = 'ios-home-outline';
        break;
      case 'title2':
        icon = 'settings-outline';
        break;
    }

    return <Ionicons name={icon} size={scale(25)} color={routeName === selectedTab ? 'black' : 'gray'} />;
  };
  const renderTabBar = ({ routeName, selectedTab, navigate }: any) => {
    return (
      <TouchableOpacity
        onPress={() => navigate(routeName)}
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        {_renderIcon(routeName, selectedTab)}
      </TouchableOpacity>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <CurvedBottomBar.Navigator
        ref={bottomBarRef}
        style={styles.bottomBar}
        strokeWidth={0.5}
        height={scale(55)}
        circleWidth={scale(55)}
        bgColor="white"
        initialRouteName="title1"
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View style={styles.btnCircle}>
            <TouchableOpacity
              style={{
                flex: 1,
                justifyContent: 'center',
              }}
              onPress={() => Alert.alert('Click Action')}>
              <Ionicons name={'apps-sharp'} color="gray" size={scale(25)} />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar={renderTabBar}>
        <CurvedBottomBar.Screen name="title1" position="LEFT" component={({ navigate }) => <HomeScreen />} />
        <CurvedBottomBar.Screen name="title2" position="RIGHT" component={({ navigate }) => <SettingScreen />} />
      </CurvedBottomBar.Navigator>
    </View>
  );
};

Even after updating to the latest version getting the same error.

[Munir-Hassan]

@hoaphantn7604 @iamsaadMehmood

hi All, Refer Ex:

import React from 'react';
import { Alert, Animated, TouchableOpacity, View } from 'react-native';
import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
import { scale } from 'react-native-size-scaling';
import Ionicons from 'react-native-vector-icons/Ionicons';
import HomeScreen from 'screens/home';
import SettingScreen from 'screens/setting';
import { styles } from './styles';

export const bottomBarRef = React.createRef<any>();
// bottomBarRef.current.setVisible(false); //Hidden
// bottomBarRef.current.setVisible(false); //Visible

export const tabBar = () => {
  const _renderIcon = (routeName: string, selectedTab: string) => {
    let icon = '';

    switch (routeName) {
      case 'title1':
        icon = 'ios-home-outline';
        break;
      case 'title2':
        icon = 'settings-outline';
        break;
    }

    return <Ionicons name={icon} size={scale(25)} color={routeName === selectedTab ? 'black' : 'gray'} />;
  };
  const renderTabBar = ({ routeName, selectedTab, navigate }: any) => {
    return (
      <TouchableOpacity
        onPress={() => navigate(routeName)}
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        {_renderIcon(routeName, selectedTab)}
      </TouchableOpacity>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <CurvedBottomBar.Navigator
        ref={bottomBarRef}
        style={styles.bottomBar}
        strokeWidth={0.5}
        height={scale(55)}
        circleWidth={scale(55)}
        bgColor="white"
        initialRouteName="title1"
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View style={styles.btnCircle}>
            <TouchableOpacity
              style={{
                flex: 1,
                justifyContent: 'center',
              }}
              onPress={() => Alert.alert('Click Action')}>
              <Ionicons name={'apps-sharp'} color="gray" size={scale(25)} />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar={renderTabBar}>
        <CurvedBottomBar.Screen name="title1" position="LEFT" component={({ navigate }) => <HomeScreen />} />
        <CurvedBottomBar.Screen name="title2" position="RIGHT" component={({ navigate }) => <SettingScreen />} />
      </CurvedBottomBar.Navigator>
    </View>
  );
};

Even after updating to the latest version getting the same error.

@vipulchakravarthy Did you find any solution to it? please let me know. I am facing the same issue. TIA

[hoaphantn7604]

hi @vipulchakravarthy & @Munir-Hassan ,

We need to check if the tabBarRef is initialized before calling the function. tabBarRef?.current?.setVisible()

  import React, { createRef } from 'react'; // <== import createRef
  import {
    Alert,
    Animated,
    StyleSheet,
    TouchableOpacity,
    View,
  } from 'react-native';
  import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
  import Ionicons from 'react-native-vector-icons/Ionicons';
  import { NavigationContainer } from '@react-navigation/native';

  export const tabBarRef: any = createRef(); // <== Call this function to hide tabbar tabBarRef?.current?.setVisible(false);

  export const tabBar = () => {
    const _renderIcon = (routeName: string, selectedTab: string) => {
      let icon = '';

      switch (routeName) {
        case 'title1':
          icon = 'ios-home-outline';
          break;
        case 'title2':
          icon = 'settings-outline';
          break;
      }

      return (
        <Ionicons
          name={icon}
          size={25}
          color={routeName === selectedTab ? 'black' : 'gray'}
        />
      );
    };
    const renderTabBar = ({ routeName, selectedTab, navigate }: any) => {
      return (
        <TouchableOpacity
          onPress={() => navigate(routeName)}
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          {_renderIcon(routeName, selectedTab)}
        </TouchableOpacity>
      );
    };

    return (
      <View style={{ flex: 1 }}>
        <NavigationContainer>
          <CurvedBottomBar.Navigator
            ref={tabBarRef} // <== Add line
            style={styles.bottomBar}
            strokeWidth={0.5}
            strokeColor="#DDDDDD"
            height={55}
            circleWidth={55}
            bgColor="white"
            initialRouteName="title1"
            borderTopLeftRight
            renderCircle={({ selectedTab, navigate }) => (
              <Animated.View style={styles.btnCircle}>
                <TouchableOpacity
                  style={{
                    flex: 1,
                    justifyContent: 'center',
                  }}
                  onPress={() => Alert.alert('Click Action')}>
                  <Ionicons name={'apps-sharp'} color="gray" size={25} />
                </TouchableOpacity>
              </Animated.View>
            )}
            tabBar={renderTabBar}>
            <CurvedBottomBar.Screen
              name="title1"
              position="LEFT"
              component={() => (
                <View style={{ backgroundColor: '#BFEFFF', flex: 1 }} />
              )}
            />
            <CurvedBottomBar.Screen
              name="title2"
              component={() => (
                <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />
              )}
              position="RIGHT"
            />
          </CurvedBottomBar.Navigator>
        </NavigationContainer>
      </View>
    );
  };

  export const styles = StyleSheet.create({
    container: {
      flex: 1,
      padding: 20,
    },
    button: {
      marginVertical: 5,
    },
    bottomBar: {},
    btnCircle: {
      width: 60,
      height: 60,
      borderRadius: 35,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'white',
      padding: 10,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 0.5,
      },
      shadowOpacity: 0.2,
      shadowRadius: 1.41,
      elevation: 1,
      bottom: 30,
    },
    imgCircle: {
      width: 30,
      height: 30,
      tintColor: 'gray',
    },
    img: {
      width: 30,
      height: 30,
    },
  });

[iamhaaamed]

not working for me. even if i try to log the tabBarRef, I will get this error:
ERROR Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Notifications'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.