CODEWITHSUNDEEP
react-nativenative-base
Kol007
Kol007

Reputation: 292

React-Native: Element type is invalid

I have problem with nativebase Footer I have Container and if I include MyFooter, it give me this error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

// main.js
import MyFooter from './MyFooter';
...
<Container>
    <MyHeader title="Оплаты" />
    <Content></Content>
    <MyFooter />
  </Container>

And Footer component

// MyFooter.js
const MyFooter = props => {
  return (
    <Footer>
      <FooterTab>
        <Button vertical active>
          <Text>Info</Text>
        </Button>
        <Button vertical >
            <Text>Remove</Text>
        </Button>
      </FooterTab>
    </Footer>
  );
}
export default MyFooter;

But if I change render method of MyFooter like this:

// MyFooter.js
return (
  <View>
    <Text>
      Test
    </Text>
  </View>
)

So problem not in export/import, because with another render in MyFooter all work perfectly. Can anybody help with this, please?

Answer - import { Text, Footer, FooterTab, Button, Icon } from 'react-native'; ('react-native' instead 'native-base')

Upvotes: 1

Views: 2180

Answers (2)

Maulana Prambadi
Maulana Prambadi

Reputation: 1043

Is this your MyFooter component try to export your component first export default MyFooter like these following:

const MyFooter = () => (   
  <Footer>
    <FooterTab>
      <Button vertical active>
        <Icon name="information" />
        <Text>Инфо</Text>
      </Button>
      <Button vertical >
        <Icon name="add" />
        <Text>Оплаты</Text>
      </Button>
      <Button vertical >
        <Icon name="remove" />
        <Text>Снятия</Text>
      </Button>
    </FooterTab>
  </Footer>
);

export default MyFooter;

Upvotes: 2

basudz
basudz

Reputation: 1037

If you pasted your code exactly as is, then you're missing your closing brace after your return statement in MyFooter.js

Upvotes: 1

Related Questions