hoaphantn7604/react-native-curved-bottom-bar

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.

Youtube Channel ✨

https://www.youtube.com/@johnnytechvlog

react-native-curved-bottom-bar's Issues

Ability to add more than 2 tabs

Could you please customize this to accommodate more than two tabs

Title in demo

--

We need tabbar badge. feature please.

Please add tabbar badge functionality. As you know this is a very important feature for an app that has chat or notifications feature. If it is already there , please update the documentation.

@hoaphantn7604 Please help.

Thanks...

children.map is not a function

Hello,

I want to implement this navigator, but I'm facing some errors that I don't understand since I'm a beginner in React.

This project is running with Expo and is tested on an Android.

I've copied and pasted the code you provided as in the example to recreate the simplest navigation bar but I cannot figure what's going wrong...

import React from "react";

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

export default function App() {

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

    function renderTabBar({ routeName, selectedTab, navigate }) {
        return (
            <TouchableOpacity
                onPress={() => navigate(routeName)}
                style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                {renderIcon(routeName, selectedTab)}
            </TouchableOpacity>
        );
    }

    function renderCircle({ selectedTab, navigate }) {
        return (
            <Animated.View>
                <TouchableOpacity
                    style={{
                        flex: 1,
                        justifyContent: 'center',
                    }}
                    onPress={() => Alert.alert('Click Action')}>
                    <Ionicons name={'apps-sharp'} color="gray" size={25} />
                </TouchableOpacity>
            </Animated.View>
        );
    }

    return (
        <NavigationContainer>
            <CurvedBottomBar.Navigator
                strokeWidth={0.5}
                height={55}
                circleWidth={55}
                bgColor="white"
                initialRouteName="title1"
                borderTopLeftRight
                renderCircle={renderCircle}
                tabBar={renderTabBar}
            >
                <CurvedBottomBar.Screen
                    name="title1"
                    position="LEFT"
                    component={() => (
                        <View style={{ backgroundColor: '#BFEFFF', flex: 1 }} />
                    )}
                />
            </CurvedBottomBar.Navigator>
        </NavigationContainer>
    )

}

Re-Render tab content

how can i add a listener to the tab so every time i press on a tab the function inside it gets refreshed

i wanna press on "title1" and have what's inside it Re-rendered .

is there a way to accomplish that ?

<CurvedBottomBar.Navigator
                ref={ref}
                type={type}
                height={80}
                circleWidth={65}
                bgColor={theme.colors.navBg}
                borderTopLeftRight={true}
                style={{ marginBottom: -35 }}
                initialRouteName="title1"
                renderCircle={({ selectedTab, navigate }) => (
                    <Animatable.View animation="pulse" iterationCount={100000} direction="normal">
                        <TouchableOpacity
                            style={[type === 'down' ? styles.btnCircle : styles.btnCircleUp, { backgroundColor: theme.colors.navBigButtonBg, }]}
                            onPress={() => {
                                if (type === 'up' && currentNav != 'center') {
                                    setType('down');
                                    setCurrentNav('center')
                                    navigate('center')
                                    setHeaderTitle("Start")
                                } else {
                                    setType('up');
                                    setCurrentNav('center')
                                    navigate('center')
                                    setHeaderTitle("Start")
                                }

                            }}
                        >
                            <Ionicons name={'flash'} color={theme.colors.navIconSelected} size={52} />
                        </TouchableOpacity>
                    </Animatable.View>
                )}
                tabBar={({ routeName, selectedTab, navigate }) => {
                    return (
                        <TouchableOpacity
                            onPress={() => {
                                changeUpDown(routeName)
                                navigate(routeName)
                                if (routeName === 'title1') {
                                    setHeaderTitle("For You")
                                } else if (routeName === 'title2') {
                                    setHeaderTitle("Completed")
                                } else if (routeName === 'title3') {
                                    setHeaderTitle("Your Account")
                                }
                            }}
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}>
                            {_renderIcon(routeName, selectedTab)}
                        </TouchableOpacity>
                    );
                }}>
                <CurvedBottomBar.Screen
                    name="center"
                    position="center"
                    component={() => <GoOnline {...props} />}
                />
                <CurvedBottomBar.Screen
                    name="title1"
                    position="left"
                    component={() =>
                        <Home  {...props} />
                    }
                />
                <CurvedBottomBar.Screen
                    name="title2"
                    component={() => <Login {...props} />}
                    position="right"
                />
            </CurvedBottomBar.Navigator>

