CODEWITHSUNDEEP
androidreact-nativeimportcomponents
Perry
Perry

Reputation: 35

Can't use newly imported components in React Native?

I've been working on this program and I've recently tried to use some new components from the react-native library like Icon and Header but whenever I try to use them in the render function I get error:

"Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

This is really weird to me because I was, and still am, using components like Image, Text, and View without a problem so I don't get why I would be having an issue now with these new components. I'm not sure what I changed in my program to cause something like this to happen.

Only thing I can think of is that "Settings" used to be a default class but it is now not, but that doesn't explain how the old component I was using from the library still work. Keep in mind the other components I imported before like Image and others still work.

Here's and snippet of the offending code:

import React, { Component } from 'react';
import {StyleSheet,  Text, View,  TouchableHighlight,  Image, Header, Icon} from 'react-native';
import { createStackNavigator } from 'react-navigation';

export class Settings extends React.Component {

  render(){
    return (
      <View>
        <View style={{height: 55,  backgroundColor: '#007ebc'}}>
          <View style={{flexDirection: "row", marginLeft: 10}}>
           <Icon //<-------USING ICON WILL GIVE ME ERROR
             name = 'arrowleft' 
           />             
           <Image source={require("../assets/LogoLrg.png")} 
            style={{ width: 55, height: 30, marginTop: 10 }}   
            />
            <Text style={styles.headerText}>   Settings </Text>
          </View>
        </View>
      </View>
    )
  }

Upvotes: 1

Views: 540

Answers (2)

Uzair A.
Uzair A.

Reputation: 1638

Unless I have missed some major update to React Native, you cannot import Header and Icon components from react-native because they don't exist. These components may be a part of some open-source library like react-native-elements or native-base, so you first have to install them:

npm i native-base --save

or,

npm i react-native-elements --save

and then use them:

import { Header, Icon } from 'react-native-elements' //or 'native-base'

RN Elements: Icon, Header

Native Base: Icon, Header

Upvotes: 1

Shangwei Yin
Shangwei Yin

Reputation: 89

I don't think Icon or Header component exists in react-native library.

You can check it in react native website or react-native.js source code.

http://facebook.github.io/react-native/docs/getting-started

Upvotes: 2

Related Questions