Nativebase: TypeError: Cannot read property 'brandPrimary' of undefined

[max-konin]

react-native, react and native-base version

"react": "16.2.0",
"react-native": "0.53.0",
"native-base": "^2.3.7",

Expected behaviour

The Jest test suite is expected to run & tests pass

Actual behaviour

    TypeError: Cannot read property 'brandPrimary' of undefined

      at Object.<anonymous> (node_modules/native-base/src/theme/variables/platform.js:196:20)
      at Object.<anonymous> (node_modules/native-base/dist/src/theme/components/Body.js:1:112)
      at Object.<anonymous> (node_modules/native-base/src/theme/components/index.js:2:1)

Steps to reproduce (code snippet or screenshot)

1. Create a simple component like:

import React, { Component } from 'react';
import { Footer, Text, Left, Body, Right } from 'native-base';

class SimpleComponent extends Component {
  render() {
    const { leftText, rightText } = this.props;
    return (
      <Footer>
        <Left>
          <Text>{leftText}</Text>
        </Left>
        <Body/>
        <Right>
          <Text>{rightText}</Text>
        </Right>
      </Footer>
    );
  }
}

export default SimpleComponent;

1. Add a simple test:

describe('Components | SimpleComponent', function () {
  let wrapper;
  const leftTest = 'Text';
  beforeEach(() => {
    wrapper = shallow(<SimpleComponent leftTest={leftTest}/>);
  });

  it('renders leftText', function () {
    expect(wrapper.find(Text).text()).to.eq(leftTest);
  });
});

1. yarn test / npm test

[stokesbga]

+1

[SupriyaKalghatgi]

@max-konin Share complete snippet for test case

[thomaswinckell]

To solve this issue, just replace this :

radioColor: this.brandPrimary,

by this :

get radioColor() {
    return this.brandPrimary;
},

in files native-base-theme/variables/platform.js and native-base-theme/variables/material.js at line 196.

This is due to the fact that you cannot access an object property while declaring it. So, in my solution, i am using a computed property, which will be evaluated at runtime.

I can do a PR if you want.

[max-konin]

@thomaswinckell thx, it works for me.

@SupriyaKalghatgi Do you need snippet for test case now?

[max-konin]

@SupriyaKalghatgi why is it closed? it still occur with master branch of NativeBase

[SupriyaKalghatgi]

@max-konin Fixed on branch master

[liltimtim]

Still seeing the issue at line 196 using "native-base": "^2.3.9", as package.json config.

 FAIL  __tests__/App.js
  ● Test suite failed to run

    TypeError: Cannot read property 'brandPrimary' of undefined

      at Object.<anonymous> (node_modules/native-base/dist/src/theme/variables/platform.js:196:22)
      at Object.<anonymous> (node_modules/native-base/dist/src/theme/components/Body.js:1:174)
      at Object.<anonymous> (node_modules/native-base/dist/src/theme/components/index.js:2:11)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.621s
Ran all test suites.

Jest basic test still failing.

[max-konin]

@SupriyaKalghatgi nice. thx

[SupriyaKalghatgi]

@liltimtim #1578 comment

[liltimtim]

@SupriyaKalghatgi I clicked on your link but it doesn't go anywhere? Not sure what's going on there. I saw you had updated the Master branch and updated the version to 2.3.9 however I was still seeing the issue / no change in that version. Perhaps I'm using an old version?

[max-konin]

@liltimtim try to use native-base from master branch. 2.3.9 still has the error

[SupriyaKalghatgi]

@liltimtim The link i shared above was about comment pointing in this issue itself, which said,

Fixed on branch master

This issue has been fixed on master and not released with patch 2.3.9

[panuhorsmalahti]

When can we expect the next release?

[panuhorsmalahti]

I'm in a bit of problematic situation, because native-base 2.3.6-2.3.9 has this issue, while 2.3.5 does not. However, 2.3.5 has #1359 for me.

I can't use the package from GitHub for some reason (e.g. I tried using #master and a few other commits):

error: bundling failed: Error: Unable to resolve module `./theme/components` from `<...>/app/node_modules/native-base/dist/src/index.js`: The module `./theme/components` could not be found 

[SupriyaKalghatgi]

@panuhorsmalahti In a day or two