Invariant violation error with Native 0.13.2 for android

[MuruganDurai]

Hi, Good work with the icons. I am trying to add icons but getting the following error wherever. Could you please look into this? Do you have any solution or suggestion for this issue?

Invariant Violation: Element type is invalid:expected a string or class/function but got: object. Check the render method of 'myApp'

[corymsmith]

You'll have to share some of the code as somethings not quite right.

On Wed, Nov 18, 2015 at 6:02 AM, MuruganDurai notifications@github.com wrote:

Hi, Good work with the icons. I am trying to add icons but getting the following error wherever. Could you please look into this? Do you have any solution or suggestion for this issue?

Invariant Violation: Element type is invalid:expected a string or class/function but got: object. Check the render method of 'myApp'

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/140

[MuruganDurai]

Thanks @corymsmith Below is the code.

'use strict';

var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, Image,
TextInput,
TouchableHighlight, ToastAndroid, ToolbarAndroid, ScrollView,
} = React;

var Icon = require('react-native-icons'); var Container = require('./app/components/layout/Container'); var MovieItem = require('./app/components/movie/MovieItem'); var Tabbar = require('react-native-tabbar'); var Item = Tabbar.Item; var precomputeStyle = require('precomputeStyle');

var myApp = React.createClass({

getInitialState: function() { return { stores: [], loaded:false, name:'', selected:'Products',
}; },

onTabItemPress:function(name){ console.log("clicked : " + name); this.setState({ selected:name }); },

onChangeText: function(searchString){
console.log(searchString); if(searchString.length >= 2) {
this.fetchStores(searchString);
}else{ this.setState({ stores:[],
}); } },

renderSearchResult: function(searchString){
}

render: function() { console.log("Welcome to Zhopout");
if(this.state.loaded){ return this.renderSearchResult(); } var state = this.state return (

``` Products Mens Wear Now Open Womens Wear Now Open Shoes Now Open Products Brands Mens Wear Now Open Womens Wear Now Open Shoes Now Open Brands Stores Mens Wear Now Open Womens Wear Now Open Shoes Now Open ``` Stores

); },

});

var styles = StyleSheet.create({ //all the styles implemented correctly });

AppRegistry.registerComponent('myApp', () => myApp);

[corymsmith]

Instead of: var Icon = require('react-native-icons');

It should be:

var { Icon } = require('react-native-icons');

On Wed, Nov 18, 2015 at 7:14 AM, MuruganDurai notifications@github.com wrote:

Thanks @corymsmith Below is the code. 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, Image,
TextInput,
TouchableHighlight, ToastAndroid, ToolbarAndroid, ScrollView,
} = React; var Icon = require('react-native-icons'); var Container = require('./app/components/layout/Container'); var MovieItem = require('./app/components/movie/MovieItem'); var Tabbar = require('react-native-tabbar'); var Item = Tabbar.Item; var precomputeStyle = require('precomputeStyle'); var myApp = React.createClass({ getInitialState: function() { return { stores: [], loaded:false, name:'', selected:'Products',
}; }, onTabItemPress:function(name){ console.log("clicked : " + name); this.setState({ selected:name }); }, onChangeText: function(searchString){
console.log(searchString); if(searchString.length >= 2) {
this.fetchStores(searchString);
}else{ this.setState({ stores:[],
}); } }, renderSearchResult: function(searchString){
} render: function() { console.log("Welcome to Zhopout");
if(this.state.loaded){ return this.renderSearchResult(); } var state = this.state return (

``` ``` ``` Products Mens Wear Now Open Womens Wear Now Open Shoes Now Open Products Brands Mens Wear Now Open Womens Wear Now Open Shoes Now Open Brands Stores Mens Wear Now Open Womens Wear Now Open Shoes Now Open Stores

  );
},  
});
var styles = StyleSheet.create({
   container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    toolbar:{
    backgroundColor:'#E45020',
    paddingTop:25,
    paddingBottom:25,
    flexDirection:'row',
    fontSize:20,
    marginBottom:8,
    color:'#eee',
    textAlign:'center',
    fontWeight:'bold'
  },
  toolbarButton:{  
    color:'#FFF',
    textAlign:'center',
    fontSize:15,
    padding:5
  },
  toolbarTitle:{
    color:'#fff',
    textAlign:'center',
    fontWeight:'bold',
    flex:1,
    fontSize:25
  },
  containerStyle:{
    backgroundColor:'#f8f8f8',
    padding:10,
    marginBottom:5,
    marginTop:5,
    borderRadius:10,
    flexDirection:'row'
  },
  progress:{
    width:80,
    height:80
  },
  progressContainer:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#f5fcff'
  },
  containerNewStyle:{  
    marginBottom:5,
    marginTop:5,

flexDirection:'column', justifyContent:'space-between',

  },
  QuickSearItems:{
    textAlign:'center',  paddingTop:10,paddingBottom:10, borderColor:'white'
  },
  tabs: {
    height: 50,
    flexDirection: 'row',
    marginTop: 20,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: '#ccc',
  },
  signInWithFacebookButton: {
    backgroundColor: '#3b5998',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    width: 210,
    padding: 5,
    borderRadius: 3,
    marginTop: 10
  },
   anchor: {
    width: 50,
    height: 50,
    margin: 5
  },
    alert: {
    width: 70,
    height: 70,
    margin: 10
  },
});

## AppRegistry.registerComponent('myApp', () => myApp);

Reply to this email directly or view it on GitHub:
https://github.com/corymsmith/react-native-icons/issues/140#issuecomment-157725240

[MuruganDurai]

Thanks @corymsmith. Fixed it, but icons are not loaded instead vertical rectangle box is loaded (for ex. facebook icon with loaded with blue bgcolor & that box).

[corymsmith]

There's should be something in the logs, I'm guessing that the font isn't added to the project /  included in the Copy Resources phase

On Wed, Nov 18, 2015 at 7:35 AM, MuruganDurai notifications@github.com wrote:

Thanks @corymsmith. Fixed it, but icons are not loaded instead vertical rectangle box is loaded (for ex. facebook icon with loaded with blue bgcolor & that box).

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/140#issuecomment-157730227

[MuruganDurai]

Thanks a ton and good learnings for me.

[corymsmith]

@MuruganDurai No worries, glad you got it sorted