RSSD RSSD - 1 month ago 32
iOS Question

React Native Tabbar iOS binding issue [Expected a component class, got object Object]

I've got a simple React Native app with a TabBarIOS component.
For each tab, I have a seperate .js file and the main TabBarIOS component lives in index.ios.js. The other classes are home.ios.js and contact.ios.js.

After I click on an icon I want the app to show the corresponding page( home.ios.js or contact.ios.js). However when I click one of the icons, I get a "Expected a component class, got object Object" error.

So far it looks like the rendering of the TabBarIOS component is alright. I myself think that there is a problem in the binding with the other .js files or a problem with the injection.

index.ios.js

var React = require('react');
var ReactNative = require('react-native');

import Home from './home.ios';
import Contact from './contact.ios';

var {
AppRegistry,
TabBarIOS,
} = ReactNative;

var {
Component
} = React;


class Tab extends Component {

constructor(props) {
super(props);
this.state = {
selectedTab: 'Home'
};
}

render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === 'Home'}
systemIcon="featured"
onPress={() => {
this.setState({
selectedTab: 'Home',
});
}}>
<home/>
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'Contact'}
systemIcon="contacts"
onPress={() => {
this.setState({
selectedTab: 'Contact',
});
}}>
<contact/>
</TabBarIOS.Item>
</TabBarIOS>
)
}
}

AppRegistry.registerComponent('ProtoReactNative', () => Tab);


home.ios.js (I include only this one, contact.ios.js looks the same)

'use strict';

var React = require('react');
var ReactNative = require('react-native');

var {
StyleSheet,
View,
Text
} = ReactNative;

var {
Component
} = React;

var styles = StyleSheet.create({
description: {
fontSize: 20,
textAlign: 'center',
color: '#FFFFFF'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'blue',
}
});

class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Welcome to your React Native Start Component!
</Text>
</View>
);
}
}

module.exports = Home;


Hopefully someone has a solution for me!
Thanks in advance!

EDIT:

'use strict';

var React = require('react');
var ReactNative = require('react-native');

var {
StyleSheet,
} = ReactNative;

var {
View,
Text,
Component
} = React;

var styles = StyleSheet.create({
description: {
fontSize: 20,
textAlign: 'center',
color: '#FFFFFF'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
}
});

class Contact extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
This could be your second tab
</Text>
</View>
);
}
}

module.exports = Contact;

Answer

Step 1: Change <home/> to <Home/> and <contact/> to <Contact/>

Step 2: Inside contact js file, View and Text should be imported from ReactNative. Currently its imported from React

Comments