Middle circle icon does not highlight on focus as a screen link

Hi,

In my project, I use the middle circle icon as a navigation link to another screen. Everything is working fine.
However, this render circle method does not handle a route name parameter since it's not rendering by the tabBar method.

See below a gif demo.

Usual "renderTabBar" :

<CurvedBottomBar.Navigator
      ...
      tabBar={renderTabBar}
      ...
>
                    
function renderTabBar({ routeName, selectedTab, navigate }: any) {
    return (
        <Pressable
            onPress={() => navigate(routeName)}
            style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
            }}>
            {_renderIcon(routeName, selectedTab)}
        </Pressable>
    );
}

Specific "renderCircle" :

<CurvedBottomBar.Navigator
      ...
      renderCircle={renderCircle}
      ...
>

function renderCircle({ selectedTab, navigate }: any) {
    return (
        <Animated.View style={navigationBarStyle.btnCircle}>
            <Pressable
                style={navigationBarStyle.btnCirclePressable}
                onPress={() => navigate(selectedTab)}>
                <Ionicons name={'chatbubbles-outline'} color={iconColor} size={25} />
            </Pressable>
        </Animated.View>
    );
}

This is an issue for me because when I navigate to my screen with this middle button, I cannot verify if the current route name is matched to highlight the icon.

This is the expected result :

Remove left & right curve

Hello,

I'm not familiar with d3-shape.

Can you please help me how to remove the curve of left and right of bottom bar? Just keep the curve for center.

Swipe goes crazy when I use flatlist with gesturehandler to swipe

Hello,

I use this package and it is very good and fast. I have a profile tab. There is a navigation and a flatlist where you can swipe to other flatlist. The Swipes goes crazy sometiems if I want to swipe left in the flatlist it swipes to the next tab. this should not be like this how can I now set simulateOnHandlers with my flatlist ?

profile tab

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next';
import { Image, StyleSheet, Text, View, Dimensions, ListRenderItem } from 'react-native';
import { FlatList, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
import Animated, { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import { RootStackParams } from '../../navigation/Model';
import ProfilePageHeaderNav, { HeaderNavigationNames } from '../ProfilePageHeaderNav/ProfilePageHeaderNav';
import { IProfilePage } from './Model';

const AnimatedFlatlist = Animated.createAnimatedComponent(FlatList);

const { width } = Dimensions.get('window');

interface IArr {
  id: string;
  text: string;
}

const renderData = ({ item }) => {
  console.log(item);
  return (
    <View style={{flex: 1}}>
      <Text>{item.name}</Text>
      <Image source={{uri: item.image}} style={{height: 200, width: 200,}} />
    </View>
  )
}

const renderItem: ListRenderItem<IArr> = ({ item }) => {
  return (
    <View style={{width}}>
      <FlatList
        keyExtractor={(i) => i.id}
        data={Data}
        renderItem={renderData}
        removeClippedSubviews
        initialNumToRender={10}
        nestedScrollEnabled
        scrollEnabled={true}
        maxToRenderPerBatch={1}
        windowSize={7}
      />
    </View>
  )
};

const ProfilePage = ({}: IProfilePage) => {
  const { t } = useTranslation();
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParams>>();

  const translateX = useSharedValue(0);

  const gestureEvent = useAnimatedScrollHandler((e) => {
    translateX.value = e.contentOffset.x
  });


  const flatlistRef = useRef<FlatList>(null);

  const onPress = (i: number) => {
    //translateX.value = i * width
    flatlistRef.current?.scrollToIndex({ animated: true, index: i });
  };

  const rNav = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value * 0.25 }]
    }
  });

  return (
    <GestureHandlerRootView style={s.container}>
      <ScrollView stickyHeaderIndices={[1]} nestedScrollEnabled>
        <View style={{height: 200, backgroundColor: 'red'}}>
          <Text>Test</Text>
        </View>
        <ProfilePageHeaderNav onPress={(i) => console.log(i)} rNav={rNav} />

      <AnimatedFlatlist
        onScroll={gestureEvent}
        ref={flatlistRef}
        keyExtractor={(item, i) => item.id}
        data={HeaderNavigationNames}
        horizontal
        pagingEnabled
        scrollViewProps={{nestedScrollEnabled: true}}
        simultaneousHandlers={flatlistRef}
        renderItem={renderItem}
      />
      </ScrollView>
    </GestureHandlerRootView>
  )
};

