CODEWITHSUNDEEP
typescriptreact-native
Fredyonge
Fredyonge

Reputation: 350

Typescript: onPress type

I just ported my react-native project to typescript and have a question about functions as props

im passing:

<DisplayCardsWithLikes
data={testData}
likes={500}
onPress={() => this.props.navigation.navigate("CardDetailScreen")}
/>

to

type Props = {
  onPress: Function
}


const FloatingActionButtonSimple = (props:Props) => {
  const {onPress} = props
  return (
    <View style={styles.containerFab}>
      <TouchableOpacity style={styles.fab} onPress={onPress}>
        <Icon name="plus" size={16} color={"white"} />
      </TouchableOpacity>
    </View>
  );
};

Error:

Error, caused by child onPress:
o overload matches this call.
  Overload 1 of 2, '(props: Readonly<TouchableOpacityProps>): TouchableOpacity', gave the following error.
    Type 'Function' is not assignable to type '(event: GestureResponderEvent) => void'.
      Type 'Function' provides no match for the signature '(event: GestureResponderEvent): void'.
  Overload 2 of 2, '(props: TouchableOpacityProps, context?: any): TouchableOpacity', gave the following error.
    Type 'Function' is not assignable to type '(event: GestureResponderEvent) => void'.ts(2769)
index.d.ts(5125, 5): The expected type comes from property 'onPress' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>'
index.d.ts(5125, 5): The expected type comes from property 'onPress' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>'

Summary: onPress passed as prop (is a function). On child type onPress:Function displays an error(the one above), onPress:any works though. I basically don't know which kind of type the onPress prop is

So nothing crazy, but if I define onPress as a function it displays an error, so apparently that's not the correct type. Do you know which type this onPress functions are?

Thanks a lot!

Upvotes: 30

Views: 26137

Answers (4)

Mawuli
Mawuli

Reputation: 41

   In my case declaring it  the type as 
    
    type Props {
       onPress: (event: GestureResponderEvent) => void
    }

    did not work for me. What worked for me is declaring an interface as below and call it in my code.
    
    interface Props {
      title: string;
      onPress?: Function;
    }
   
    
    <Button
          onPress={handleSubmit as (e?: GestureResponderEvent) => void}
          title={props.title}
        />

You will need to import GestureResponderEvent from react-native as below

import {GestureResponderEvent} from 'react-native';

screenshot of my errors attached enter image description here

Hope it helps someone.

Upvotes: 0

Jeffrey Kozik
Jeffrey Kozik

Reputation: 549

import { GestureResponderEvent } from "react-native";

I imported GestureResponderEvent from React Native and then used that as my event type:

  async function submit(e: GestureResponderEvent) {

here's the onPress code:

  <Pressable onPress={submit}>

Upvotes: 2

Muhammad Mehar
Muhammad Mehar

Reputation: 1055

You need to define type as below to get rid of type error from tslint:

type Props {
   onPress: (event: GestureResponderEvent) => void
}

OR

type Props {
   onPress(): void
}

OR

type Props {
   onPress(params: type): void
}

Upvotes: 58

Alex Wayne
Alex Wayne

Reputation: 187044

That error message shows the type that it would accept for your function as this:

(event: GestureResponderEvent) => void

What's important to note is => void which means it's expecting a function that does not return a value.

But this function:

() => this.props.navigation.navigate("CardDetailScreen")

does return a value. Arrow function's without {}'s return the result of their expression.

The fix is to add {} to your callback so the function does not return anything, which will match the expected type:

onPress={() => { this.props.navigation.navigate("CardDetailScreen") } }

Upvotes: 13

Related Questions