React Native Element Type is Invalid. Check Render Method

Question

I've looked around and most of these issues are a result if importing or exporting incorrectly but I've checked around my app and I'm not sure what I'm exporting/importing incorrectly. This is the exact error I'm getting.

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of FooterTabs.

Not sure what it means by render method. The component doesn't have a render method. Anyways...

So FooterTabs is just me rendering some footer tabs

import React, { PropTypes } from 'react'
import { View, Text } from 'react-native'
import { Tabs, Tab, Icon } from 'react-native-elements'
import { HomeContainer, TrackLibraryContainer } from '~/containers'
import { NimbusCamera } from '~/components'

export default function FooterTabs (props) {
    console.log(props)
    FooterTabs.propTypes = {
        navigator: PropTypes.object.isRequired,
        dispatch: PropTypes.func.isRequired,
        activeFooterTab: PropTypes.string.isRequired,
        setFooterTab: PropTypes.func.isRequired,
    }
    return (
        <Tabs>
            <Tab
                selected={props.activeFooterTab === "home"}
                titleStyle={{fontWeight: 'bold', fontSize: 10}}
                selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
                title="Home"
                onPress={(tab) => props.dispatch(props.setFooterTab("home"))}
                renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} type="ionicon" name='ios-home-outline' size={33} />}>
                <HomeContainer navigator={navigator}/>  
            </Tab>
            <Tab
                selected={props.activeFooterTab === "camera"}
                titleStyle={{fontWeight: 'bold', fontSize: 10}}
                selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
                title="Record Preview"
                onPress={(tab) => props.dispatch(props.setFooterTab("camera"))}
                renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} type="ionicon" name='ios-camera-outline' size={33} />}>
                <NimbusCamera navigator={navigator}/>   
            </Tab>
            <Tab
                titleStyle={{fontWeight: 'bold', fontSize: 10}}
                selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
                title="Available Streams"
                onPress={(tab) => props.dispatch(props.setFooterTab("library"))}
                renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} type="ionicon" name='ios-musical-notes-outline' size={33} />}>
                <TrackLibraryContainer navigator={navigator}/>  
            </Tab>
        </Tabs>
    )
}

I then export it in app/components/index.js like export { default as FooterTabs } from './FooterTabs/FooterTabs'

All other components that are imported are exported the same way.

I probably just need another set of eyes here. Let me know if you need to see any other files code.

Thanks!

Answer 1

I believe that navigator is undefined, causing errors when rendering the child components. In this case, navigator={navigator} needs to be changed to navigator={props.navigator} in your HomeContainer, NimbusCamera, and TrackerLibraryContainer components.