const s = StyleSheet.create({
  container: {
    flex: 1
  }
})

export default ProfilePage;

box shadow question

hello,
Is there a way to put a shadow in bottom navigation? [type:'down']
If yes, please show an example.

Performance Issue

I have started using this package but Currently, I am having a performance issue when I switch the tab it is pretty long time to switch the tab. It is very recognizable slow.

Has anyone had similar issue? or any solution?

Thanks

Cant add more than 3 items

Can't add more than 3 items

Screen does not navigate in IOS while using RTL

Everything is working great in android but when using RTL in IOS, screen does not navigate.

Can't add more than 3 icons

Pls help me to add

ERROR TypeError: undefined is not an object (evaluating '_ref.navigation')

<CurvedBottomBar.Screen name="Home" position="left" component={HomeScreen} />

const HomeScreen = ({navigation, route}) => { 
       return (
        <View >
            <PageScrollView backgroundColor='#ebf3f3' >
            <SearchbarCommon />
            <TopStories />
            <Text>Welcome Home</Text>
           
            </PageScrollView>
            
        </View>

    );
}
export default HomeScreen;`
```

`dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/stack": "^6.0.7",
    "pagescrollview": "^1.1.0",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-curved-bottom-bar": "^1.1.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-paper": "^4.9.2",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.6.0",
    "react-native-side-menu": "^1.1.3",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^8.1.0",
    "react-redux": "^7.2.4",
    "redux": "^4.1.1"
  },`

I am new to react native, can't figure out why navigation props not available to the component?

Not inserting the parameter during nesting

When I add another Stack.Navigator as a component to CurvedBottomBar.Screen and add screens to it, the screens are displayed but the parameters and settings of the screens are not passed on.

() => {
navigate('Action', {
screen: 'Filter',
params: { user: 'jane' },will not be assigned
}

Example of how I have it now
<CurvedBottomBar.Navigator>
<CurvedBottomBar.Screen
name='Action'
position='LEFT'
component={navigationFunction}
options={{
headerShown: false,
}}
/>
</CurvedBottomBar.Navigator>
const navigationFunction = ()=>{
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen
name='Filter'
component={Filter}
options={{
...TransitionPresets.ModalSlideFromBottomIOS,
}}NOT WORK
/>
</Stack.Navigator>
);}

Cannot read property 'RNSVGSvgAndroid' of undefined

This is the code. (Example 1 from Readme . Instead of react-native-vector-icons I'm using an SVG)

import React from 'react';
  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';
  import Ionicons from 'src/assets/svg/home'

  export  const Dashboard = () => {
    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
            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,
    },
  });

Navigation not sticking to the bottom

