React Native Element Type无效。 选中渲染方法

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.