CODEWITHSUNDEEP
react-native
Joshua Harwood
Joshua Harwood

Reputation: 357

Render Error: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

I just have this in a new app so far:

import React from 'react';
import { View } from 'react-native';
import { Header } from './components/Header';


const App = () => {
  return (
    <View>
      <Header withTitle='AppTitle' />
    </View>
  );
};

export default App;

And Header is defined in the aforesaid folder as follows:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Icon } from 'react-native-vector-icons/Octicons';


const styles = StyleSheet.create({
    header: {
        width: '100%',
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',

    },
    headerText: {
        fontWeight: 'bold',
        fontSize: 20,
        color: '#000000',
        letterSpacing: 1,
    },
    headerIcon: {
        position: 'absolute',
        left: 16,
    }
});


const Header = ({withTitle}) => {
    return (
        <View>
            <Icon name='three-bars' size={30} style={styles.headerIcon} />
            <View style={styles.header}>
                <Text style={styles.headerText}>{withTitle}</Text>
            </View>
        </View>    
    );
};


export default Header;

I tried various import methods, but the undefined leads me to believe that the component is not being returned, though I don't see where.

Upvotes: 0

Views: 366

Answers (2)

user17210172
user17210172

Reputation:

When a function or component is exported default then we import it without curly braces and when it is simply exported then we import it with curly braces.

In your case, you export your Header default. So, you have to import it like below:

import Header from './components/Header';

And all the Icons in react-native-vector-icons are exported default like:

export default Icon;

So, you have to import it like below:

import Icon from 'react-native-vector-icons/Octicons';

Upvotes: 2

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Try importing this way

import Icon from 'react-native-vector-icons/Octicons';

Upvotes: 0

Related Questions