I'm facing a weird problem, where on smaller devices(Iphone SE, Iphone 8, etc.) the navigation is not at the bottom of the screen, and there is some empty space, making it look very werid. First I thought it may be some padding/margin from the tab icons or from the middle circle, but i removed them and the result was the same.
My code is almost identical to the example code provided in the repo.

  const renderTabBar = ({ routeName, selectedTab, navigate }) => {
    return (
      <TouchableOpacity
        onPress={() => navigate(routeName)}
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {{_renderIcon(routeName, selectedTab)}
        <Text>{tabNames[routeName]}</Text> 
      </TouchableOpacity>
    );
  };

 const navigation = (
  <View style={{ flex: 1 }}>
      <CurvedBottomBar.Navigator
        screenOptions={{
          tabBarShowLabel: false,
          headerShown: false,
          tabBarHideOnKeyboard: Platform.OS !== "ios",
        }}
        height={55}
        circleWidth={55}
        bgColor="white"
        initialRouteName="ScreenOne"
        borderTopLeftRight={false}
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View style={[styles.btnCircle, buttonAnimatedStyle]}>
            <Pressable
              style={{
                flex: 1,
                justifyContent: "center",
                marginBottom: 10,
              }}
              onPress={onMenuOpen}
            >
              <Image
                style={{
                  width: appStyles.screenWidth * 0.18,
                  height: appStyles.screenWidth * 0.18,
                }}
                source={require("../assets/NavBtn.png")}
              />
            </Pressable>
          </Animated.View>
        )}
        tabBar={renderTabBar}
      >
        <CurvedBottomBar.Screen
          name="ScreenOne"
          component={ScreenOne}
          position="LEFT"
        />

        <CurvedBottomBar.Screen
          name="ScreenTwo"
          component={ScreenTwo}
          position="LEFT"
        />
        <CurvedBottomBar.Screen
          name="ScreenThree"
          component={ScreenThree}
          position="RIGHT"
        />
        <CurvedBottomBar.Screen
          name="ScreenFour"
          component={ScreenFour}
          position="RIGHT"
        />
      </CurvedBottomBar.Navigator>
    </View>)

Hiện tabbar ở tất cả màn hình

Làm như nào hiện tabbar ở tất cả các màn vậy bạn. Mình có làm theo code bạn rồi nhưng khi vào những màn khác không thuộc tabbar thì không còn nữa. Ở trong <CurvedBottomBar.Screen> không cho truyền stack navigation mà chỉ truyền jsx thì mình không biết làm kiểu gì để cho cái tabbar hiện ở tất cả màn hình.

@react-navigation/bottom-tabs could not be found

WARN Looks like you're passing an inline function for 'component' prop for the screen 'sync'

I am receiving the following warning and bottom bar is not rendering properly. It was working fine yesterday.

WARN Looks like you're passing an inline function for 'component' prop for the screen 'sync' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour. at BottomTabNavigator (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:317874:18) at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:317517:28) at RCTView at View at TabBar (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:316981:41) at DashboardTabsScreen (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:298219:26) at StaticContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:117329:17) at EnsureSingleNavigator (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:114061:24) at SceneView (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:117213:22) at RCTView at View at RCTView at View at Background (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:119638:21) at Screen (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:120968:71) at RNSScreen at AnimatedComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:70198:24) at AnimatedComponentWrapper at Screen (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:121175:36) at MaybeScreen (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:315645:24) at RNSScreenContainer at ScreenContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:121269:36) at MaybeScreenContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:315614:23) at RCTView at View at RCTView at View at AnimatedComponent(View) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:299842:38) at AnimatedComponentWrapper at RCTView at View at AnimatedComponent(View) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:299842:38) at AnimatedComponentWrapper at PanGestureHandler (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:313206:38) at PanGestureHandler (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:312408:34) at DrawerView (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:315770:36) at DrawerViewBase (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:299356:22) at GestureHandlerRootView at GestureHandlerRootView (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:312738:24) at RCTView at View at SafeAreaProviderCompat (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:120892:24) at DrawerView (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:299627:27) at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:116977:24) at DrawerNavigator (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:299208:32) at RCTView at View at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:189363:23) at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:251508:61) at wrappedComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:128221:43) at StaticContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:117329:17) at EnsureSingleNavigator (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:114061:24) at SceneView (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:117213:22) at RCTView at View at DebugContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:121491:36) at MaybeNestedStack (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:119144:23) at RNSScreen at AnimatedComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:70198:24) at AnimatedComponentWrapper at Screen (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:121175:36) at SceneView (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:119231:27) at RNSScreenStack at NativeStackViewInner (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:119336:22) at RCTView at View at SafeAreaProviderCompat (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:120892:24) at NativeStackView at NativeStackNavigator (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:119059:32) at AppStack at EnsureSingleNavigator (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:114061:24) at BaseNavigationContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:112393:28) at ThemeProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:118375:21) at NavigationContainerInner (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:118233:26) at AppNavigator (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:111757:55) at SSRProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:189263:25) at ToastProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:242217:24) at PortalProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:238605:50) at HybridProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:251952:24) at ResponsiveQueryProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:187927:14) at RNCSafeAreaProvider at SafeAreaProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:110481:24) at NativeBaseConfigProviderProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:180466:27) at NativeBaseProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:251823:33) at ErrorBoundary (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:177618:36) at RNCSafeAreaProvider at SafeAreaProvider (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:110481:24) at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:1438:41) at CodePushComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:341990:40) at RCTView at View at RCTView at View at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.elm.ejadh&modulesOnly=false&runModule=true:77933:36)

