Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug Report - TypeScript error for renderRow, renderLeft/RightButton

See original GitHub issue

Describe the bug

  node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.d.ts:409:3
    409   renderRow?: (data: GooglePlaceData) => React.ComponentType<{}>;
          ~~~~~~~~~
    The expected type comes from property 'renderRow' which is declared here on type 'IntrinsicAttributes & GooglePlacesAutocompleteProps & RefAttributes<GooglePlacesAutocompleteRef>'

a similar error manifests for all three renderRow renderLeftButton renderRightButton.

src/routes/LiveUserProfile/LiveUserLocationModal/index.tsx:200:21 - error TS2322: Type '() => JSX.Element' is not assignable to type '() => ComponentType<{}>'.
  Type 'Element' is not assignable to type 'ComponentType<{}>'.
    Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
      Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | null'.

200                     renderLeftButton={() => {
                        ~~~~~~~~~~~~~~~~

  node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.d.ts:407:3
    407   renderLeftButton?: () => React.ComponentType<{}>;
          ~~~~~~~~~~~~~~~~
    The expected type comes from property 'renderLeftButton' which is declared here on type 'IntrinsicAttributes & GooglePlacesAutocompleteProps & RefAttributes<GooglePlacesAutocompleteRef>'

src/routes/LiveUserProfile/LiveUserLocationModal/index.tsx:208:21 - error TS2322: Type '() => JSX.Element' is not assignable to type '() => ComponentType<{}>'.
  Type 'Element' is not assignable to type 'ComponentType<{}>'.
    Type 'Element' is not assignable to type 'FunctionComponent<{}>'.

208                     renderRightButton={() => {
                        ~~~~~~~~~~~~~~~~~

  node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.d.ts:408:3
    408   renderRightButton?: () => React.ComponentType<{}>;
          ~~~~~~~~~~~~~~~~~
    The expected type comes from property 'renderRightButton' which is declared here on type 'IntrinsicAttributes & GooglePlacesAutocompleteProps & RefAttributes<GooglePlacesAutocompleteRef>'

src/routes/LiveUserProfile/LiveUserLocationModal/index.tsx:224:21 - error TS2322: Type '(results: GooglePlaceData) => Element' is not assignable to type '(data: GooglePlaceData) => ComponentType<{}>'.
  Type 'Element' is not assignable to type 'ComponentType<{}>'.
    Type 'Element' is not assignable to type 'FunctionComponent<{}>'.

224                     renderRow={(results): JSX.Element => {
                        ~~~~~~~~~

Reproduction - (required - issue will be closed without this)

Steps to reproduce the behavior - a minimal reproducible code example, link to a snack or a repository.

Please provide a FULLY REPRODUCIBLE example.

Click to expand!

   <GooglePlacesAutocomplete
                  renderLeftButton={() => {
                    return (
                      <SVGIcon
                        icon={icons.search.searchMagnifyingGlass}
                        style={styles.searchIcon}
                      />
                    );
                  }}
                  renderRightButton={() => {
                    return (
                      <>
                        <TouchableOpacity
                          onPress={(): void => {
                            onDismissModal(false);
                          }}
                        >
                          <Text style={styles.cancelText}>
                            {locales.cancel}
                          </Text>
                        </TouchableOpacity>
                      </>
                    );
                  }}
                  renderRow={(results): JSX.Element => {
                    return (
                      <View style={styles.resultsContainer}>
                        <TouchableOpacity
                          onPress={(): void => {
                            setLocation(results.description);
                          }}
                        >
                          <View style={styles.resultsRow}>
                            <Text style={styles.resultsText}>
                              {results.description}
                            </Text>
                            <SVGIcon
                              icon={icons.search.caretOut}
                            />
                          </View>
                        </TouchableOpacity>
                      </View>
                    );
                  }}
                  query={{
                    components: 'country:us',
                    key: 'myApiKey',
                    language: 'en',
                    types: '(cities)',
                  }}
                />

Please remember to remove you google API key from the code you provide here

Additional context

Obviously this appears to be a TS issue.

Looking here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

I see this:

    type ElementType<P = any> =
        {
            [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never
        }[keyof JSX.IntrinsicElements] |
        ComponentType<P>;
    /**
     * @deprecated Please use `ElementType`
     */
    type ReactType<P = any> = ElementType<P>;
    type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

Library Version: 2.0.3
React Native Version: 0.61.5
TypeScript Version: 3.8.2
iOS
Android
Web