Search code examples
react-nativenative-base

Native base 2.10.0: Fresh installation of native base on react-native project gives weird error

So I have spend 2 days trying to install and integrate native-base in a complete new project and the development server is returning response error code of 500. So basically I created a new project and then start the project. Run successfully. Installed latest version of native-base(2.10). No issue at all. Now as soon as I tried to use a component from it, it throws 500 server error. Here is the error information:
enter image description here
This is how my node js terminal looks like and it points to this github issue: enter image description here
The github issue has lot of suggestions but none of them works for me. It seems like a problem with compatibility of native-base with latest version of react-native. I am on native-base's slack channel and couple of people has similar issues.This is what my package.json looks like:

  "dependencies": {
    "native-base": "^2.10.0",
    "react": "16.6.3",
    "react-native": "0.58.0"
  },

I am using windows 10. Things I have done to fix the issue:

  1. Downgrading React-native to .55
  2. Downgrading native base to 2.3
  3. Deleting node modules and reinstalling
  4. Clearing metro bundle cache
  5. Downgarding React to 16.2 verions
  6. Creating a new project and starting again from all over

Any help would be appreciated.

Solution

  • Update:This issue will be fixed with native-base version of 2.11.0. For now install react-timer-mixin in your project:

    npm install react-timer-mixin

    Explanation about issue: The issue is caused after react native removed react-timer-mixin package and seems like native-base is relaying on that package. Here is the link. of github issue.
    So there are 2 ways to solve it for now ( I am not sure if its a proper way to fix it but if you have a better way please suggest):

    • Downgrade your react native version. I have found that this versions of react native and native-base work well with each other:

         "native-base": "^2.8.2",
   "react-native": "^0.55.4"

    • Or install react-timer-mixin in your project npm install react-timer-mixin. Make sure that you are closing your metro instances and then clearing your cache before running it again. (FYI: I have used this approach)