How to add appbar to the screens?

I want appbar to all screens with goback button. I couldn't find any options in the doc. Is this not included ?

Error(Another navigator is already registered for this container.) in Nested Navigator. How can i fix it?

Hi.
I'm trying to make nested navigators but I have error.

Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

my navigator structure is

When i register Home,Feed,Chat,Profile as a Navigator, error is occurred.
how can I register multiple Navigators in CurvedBottomBar?

I saw the comments you registered on other issue.

You cannot pass inside a stack of react-navigation. replace by a single component.
Using "const { navigate } = useNavigation()" to navigate inside

Is it means add single component(not navigator) in BottomBars and use navigate(name) to navigate other screen?
For example, FeedScreen has list of feed. then FeedDetailScreen is detail of Feed.

then, Where should I register FeedDetailScreen? If i register FeedNavigator in CurvedBottomBar, I can add FeedDetailScreen in FeedNavigator.

And second question is when navigating screens,
Sometimes I want to hide or show bottom bar. How can i implement that?

I want hide BottomBar in FeedDetailScreen.

Ultimately, I want implement navigation flow like below

Thank you for library and sorry for my bad english.

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

I want to show the bottom bar on only the product listing Screen and hide it on the product detail Screen (Show the bottom bar on the First Screen of the Navigation Stack but hide them on another screen of the Stack).
I have tried
navigation.getParent()?.setOptions({tabBarStyle: {display: 'none'}});

but it's not working.

Is there a way to customise the centre floating button to be moved to the right end of the view?

Hi Team, Many thanks for the wonderful library, I have got a design to be developed where the action button should be placed at the right end of the screen, I have attached the design for your reference. Please provide some input on the svg path. I am not able to modify it to match the design.

How to hide bottom tab on some screens nested inside stack navigator

Warning: Each child in a list should have a unique "key" prop. Check the render method of `ForwardRef`. See https://reactjs.org/link/warning-keys for more information. Screen

I am getting this warning in the react native while using this library.
My code for the navigator
<CurvedBottomBar.Navigator
ref={ref}
screenOptions={{
headerShown: false,
tabBarShowLabel: false,
}}

        // type="down"
        // style={styles.bottomBar}
        strokeWidth={1}
        height={60}
        circleWidth={55}
        bgColor="white"
        
        initialRouteName="DashboardScreen"
        // borderTopLeftRight
        renderCircle={({ selectedTab, navigate }) => (
            <Animated.View style={{ ...styles.btnCircleUp }}>
                <TouchableOpacity
                    style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                    onPress={() => navigate(selectedTab)}>
                    <Image
                        source={images.Maps}
                        resizeMode="contain"
                        style={{
                            width: 30,
                            height: 30,
                            alignSelf: "center",
                            tintColor: "white"
                        }}
                    />
                </TouchableOpacity>
            </Animated.View>
        )}
        tabBar={({ routeName, selectedTab, navigate }) => {
            return (
                <TouchableOpacity
                    onPress={() => navigate(routeName)}
                    style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    {_renderIcon(routeName, selectedTab)}
                </TouchableOpacity>
            );
        }}
    >
        <CurvedBottomBar.Screen
            name="DashboardScreen"
            position="LEFT"
            component={Dashboard}
        />
        <CurvedBottomBar.Screen
            name="Users"
            position="LEFT"
            component={ComingSoon}
        />
        <CurvedBottomBar.Screen
            name="Maps"
            position="CENTER"
            component={ComingSoon}
        />
        <CurvedBottomBar.Screen
            name="Gifts"
            component={ComingSoon}
            position="RIGHT"
        />
        <CurvedBottomBar.Screen
            name="Messages"
            component={ComingSoon}
            position="RIGHT"
        />
    </CurvedBottomBar.Navigator>

