How do I make thefun.thefun a function?

Technology:React-Native

Desired Result:I'm trying to pass a function between components. I want theFun.theFun() to call but it doesn't run:

Component ExceptiontheFun.theFun is not a function. (In 'theFun.theFun("2", "1", "blueShrimp"). 'theFun.theFun' is undefined

What I've Tried:I've tried {storeMeaturement} vs {()=> storeMeasurement("2","1","blueShrimp"} vs { storeMeasurement("2","1","blueShrimp"} in the component definition and theFun={storeMeasurement} vs theFun={storeMeasurement("2","1","blueShrimp")} in the tag. I've tried other things too to no avail.

Here is the code:

Where I use the tag

<ModalPurpleCard theList={["10","91","thermometer"]}  theFun={storeMeasurement} ></ModalPurpleCard>

Where I define the tag

function ModalPurpleCard(theList:any, theFun:any ) {// , theFun:function  let [visOpen, setVisOpen] = React.useState(true);  let [stillLoad, setStillLoad] = React.useState(true);  //let theFig = Math.round(Math.random() *10 + 90)  let theFig = Number(theList.theList[0]) + Number(theList.theList[1])  console.log(theFig)  if (visOpen){    return(<TouchableOpacity onPress={()=> setVisOpen(false)}><View style={{zIndex:3}}><ModalSecCard  ><Text style={{color:"#fff"}}>{theList.theList[2]}</Text></ModalSecCard></View></TouchableOpacity>    )  } else{      if(stillLoad){        return(<TouchableOpacity onPress={theFun.theFun("2","1","blueShrimp")}><ActivityIndicator animating={true} color="#333366"/></TouchableOpacity>        )      } else {return(<Text>{theFig}</Text>  )}  }}

Conclusion:The weird thing for me is that theList works great and successfully passes between components. The function, however, does not.