Nativebase: mapPropsToStyleNames is not defined

[apinrdw]

react-native, react and native-base version

[email protected]
[email protected]
[email protected]

Steps to reproduce (code snippet or screenshot)

just import any component will raise this error.

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

tested on iOS simulator

[shivrajkumar]

Closing this issue, as this doesn't seems to happen with the newer versions.

[luchillo17]

@shivrajkumar Please reopen, just happened to me with latest native-base version 2.1.5, but in Android.

[SupriyaKalghatgi]

@luchillo17 Could you post your package.json here

[luchillo17]

I'll do it tonight, also in the linked issue they say maybe i'm mixing incompatible React and React-Native versions:
https://github.com/facebook/react/issues/8788

[luchillo17]

@SupriyaKalghatgi I'm not at home, grab the package.json from the repo:

{
  "name": "InsuranceCalculator",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "tsc": "tsc",
    "lint": "tslint src/**/*.ts",
    "clean": "rimraf artifacts",
    "watch": "yarn build -- -w",
    "build": "yarn run clean && yarn tsc --",
    "start": "react-native start",
    "start:watch": "npm run build && concurrently -r 'npm run watch' 'sleep 1.3 && npm run start'",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "devDependencies": {
    "@types/jest": "^19.2.4",
    "@types/react": "^15.0.27",
    "@types/react-native": "^0.44.10",
    "@types/react-redux": "^4.4.42",
    "@types/redux-form": "^6.6.2",
    "@types/remote-redux-devtools": "^0.5.0",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015-and-decorators": "^1.2.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^1.9.2",
    "concurrently": "^3.4.0",
    "jest-expo": "~1.0.1",
    "react-test-renderer": "16.0.0-alpha.6",
    "redux-devtools-extension": "^2.13.2",
    "remote-redux-devtools": "^0.5.11",
    "remote-redux-devtools-on-debugger": "^0.7.1",
    "rimraf": "^2.6.1",
    "tslint": "^5.4.3",
    "typescript": "^2.3.4"
  },
  "dependencies": {
    "@expo/vector-icons": "^5.0.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "native-base": "^2.1.5",
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    "react-native-router-flux": "^3.39.2",
    "react-native-vector-icons": "^4.2.0",
    "react-redux": "^5.0.5",
    "redux": "^3.6.0",
    "redux-connect-decorator": "^0.1.0",
    "redux-form": "^6.8.0"
  }
}

I think it might be the ^ semver selector allowing me to mix React & React-native versions, what do you think?

[luchillo17]

I've been testing more, this is my output in a component with just React-Native's Text component:

And this is with Native-Base's Text component:

Please don't tell me Native-Base also needs to ensure some compatibility.

[SupriyaKalghatgi]

@luchillo17 yes may be
I have tried with these in my package.json and it goes well

"dependencies": {
    "native-base": "^2.1.5",
    "react": "16.0.0-alpha.12",
    "react-native": "0.45.1"
  },

[luchillo17]

I've just created a new project and tested, indeed it works, however my project is based on Typescript, might it be that?

[luchillo17]

@SupriyaKalghatgi Did you installed with npm or yarn?

[SupriyaKalghatgi]

@luchillo17 I did react-native init and then npm install native-base --save

[luchillo17]

I've started all over again, i'm using CRNA ejected to regular react native app.

Btw, have you noticed that react-native-cli package hasn't received an update since 2016-12-16 while CRNA since 2017-03-15?

[adityak368]

+1

[ken1983]

The issue still exists when upgraded to react-native 0.48 from 0.43 along with upgrading the native base to 2.3.1 from 2.1.2 ..Is there a fix for this?

here is my package.json..
{
"name": "hashout",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"@shoutem/theme": "^0.10.0",
"@shoutem/ui": "^0.21.3",
"mobile-center": "^0.9.0",
"mobile-center-analytics": "^0.9.0",
"mobile-center-crashes": "^0.9.0",
"native-base": "^2.3.1",
"react": "^16.0.0-alpha.12",
"react-native": "^0.48.1",
"react-native-code-push": "^5.0.0-beta",
"react-native-fcm": "^9.1.0",
"react-native-google-analytics-bridge": "^5.2.2",
"react-native-image-picker": "^0.26.3",
"react-native-linear-gradient": "^2.3.0",
"react-native-photo-view": "^1.4.0",
"react-native-vector-icons": "^4.3.0",
"react-navigation": "^1.0.0-beta.9",
"react-redux": "^5.0.6",
"react-timer-mixin": "^0.13.3",
"redux": "3.6.0"
},
"devDependencies": {
"babel-jest": "^21.0.0",
"babel-preset-react-native": "^3.0.2",
"jest": "^19.0.2",
"react-test-renderer": "15.4.2",
"redux-devtools": "^3.3.2",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0"
},
"jest": {
"preset": "react-native"
}
}

[pietgk]

Same kind of error with React-native 49.2 and native-base 2.3.2 in a jest test giving:

ReferenceError: mapPropsToStyleNames is not defined
      at Object.<anonymous> (node_modules/native-base/dist/src/Utils/mapPropsToStyleNames.js:3:21)
      at Object.<anonymous> (node_modules/native-base/dist/src/basic/Text.js:7:27)
      at Object.<anonymous> (node_modules/native-base/dist/src/basic/SwipeRow.js:5:11)

the error is removed when i patch node_modules/native-base/src/Utils/mapPropsToStyleNames.js to:

i had to add to several dist files (DefaultTabBar.js, ScrollableTabBar.js):
var mapPropsToStyleNames=require("../../Utils/mapPropsToStyleNames");

import _ from "lodash";

export default function(styleNames, props) {
  const keys = _.keys(props);
  const values = _.values(props);

  _.forEach(keys, (key, index) => {
    if (values[index]) {
      styleNames.push(key);
    }
  });

  return styleNames;
};

Currently not available to create a PR for this, but this should give a hint to solve this.

[arolson101]

I just got this error and it seems to be a case issue; my Utils folder was capitalized but the file referenced utils. I renamed the folder and all was well.