Doesn't navigate to the screen when pressing the icon

Question

I'm trying to make three buttons with customs icons on the navigation bar, but when I press one of then, it does nothing, only the animation. I've tried to put an onPress on the componente but it does not recognize the navigation object.

This is the code:

const AnimatedButton = ({ icon: Icon, onPress }) => {
    const scaleValue = useSharedValue(1);

    const handleButtonPress = () =>{
        scaleValue.value = withTiming(0.8, { duration: 200 }, () => {
            scaleValue.value = withTiming(1, { duration: 200 });
          });
          //onPress(); // Llamar a la función onPress proporcionada
    };
 
    const buttonStyle = useAnimatedStyle(() => {
        return{
            transform : [
                { scale: scaleValue.value}
            ],
    };
    });

    return (
        <AnimatedTouchableOpacity style={[styles.button, buttonStyle]} onPress={handleButtonPress} >
            <Icon />
        </AnimatedTouchableOpacity>
    );
};

const Tab = createBottomTabNavigator();

//Elemento principal
const Three_Butts_Img = () => {

    const navigation = useNavigation();

    return(
        <NavigationContainer >
            <Tab.Navigator >
            <Tab.Screen 
                name='Music'
                component={MusicScreen}
                options={{
                    title:'',
                    tabBarIcon: () => (
                        <AnimatedButton  icon={D_Corchea_1} navigation={navigation.navigate('Music', {screen:'MusicScreen'})} />
                    ),
                }}
                />
                <Tab.Screen 
                   name='Ranking'
                    component={ProfileRanking}
                   options={{ title:'',
                     tabBarIcon: ()=> (
                    <AnimatedButton icon={Corona_1} navigation={navigation.navigate('Ranking', {screen:'ProflieRanking'})}/>
                    ),
                    }}
                 />
                <Tab.Screen 
                  name='Search'
                  component={SearchScreen}
                   options={{title:'',
                    tabBarIcon: () => (
                     <AnimatedButton icon={Lupa} navigation={navigation.navigate('Search', {screen:'SearchScreen'})}  />
                   ),
                 }}
                 />
            </Tab.Navigator>
      </NavigationContainer>

    );
};

Do you have any idea of what is going wrong? or if it is to weird my code.

Answer 1

After few days thinking in how to solve the issues that I had in the way that I suggested, I changed the structure of how to pass the Icons and the useNavigation hook.

Heres is the new code and it works:

/*para la animación del botón*/
const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);


const Tab = createBottomTabNavigator();


const MusicPart = ({ icon: Icon })=>{
    const navigation = useNavigation();

    const handelpress = () => {
        navigation.navigate('Music', {screen: 'MusicScreen'});
    };

    return (<AnimatedTouchableOpacity style={[styles.button]} onPress={handelpress}>
        <Icon/>
    </AnimatedTouchableOpacity>
    );

};

const RankingPart = ({icon: Icon}) => {
    const navigation = useNavigation();

    const handelpress = () => {
        navigation.navigate('Ranking', {screen: 'ProfileRanking'});
    };
    return (<AnimatedTouchableOpacity style={[styles.button]} onPress={handelpress}>
        <Icon/>
    </AnimatedTouchableOpacity>
    );
};

const SearchPart = ({icon: Icon}) => {
    const navigation = useNavigation();

    const handelpress = () => {
        navigation.navigate('Search', {screen:'SearchScreen'});
    };

    return (<AnimatedTouchableOpacity style={[styles.button]} onPress={handelpress}>
        <Icon/>
    </AnimatedTouchableOpacity>
    );
}

const Three_Butts_Img = () => {


    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen 
                    name='Music'
                    component={MusicScreen}
                    options={{
                        title:'',
                        tabBarIcon: () => (
                            <MusicPart icon={D_Corchea_1}  />
                        ),
                    }}
                />
                <Tab.Screen 
                    name='Ranking'
                    component={ProfileRanking}
                    options={{
                        title:'',
                        tabBarIcon: () =>(
                            <RankingPart icon={Corona_1}/>
                        ),
                    }}
                />
                <Tab.Screen 
                    name='Search'
                    component={SearchScreen}
                    options={{
                        title:'',
                        tabBarIcon: () => (
                            <SearchPart icon={Lupa}/>
                        ),
                    }}
                />
            </Tab.Navigator>
        </NavigationContainer>
    );
};

Answer 2

In your AnimatedButton component you are expecting onPress prop. But when you are calling the component you are passing the navigation as props not onPress. Due to that you are facing this issue.