CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
Jalil
Jalil

Reputation: 1236

Element type is invalid: expected a string or a class/function but got: undefined

Here is my component, I exported Home in my Home component at the end of the file. The code worked just fine in React Native but I'm currently porting it to expo and it stopped working. I have read also it has something to do with the imports but I don't have that many. 

import React, { Component } from 'react';
import { Text, View } from 'react-native';

import Home from './src/views/containers/home'
import Header from './src/sections/components/header'
import SuggestionList from './src/videos/containers/suggestion-list'
import CategoryList from './src/videos/containers/category-list'
import Player from './src/player/containers/player'

import API from './utils/api'
export default class App extends Component<{}> {
  state = {
    suggestionList: [],
    categoryList: []
  }

  async componentDidMount() {
    //some code
  }
  render() {
    return (
      <Home> //Line 28
        <Header/>
        <Player/>
        <Text>Search</Text>
        <Text>Categories</Text>
        <CategoryList 
          list={this.state.categoryList}
        />
        <SuggestionList 
          list={this.state.suggestionList}
        />

      </Home>
    )
  }
}

I'm getting this error 

Check the render method of `App`.

This error is located at:
in Home (at App.js:28)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)

Am I importing something wrong?

Home is just a wrapper

import React, {Component} from 'react';

class Home extends Component {
    render(){
        return this.props.children
    }
}

export default Home;

The error was actually in the player, where I had a bad import but then it says that I got the same error but for my playPause component. In line 13 

import React from 'react'
import {
    TouchableHighlight,
    StyleSheet,
    Platform,
} from 'react-native'

import Icon from '@expo/vector-icons'

function PlayPause(props) {
    return (

        <TouchableHighlight //line 13
            onPress={props.onPress}
            style={styles.container}
            underlayColor='rgba(255,255,255,.3)'
            hitSlop={{
                left: 5,
                top: 5,
                bottom: 5,
                right: 5
            }}
        >
            {
                props.isPaused ? <Icon size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-play' : 'md-play'
                  } /> : <Icon size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-pause' : 'md-pause'} />
            }
        </TouchableHighlight>
    )
}

export default PlayPause

Upvotes: 2

Views: 381

Answers (1)

hong developer
hong developer

Reputation: 13906

@expo/vector-icons does not default export ICON.

@expo/vector-icons uses Ionicons by default.

about @expo/vector-icons

enter image description here

example

import { Ionicons } from '@expo/vector-icons';
...
  {
                props.isPaused ? <Ionicons size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-play' : 'md-play'
                  } /> : <Ionicons size={20} color="#98ca3f" name={
                    Platform.OS === 'ios' ? 'ios-pause' : 'md-pause'} />
            }

ICON is the prop of react-native-vector-icons

import Icon from 'react-native-vector-icons/dist/FontAwesome';

Upvotes: 1

Related Questions