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.

CodePudding user response：

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';

CodePudding user response：

Try importing this way

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