React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got object

Question

**

• The error I am getting when the 'Snapshot Test' is executed for App.tsx:

**

'''

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

'''

I am facing the following issue for our react native project:

'''

console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. 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`.
    at Icon (<projectRoot>\node_modules\@expo\vector-icons\build\vendor\react-native-vector-icons\lib\create-icon-set.js:70:36)        at Icon (D:\Projects\MEEL\app-native-consumer\node_modules\@expo\vector-icons\build\createIconSet.js:65:36)
    at Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Icon.js:117:21)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Avatar.Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Avatar\AvatarIcon.js:103:19)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Success (<projectRoot>\scenes\Success\index.tsx:207:25)

  at printWarning (node_modules/react/cjs/react.development.js:315:30)
  at error (node_modules/react/cjs/react.development.js:287:5)
  at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
  at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:31)
  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)

console.error
The above error occurred in the component:

    at Icon (<projectRoot>\node_modules\@expo\vector-icons\build\vendor\react-native-vector-icons\lib\create-icon-set.js:70:36)        at Icon (D:\Projects\MEEL\app-native-consumer\node_modules\@expo\vector-icons\build\createIconSet.js:65:36)
    at Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Icon.js:117:21)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Avatar.Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Avatar\AvatarIcon.js:103:19)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Success (<projectRoot>\scenes\Success\index.tsx:207:25)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
'''

_**NOTE**_: I have replaced our project root details with '<projectRoot>'

***CURRENTLY*** - The mentioned error/warning popping always when the snapshot tests are executed where the snapshot tests pass but due to warnings, the pipeline fails and thus blocks the build.

***CODE BLOCK:***
From file 1:

'''
<Avatar.Icon style={{ backgroundColor: "#00C33F" }} color={"#FFFFFF"} icon="check" />

'''

From file 2:
'''
<TextInput
mode={"flat"}
style={styles.inputStyle}
underlineColor={errors.email ? colors.underline : colors.accent}
theme={{ fonts: { regular: fonts.medium }, colors: errors.email ? { placeholder: colors.textRed } : { text: colors.textBlack } }}
label="E-mail"
left={<TextInput.Icon name="email-outline" color={colors.accent} />}
onBlur={onBlur}
value={value}
onChangeText={text => onChange(text)}
keyboardType={"email-address"}
returnKeyType={"done"}
blurOnSubmit={true}
onSubmitEditing={handleSubmit(onSendCode)}
/>

'''

When commented on the mentioned line/s or code above it stops throwing the mentioned error.

Requests to suggest a fix. Versions for the packages used: "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", "react-native-paper" - "^4.8.1", "react-native-vector-icons" - "^8.1.0" "npm" - "6.14.7"

Please find the sample project/code at https://github.com/nitinthiteITWOX/VectorIconTest/tree/master for the error.

Steps to reproduce the error:

''' Clone the project on local execute 'npm install' execute 'npm test' '''

Issue listed on react-native-paper forum - https://github.com/callstack/react-native-paper/issues/2695

Looking forward for help/suggestion/s