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

[hochdyl]

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 :

[hoaphantn7604]

hi @hochdyl , You can show full code for me to support?

[hochdyl]

Hello @hoaphantn7604 Concretely, I need to have access to the routeName parameter in the renderCircle function. Exactly as I have in the renderTabBar function.

What I have :

    function renderTabBar({routeName, selectedTab, navigate}: any) { ... }

    function renderCircle({selectedTab, navigate}: any) { ... }

What I need :

    function renderTabBar({routeName, selectedTab, navigate}: any) { ... }

    function renderCircle({routeName, selectedTab, navigate}: any) { ... }

Here is my full navigator :

import React from "react";
import {Animated, Pressable, SafeAreaView, View} from "react-native";
import styles from "./styles";
import Ionicons from "react-native-vector-icons/Ionicons";
import {CurvedBottomBar} from "react-native-curved-bottom-bar";
import {HomeScreen} from "./src/screens/home/HomeScreen";
import {NavigationContainer} from "@react-navigation/native";
import {ProfileScreen} from "./src/screens/profile/ProfileScreen";

export default function App() {
    const iconColor = '#aaa'
    const focusedIconColor = '#3291d5'

    function _renderIcon(routeName: string, selectedTab: string) {
        let icon = '';

        switch (routeName) {
            case 'Home':
                icon = 'ios-home-outline';
                break;
            case 'Profile':
                icon = 'person-outline';
                break;
        }

        return (
            <Ionicons
                name={icon}
                size={25}
                color={routeName === selectedTab ? focusedIconColor : iconColor}
            />
        );
    }

    function renderTabBar({routeName, selectedTab, navigate}: any) {
        return (
            <Pressable
                onPress={() => navigate(routeName)}
                style={styles.bottomBarBtn}>
                {_renderIcon(routeName, selectedTab)}
            </Pressable>
        );
    }

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

    return (
        <SafeAreaView style={{flex: 1}}>
            <NavigationContainer>
                <CurvedBottomBar.Navigator
                    strokeWidth={0.5}
                    height={55}
                    circleWidth={55}
                    bgColor="#fff"
                    initialRouteName="Home"
                    borderTopLeftRight
                    renderCircle={renderCircle}
                    tabBar={renderTabBar}>
                    <CurvedBottomBar.Screen
                        name="Home"
                        position="LEFT"
                        component={HomeScreen}
                    />
                    <CurvedBottomBar.Screen
                        name="Support"
                        position="CENTER"
                        component={TicketsNavigator}
                        options={{headerShown: false}}
                    />
                    <CurvedBottomBar.Screen
                        name="Profile"
                        component={ProfileScreen}
                        position="RIGHT"
                    />
                </CurvedBottomBar.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    )
}

[hoaphantn7604]

hi @hochdyl , This issue is resolved. Please install later version. Refer example:

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

[hochdyl]

It's working perfectly now, thanks for your quick support !