I am not understanding where i have to put the key in this code.
Please provide me some solution for it.

Component rendering on clicking the middle circle button

is there any way to do this?

objects must have a [Symbol.iterator]() method.

i copied everything in usage section and installing needed dependencies
but its ended in

Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]) method.

how can i solve this ?
and when i hover to Navigator on CurvedBottom.Navigator its return 'any' ,not the exact location

react-native-curved-bottom-bar doesn't seem to be linked.make sure:

Lỗi thư viện

Nested Navigator not working

I have for each screen a stack navigator associated
( FeedNavigator for exemple )

But it seems that it's not working
Here is the error

Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

But when I replace by a single compoenent ( to ) it works, but cannot navigate throught to the next screen on the stack

Mình bị lỗi loading tất cả các tab trong bottom ? làm sao tắt chế độ loading tất cả các tab dc nhỉ

<CurvedBottomBar.Screen
name="home"
position="left"
component={(navigate )=> }
/>
<CurvedBottomBar.Screen
name="events"
component={(navigate )=> }
position="left"
/>

Why my navigate function makes nothing ?

Hello,

I want to navigate to my Blogs stack. But if I press nothing happens.

`import React from 'react';
import {
Alert,
Animated,
Pressable,
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native';
import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
import {Ionicons} from '@expo/vector-icons';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Blogs from '../screens/Blogs';
import { useNavigation } from '@react-navigation/native';

const StackNav = createNativeStackNavigator();

const TabBar = () => {
const navigation = useNavigation();
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 }}>
    <CurvedBottomBar.Navigator
      type="up"
      style={styles.bottomBar}
      strokeWidth={0.5}
      height={55}
      circleWidth={55}
      bgColor="white"
      initialRouteName="title1"
      borderTopLeftRight
      swipeEnabled
      renderCircle={({ selectedTab, navigate }) => (
        <Animated.View style={styles.btnCircleUp}>
          <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={({ navigate }) => (
          <View style={{ backgroundColor: '#BFEFFF', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Pressable onPress={() => navigate('Blogs')}>
              <Text>Press</Text>
            </Pressable>
          </View>
        )}
      />
      <CurvedBottomBar.Screen
        name="title2"
        component={({ navigate }) => (
          <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />
        )}
        position="right"
      />
    </CurvedBottomBar.Navigator>
  </View>
);

};

export const StackS = () => {
return (
<StackNav.Navigator>
<StackNav.Screen name="Home" component={TabBar} />
<StackNav.Screen name="Blogs" component={Blogs} />
</StackNav.Navigator>
)
};`

Another navigator is already registered for this container

Mình gặp lỗi NavigatorContainer và Stack . Mình đã xem template của bạn, nhưng vẫn bị lỗi

Elevation???

Unable to add elevation or shadow to bottom tab bar, I don't want to add stroke.

Is there anyway to add shadow to its top side on android.

Not showing TabItem

TabItem not showing on tabbar

Chuyển màn hình còn chậm

Chuyển màn hình còn chậm do xảy ra loading toàn bộ dữ liệu của các màn hình

chuyển qua lại giữa các tab bị lỗi

function Info(props) {
      return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <TouchableOpacity
              onPress={() => {
                  props.navigation.navigate('title1');
              }}
            >
            <Text>Open title1</Text>
          </TouchableOpacity>
          </View>
        );
    
    }

<CurvedBottomBar.Screen
      name="title1"
      position="left"
      component={() => <View style={{ backgroundColor: '#BFEFFF', flex: 1 }} />}
 />
