score:12

Accepted answer

in you're render you're setting up the handler incorrectly, give this a try;

 <view>
       <icon
        name='heart'
        color={this.state.mycolor}
        size= {45}
        style={{marginleft:40}}
        onpress={this.handleclick}                                 
        />
  </view>

the syntax you're using would make sense for declaring an anonymous function inline or something but since your handler is defined on the class, you just reference it (not call it) using this.functionname in the props.

score:0

you can also try this way of binding

this.handleclick = this.handleclick.bind(this) 

and put this inside constructor. and while calling use this syntax

onpress = {this.handleclick}

this will surely solve your problem.

score:0

if you are not using class components, you can just drop the this

this function can handle the navigation for any route (as long as there is one screen with the name passed as the argument) removing the need for multiple handlers.

const navigation = usenavigation(); 

function handlenavigation(route) {
    navigation.navigate(route);
}

and the button will look like this:

<button onpress={() => handlenavigation("menu")} ></button>

score:3

you need to reference the method with the this keyword.

 <icon
    onpress={this.handleclick}                                 
  />

score:12

a little late to the party, but just wanted to leave this here if someone needs it

export default class mainscreen extends component {

handleclick = () => {
 //some code
}

render() {
 return(
  <view>
       <button
        name='somebutton'
        onpress={() => {
            this.handleclick(); //usual call like vanilla javascript, but uses this operator
         }}                                 
        />
  </view>
  )};

Related Query

More Query from same tag