Element Type is invalid: Expected a string (Error)

Question

Element Type is invalid: Expected a string (Error)

Haseeba393 opened this issue 4 years ago · 14 comments

Bug

I'm using latest versions of react native and gorhom/react-native-animated-tabbar library. I have only one screen App.js and i'm doing everything on that. I have followed all steps of installation and did the same code as he described in React Navigation v5/Javascript. But getting this error:

Environment info

This is my package.json
{
"name": "pr",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@gorhom/animated-tabbar": "^2.1.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/native": "^5.8.10",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-svg": "^12.1.0"
},
"devDependencies": {
"@babel/core": "7.12.10",
"@babel/runtime": "7.12.5",
"@react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}

Steps To Reproduce

I have uploaded my code to this repository. You can check everything here and let me know if anything I'm doing wrong.
https://github.com/Haseeba393/animated-tab-bar

Describe what you expected to happen:
Expected bahavior that animation should be performed as shown in the demo of this library

Answer 1 · 2020-12-16T06:33:44.000Z

Anyone here to help out please?

Answer 2 · 2020-12-16T08:41:11.000Z

Hi @Haseeba393 , try to provide component ?

    icon: {
      //component: /* ICON COMPONENT */,

Answer 3 · 2020-12-16T09:14:49.000Z

Can you please give me an example? How I have to provide icon component?

Answer 4 · 2020-12-16T09:20:59.000Z

According to you, I'm giving an image as an icon but the same error

Answer 5 · 2020-12-16T11:02:50.000Z

@gorhom Brother are you there? I need your help?

Answer 6 · 2020-12-16T12:25:08.000Z

Anyone here?

Answer 7 · 2020-12-16T13:37:09.000Z

@Haseeba393 i will look into this later today 👍

Answer 8 · 2020-12-16T13:46:53.000Z

Please @gorhom it will be really thanks of you

Answer 9 · 2020-12-16T15:47:00.000Z

any luck so far? @gorhom

Answer 10 · 2020-12-17T06:01:24.000Z

Anyone here?

Answer 11 · 2020-12-21T11:55:08.000Z

Can I get support here?

Answer 12 · 2020-12-21T11:56:13.000Z

This is very embarrassing for me. If you are not able to handle the support for this library then please tell me. You said that you will check it but I didn't get any reply from you

Answer 13 · 2020-12-21T13:52:21.000Z

Hi @Haseeba393 , i understand your frustration but this is clearly not the library issue but the way your provide your icons. I am not going to fix every one use-cases.

However, i tried your provided repo, and it seems working fine , i added Icon as custom component and it works also fine.

const Icon = () => (<View style={{ width: 20, height: 20}} />)

const tabs = {
  screen1: {
    // < Screen name
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: () => (<View style={{ width: 20, height: 20}} />),
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(223,215,243,1)',
      inactiveColor: 'rgba(223,215,243,0)',
    },
  },
....

Answer 14 · 2020-12-22T07:07:00.000Z

I'm really sorry brother. I know that no one can solve all use cases related to 1 library. By the way, I tried the way you provided the Icon and it is working fine. Thank you so much. You really saved my day.
Just one thing, if you please this also in your documentation then it will be really helpful for other people.
Thank you again @gorhom