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

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 3
  • Comments: 15 (5 by maintainers)

Commits related to this issue

Most upvoted comments

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.