<CurvedBottomBar.Screen
        name="title2"
        component={()=> <Info {...props} />}
        position="left"
 />

ở trong component Info mình có 1 button, khi click vào button đó thì sẽ chuyển sang tab 'title1' , mình có dùng lệnh :
props.navigation.navigate('title1') nhưng bị báo lỗi 'undefined navigation' . Bạn cho mình hỏi khi chuyển qua lại giữa các tab bằng button thì mình sẽ làm như nào ạ, cảm ơn bạn !.

Change "line" color

Hi,

I'd like to change (or disable) the line color of the navigator.
I use dark colors on my app and it is a little bit strange to have a white line.

react-native-curved-bottom-bar/src/CurvedBottomBar/components/navigator/index.tsx

Line 122 in 8f1a7cb

stroke="#DDDDDD"

Tab change animation / scroll effect issue

Suppose I have 4 screens.
Screen 1, Screen2, Screen3 & Screen4
Currently my Active tab is Screen1. In this stage, if i go to Screen4 by pressing the tabbar icon, the animation is Screen1>Screen2>Screen3>Screen4.
But It Should be Screen1> Screen4

Can it be solved?

setVisible set to true cant show again the tab bar

Hi all, I face some issues with the setVisible function. Once setVisible to false cant show out the tab bar again

tabBarRef?.current.setVisible(true);

.

EventEmitter.removeListener('change', ...): Method has been deprecated

Hi! 👋

Firstly, thanks for your work on this project! 🙂

removeListener has been deprecated in React Native version 0.65.0

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-curved-bottom-bar/src/components/useDeviceOrientation.ts b/node_modules/react-native-curved-bottom-bar/src/components/useDeviceOrientation.ts
index 906e382..df4ef4f 100644
--- a/node_modules/react-native-curved-bottom-bar/src/components/useDeviceOrientation.ts
+++ b/node_modules/react-native-curved-bottom-bar/src/components/useDeviceOrientation.ts
@@ -32,16 +32,13 @@ export function useDeviceOrientation() {
   }, []);
 
   useEffect(() => {
-    Dimensions.addEventListener('change', () => {
+    const changeListener = Dimensions.addEventListener('change', () => {
       const screen = Dimensions.get('window');
       onChange(screen);
     });
 
     return () => {
-      Dimensions.removeEventListener('change', ()=>{
-        const screen = Dimensions.get('window');
-        onChange(screen);
-      });
+      changeListener.remove()
     };
   }, []);
 

Warning: Each child in a list should have a unique "key" prop.

Hi,

Thanks for this really useful library. I'm having a minor issue which is that it throws this warning regardless of what I do.

The warning is: "Warning: Each child in a list should have a unique "key" prop." and you should be able to reproduce by simply running the example code.

Appreciate if you have any workarounds.

Cheers!

Circle open screen

Mình muốn khi ấn vào hình tròn ở giữa hiện ra 1 tab khác chứ không hiện alert này thì làm thế nào ạ

CurvedBottomBar.Screen component

when i insert stack navigator in component, Render Error 'Another navigator is already registered for this container.~' occurs.
how can i fix it?

I want when the screen scroll, the curvedBottomBar hidden. ican't do it. Any help ?

Cant adjust the width of tabbar even after providing width prop

<CurvedBottomBar.Navigator
      style={[
        {
          width: '80%',
          marginBottom: 40,
        },
      ]}
      type={'down'}
      height={60}
      width={'80%'}
/>

When I give the width prop, there is no effect at all. But with width style, The tab bar is getting translated towards right , but still no change happens with width.

How can I prevent Rerender if I swipe or press a tab ?

Hello,

I have 5 tabs. (Home,shopping,news,settings,profile)

In my profile component I use a console.log statement.

So if I swipe to any tab or if I press any tap I see my console log statement. Thats means its rerender wherever I am not on the current profile Tab. How can I prevent this ?

Encountered two children with the same key.

Hello,

I am getting Encountered two children with the same key warning and when this warning pops up then the header vanishes which i am rendering using renderHeader property. How can we prevent this from happening?