[FIXED] How to declare onPress function with optional input parameter in react native using typescirpt

Issue

I am working with react-native using typescript. I want an onPress method with an optional boolean input parameter. And I want to pass it directly to the onPress method without creating a new arrow function if there is no input. Like below code:

const onClose(clearMessages?: boolean) => {
   // doing stuff
   if (clearMessages) {
      // doing extra stuff
   }
}

// use it like this
<Pressable onPress={onClose}>
   <Text>{'Close'}</Text>
</Pressable>

<Pressable onPress={() => onClose(true)}>
   <Text>{'Clear messages'}</Text>
</Pressable>

The thing is when I call onClose directly I get the typescript error below:

Type '(clearMessage?: boolean) => (event: GestureResponderEvent) => void' is not assignable to type '(event: GestureResponderEvent) => void'. Types of parameters 'clearMessage' and 'event' are incompatible. Type 'GestureResponderEvent' is not assignable to type 'boolean'.ts(2322)

Solution

That's an expected error! because when you don't call onClose function yourself and pass it to pressable, then pressable expects the function with the below signature

((event: GestureResponderEvent) => void)

onPress passes the parameter which has the type GestureResponderEvent and in your onClose function you are expecting boolean, Hence the error

IMHO this looks clean though

onPress={() => onClose()}

If you still want it then you can achieve this by using typescript's union type, Just change your onClose method like below

const onClose = (clearMessages?: GestureResponderEvent | boolean) => {
  // doing stuff
  if (typeof clearMessages === 'boolean') {
    // doing extra stuff
  }
};

one more(if you will pass only true) then

const onClose = (clearMessages?: GestureResponderEvent | true) => {
  // doing stuff
  if (clearMessages === true) {
    // doing extra stuff
  }
};

Answered By - Sameer
Answer Checked By - - Robin (ReactFix Admin)