React Native error - React: createElement: type should not be null

Question

I'm using nativebase as a base for the UI side of a React Native app that I'm developing and I'm running into an error with something that should be very simple.

I want to create a component for the tab footer of the app to include in different views as follows:

./Components/Footer.js

import React, { Component } from 'react';
import {
  Footer,
  FooterTab,
  Button,
  Icon,
  Text
} from 'native-base';

class TabFooter extends Component {
  render() {
    return (
      <Footer >
        <FooterTab>
          <Button>
            <Badge>2</Badge>
            Apps
            <Icon name='ios-apps-outline' />
          </Button>
          <Button>
            Camera
            <Icon name='ios-camera-outline' />
          </Button>
          <Button active>
            Navigate
            <Icon name='ios-compass' />
          </Button>
          <Button>
            Contact
            <Icon name='ios-contact-outline' />
          </Button>
        </FooterTab>
      </Footer>
    );
  }
}

export default TabFooter;

And an example view would be:

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
  Text, List, ListItem, Input, InputGroup } from 'native-base';
import { TabFooter } from '../Components/Footer';

class EditGuest extends Component {
  render() {

    return (
      <Container>
        <Header>
          <Title>Whatever title</Title>
        </Header>

        <Content>
        </Content>
        <TabFooter />
      </Container>
    );
  }
}

export default EditGuest;

But when this view renders I'm getting the error:

ExceptionsManager.js:82 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `EditGuest`.

Is there something really basic that I'm missing because I would of thought that I could just simply include this component within any view without any problems...

http://stackoverflow.com/questions/39839573/react-nativebase-not-showing-my-imported-components#answer-39877342 — Supriya Kalghatgi, Nov 16 '16 at 07:28

score 2 · Answer 1 · answered Nov 16 '16 at 05:50

2

Since you're doing a default export, you should remove {} from your import:

import TabFooter from '../Components/Footer';

see Why es6 react component works only with "export default"?

answered Nov 16 '16 at 05:50

FuzzyTree

32,014
3
54
85

Ok! One step closer... That got rid of the errors, but nothing is rendering. Is anything else jumping at you that I'm doing wrong? Thanks for the resource, I'll have a read. – oldo.nicho Nov 16 '16 at 05:59
1

@oldo.nicho You seem to be missing an import for `Badge` but that should have thrown an error ... – FuzzyTree Nov 16 '16 at 06:09

score 2 · Answer 2 · answered Nov 16 '16 at 07:19

myFooter.js

import React, { Component } from 'react';
import { Footer, FooterTab, Button, Icon, Badge } from 'native-base';

class TabFooter extends Component {
  render() {
    return (
      <Footer>
        <FooterTab>
          <Button>
            <Badge>2</Badge>
            Apps
            <Icon name="ios-apps-outline" />
          </Button>
          <Button>
            Camera
            <Icon name="ios-camera-outline" />
          </Button>
          <Button active>
            Navigate
            <Icon name="ios-compass" />
          </Button>
          <Button>
            Contact
            <Icon name="ios-contact-outline" />
          </Button>
        </FooterTab>
      </Footer>
    );
  }
}

export default TabFooter;

EditGuest.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Header, Title, Content } from 'native-base';
import TabFooter from './myFooter';

class EditGuest extends Component {

  render() {
    return (
      <Container>
        <Header>
          <Title>Whatever title</Title>
        </Header>

        <Content />

        <View>
          <TabFooter />
        </View>
      </Container>
    );
  }
}

export default EditGuest;

Screenshot

Thanks @Supriya! Hmmm, so all I had to do was wrap the `` component within a `` component. Odd... Why is this? — oldo.nicho, Nov 16 '16 at 07:25
Yea I had a same question. You can anyway raise this issue on NativeBase GitHub. — Supriya Kalghatgi, Nov 16 '16 at 07:26
Your question has been answered here - http://stackoverflow.com/questions/39839573/react-nativebase-not-showing-my-imported-components#answer-39877342 — Supriya Kalghatgi, Nov 16 '16 at 07:29
Sweet, thanks. As long as I know how to get around the problem, all good. I'll raise an issue on GitHub. — oldo.nicho, Nov 16 '16 at 07:34

score -1 · Answer 3 · edited Dec 07 '16 at 05:47

-1

Try to change:

import { TabFooter } from '../Components/Footer';

to

import TabFooter from '../Components/Footer';

edited Dec 07 '16 at 05:47

DimaSan

12,264
11
65
75

answered Dec 07 '16 at 04:27

ady limmo

1
2

React Native error - React: createElement: type should not be null

3 Answers3