CODEWITHSUNDEEP
reactjstypescriptreact-nativetypestypescript-typings
jefelewis
jefelewis

Reputation: 2049

Typescript onPress With Promise Returned Error

I'm implementing typescript into my project for the first time and I have an error coming from onPress which calls toggleModal. The error is coming from onPress

According to the React Native docs, DatePickerAndroid.open() does the following:

Returns a Promise which will be invoked an object containing action, year, month (0-11), day if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being DatePickerAndroid.dismissedAction and all the other keys being undefined.

Can someone clarify if the error is coming from the following and how to fix it?

Error

src/DatePicker.tsx:109:25 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Readonly<TouchableOpacityProps>): TouchableOpacity', gave the following error.
    Type '(props: Props) => Promise<void>' is not assignable to type '(event: GestureResponderEvent) => void'.
      Types of parameters 'props' and 'event' are incompatible.
        Type 'GestureResponderEvent' is missing the following properties from type 'Props': title, onPress, onValueChange, mode
  Overload 2 of 2, '(props: TouchableOpacityProps, context?: any): TouchableOpacity', gave the following error.
    Type '(props: Props) => Promise<void>' is not assignable to type '(event: GestureResponderEvent) => void'.

109       <TouchableOpacity onPress={toggleModal} style={styles.fieldTextContainer}>

Types

// TypeScript: Types
interface Props {
  title: string,
  onPress: Function,
  onValueChange: Function,
  mode: 'calendar' | 'spinner' | 'default',
  minDate?: Date | number;
  maxDate?: Date | number;
}

interface AndroidProps {
  action: 'dateSetAction' | 'dismissedAction',
  newDate?: Date;
  year?: number;
  month?: number;
  day?: number;
}

toggleModal

// Toggle Modal
  const toggleModal = async (props: Props) => {
    try {
      // Check Platform (iOS)
      if (Platform.OS === 'ios') {
        // React Hook: Toggle Modal
        toggle((modalVisible) => !modalVisible);
      }

      // Check Platform (Android)
      if (Platform.OS === 'android') {
        const { action, year, month, day } : AndroidProps = await DatePickerAndroid.open({
          date: date,
          mode: props.mode,
        });

        // Action: Date Set
        if (
           action === DatePickerAndroid.dateSetAction
           && year !== undefined
           && month !== undefined
           && day !== undefined
        ) {
          // New Date
          let newDate:Date = new Date(year, month, day);

          // Select Date
          selectDate(newDate);
        }

        // Action: Dismissed
        if (action === DatePickerAndroid.dismissedAction) {
          // Do Nothing
        }
      };
    }
    catch (error) {
      console.log(error);
    }
  };

DatePicker.tsx

  <TouchableOpacity onPress={toggleModal} style={styles.fieldTextContainer}>
    <Text style={styles.fieldText} numberOfLines={1}>{date ? moment(date).format('MMM Do, YYYY') : 'Select'}</Text>

    <Icon name="ios-arrow-forward" size={22} style={styles.arrowForward}/>
  </TouchableOpacity>

Upvotes: 0

Views: 1550

Answers (1)

Suraj Malviya
Suraj Malviya

Reputation: 3783

There are two problems associated with your TouchableOpacity's onPress

1. Incompatible paramter in toggleModal call: TouchableOpacity gives off the onPress callback with event as its parameter and you are trying to call off the toggleModal without explicit binding i.e. the system will try to pass in the params given by onPress's callback to the toggleModal which are incompatible as toggleModal expects a paramter of type Props and is getting of type event,

This should be fixed with an explicitly binded call : onPress={() => toggleModal(props)}

2. The return type of the function being called off from onPress's callback which expects it to be void and yours is Promise as the function is async. You can solve it by declaring your toggleModal to be a normal function with Promise based code for your awaiting calls.

Coming to the year problem, its due to the fact that the year value is not assured to be always number, it can be undefined as well in cases which is also documented here.

Hope this helps. Thanks. Cheers!

Upvotes: 1

Related Questions