Pass parameters to prop function without using an arrow function

I've heard that passing an arrow function as a prop is not ideal because it creates a new function every time which will lead to performance issues. However, I'm not entirely sure how to completely move away from them, as can be seen by the example below:

class Home extends Component {
onCardPress = (message) =&gt;{
    alert(message)
}

render(){
    return(
        &lt;View&gt;
            &lt;Card 
                onCardPress={this.onCardPress}
                message="Hello world!"
            /&gt;
        &lt;/View&gt;
    )
}

}
class Card extends Component {

render(){

const { onCardPress , message } = this.props;

return(

<TouchableOpacity

activeOpacity={0.8}

onPress={()=>{onCardPress(message)}}

/>

)

}

}

I have tried changing onPress in Card to be onPress={onCardPress(message)}, but I know this doesn’t work because I am invoking the function rather than passing a function object to the onPressof TouchableOpacity. What is the ‘proper’ way or best practice to remove the arrow function in TouchableOpacity while still being able to pass the message parameter from the parent component Home?

#reactjs #react-native