function how props in component

Question

I have created a custom button component so that I don't have to always reuse them. but I have a problem and it is when executing a function.

The function is in the parent component, and what I want is to execute this function in the same parent component, but since I create a button component then I have to pass the function first to the button component and this is where I have the problem.

if I put func = {hello ()} the function is executed when entering the view, and if I put func = {hello} then clicking the button does nothing.

when I introduce the name of a route it works perfectly, the problem is when introducing a function of the parent component

CustomButtons.js

            import React, { useState, useContext } from "react";
        import { View } from 'react-native'

        import { Button, Text } from 'react-native-elements';
        import Icon from 'react-native-vector-icons/FontAwesome';

        import { ThemeContext } from 'react-native-elements';
        import { useNavigation } from '@react-navigation/native'


        export default function CustomButtons(props) {
            const { theme } = useContext(ThemeContext);
            const navigation = useNavigation()

            const themeButtons = {
                btnClose: theme.colors.btnClose,
                btnMain: theme.colors.btnMain,
                btnAction: theme.colors.btnAction
            }

            const iconName = props.icon
            const routeName = props.route
            const actionFunc = props.func
            const buttonName = props.name
            const buttonType = props.type == 'icon' ? 'clear' : props.type == 'out' ? 'outline' : 'solid'
            const iconColor = props.iconColor == null ? 'white' : props.iconColor
            const buttonTheme = () => {
                const theme = props.theme
                if (theme == 'main') return themeButtons.btnMain
                if (theme == 'close') return themeButtons.btnClose
                if (theme == 'sec') return themeButtons.btnAction
            }
            const btnActionHandle = () => {
                if (routeName) return navigation.navigate(routeName)
                else {
                    return actionFunc
                }
            }
            return (
                <Button
                    title={buttonName}
                    icon={
                        <Icon
                            name={iconName}
                            color={iconColor}
                            size={15}
                        />
                    }
                    buttonStyle={{ backgroundColor: buttonTheme() }}
                    onPress={btnActionHandle}
                    type={buttonType}
                />
            );
        }

parent component

     .
     .
     .

      function hello() {
       console.log('Hello')
      }

      <CustomButtons
          icon="trash"
          type="icon"
          iconColor="black"
          func={hello}
       />
     .
     .
     .

It should be noted that all the rest of the code works as expected except for the onPress = {} in the customButtons.js component

Answer 1

You forgot to execute/invoke/call it. return actionFunc()

const btnActionHandle = () => {
            if (routeName) return navigation.navigate(routeName)
            else {
                return actionFunc()
            }
        }

Also the same function can be re-written as below, no need for else block:

const btnActionHandle = () => {
  if (routeName) {
    return navigation.navigate(routeName)
  }

  return actionFunc()
}