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...

Try wrapping TabFooter in View

Supriya Kalghatgi
– Supriya Kalghatgi

2016-11-16 07:13:00 +00:00
Commented Nov 16, 2016 at 7:13 — Supriya Kalghatgi
– Supriya Kalghatgi, Commented Nov 16, 2016 at 7:13
stackoverflow.com/questions/39839573/…

Supriya Kalghatgi
– Supriya Kalghatgi

2016-11-16 07:28:51 +00:00
Commented Nov 16, 2016 at 7:28 — Supriya Kalghatgi
– Supriya Kalghatgi, Commented Nov 16, 2016 at 7:28

FuzzyTree · Accepted Answer · 2016-11-16 05:50:21Z

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, 2016 at 5:50

FuzzyTree

32.4k3 gold badges58 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oldo.nicho Over a year ago

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.

FuzzyTree Over a year ago

@oldo.nicho You seem to be missing an import for Badge but that should have thrown an error ...

Supriya Kalghatgi · Accepted Answer · 2016-11-16 07:19:33Z

2

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

answered Nov 16, 2016 at 7:19

Supriya Kalghatgi

1,1559 silver badges10 bronze badges

4 Comments

oldo.nicho Over a year ago

Thanks @Supriya! Hmmm, so all I had to do was wrap the <TabFooter /> component within a <View> component. Odd... Why is this?

Supriya Kalghatgi Over a year ago

Yea I had a same question. You can anyway raise this issue on NativeBase GitHub.

Supriya Kalghatgi Over a year ago

Your question has been answered here - stackoverflow.com/questions/39839573/…

oldo.nicho Over a year ago

Sweet, thanks. As long as I know how to get around the problem, all good. I'll raise an issue on GitHub.

DimaSan · Accepted Answer · 2016-12-07 05:47:57Z

-1

Try to change:

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

to

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

edited Dec 7, 2016 at 5:47

DimaSan

12.8k15 gold badges71 silver badges81 bronze badges

answered Dec 7, 2016 at 4:27

Ady Suryadi

12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related