Element type is invalid... Check the render type of `Icon`

Getting Element type is invalid... Check the render type of 'Icon' when using <Avatar.Icon>

I am using a <Card>, of which I am trying to use a custom image as the .Left of the <Card.Title>, using a custom <Avatar.Icon> render function. My code is as follows:

<Card.Title
            title="Title goes here"
            subtitle="Created 14/3/19"
            left={(props) =>
              <Avatar.Icon {...props} icon={({ size, color }) => (
                <Image
                  source={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}
                  style={{ width: size, height: size, tintColor: color }}
                />
              )} />
            }
/>

In case it makes a difference, my imports look like:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {Avatar, Button, Card, Title, Paragraph, IconButton, Image} from 'react-native-paper';

However, I get the following error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Icon`.

This error is located at:
    in Icon (at AvatarIcon.js:80)
    in RCTView (at View.js:45)
    in View (at AvatarIcon.js:68)
    in Avatar.Icon (created by Context.Consumer)
    in ThemeProvider (created by Context.Consumer)
    in withTheme(Avatar.Icon) (at App.js:23)
    in RCTView (at View.js:45)
    in View (at CardTitle.js:110)
    in RCTView (at View.js:45)
    in View (at CardTitle.js:102)
    in Card.Title (created by Context.Consumer)

Why am I getting this error? How can I fix this? Also, if it would be easier, I would also be happy with any suggestions regarding alternative approaches to getting an image from a custom URI into the <Card.Title>.

Test URL

[satya164]

Seems to load fine for me. Though it’ll be white because you’re passing tintColor to the Image. You probably want to use Avatar.Image as mentioned in the docs: https://callstack.github.io/react-native-paper/avatar-image.html

[gezakerecsenyi]

Thanks; that fixed it. 😃