aksonov/react-native-tabs

Android example doesn't work

Opened this issue · 4 comments

KBLNY commented

Hi,
Your Example project doesn't work properly, I get the following error:
ReferenceError: Can't find variable: require (line1 in the generated bundle)
Do you know why?

Additionally, I implement the tab on my own project, work very well in iOS, however, in Android I get the following error:
undefined is not an object (evaluating 'el.props.name')
The error occurred on line 29 of your index.js

Thanks for helping

Trying to get this to work too... did you find a solution?

I'm not sure if this will help you, but I fixed my issue by having more than one tab in the Tabs component.

import Index from './Home';
import Cart from '../cart/index';
import Account from '../user/my_account';
import Merchant from '../MerchantLogin/home/index';
import CategoriesAll from '../category/Categories';
import Tabs from 'react-native-tabs';
class FooterTabs extends Component {
constructor(props) {
super(props);
this.state = {
page: 'home'
};
}

renderContent(id) {
	switch (id) {
		case 'home':
			return <Index />
		case 'category':
			return <CategoriesAll />
		case 'cart':
			return <Cart />
		case 'account':
			return <Account />
		case 'merchant':
			return <Merchant />
		default:
			return <Index />
	}
}

renderTabsActive () {
return <Tabs selected={this.state.page} style={{backgroundColor:'white',paddingTop:25}} selectedStyle={{color:'#e73636'}} onSelect={el=>this.setState({page:el.props.name})}>
<Col name="home" selectedIconStyle={{Color:'#e73636'}} style={styles.footerTabCol}>
<Icon style={this.state.page === 'home' ? styles.activeTab:styles.notactiveTab} name="md-home"/>
<Text uppercase={false} style={this.state.page === 'home' ? styles.footerTabTextActive:styles.footerTabTextNotActive}>Home


<Icon style={this.state.page === 'category' ? styles.activeTab:styles.notactiveTab} name="md-albums"/>
<Text uppercase={false} style={this.state.page === 'category' ? styles.footerTabTextActive:styles.footerTabTextNotActive}>Kategori


<Icon style={this.state.page === 'cart' ? styles.activeTab:styles.notactiveTab} name="md-cart"/>
<Text uppercase={false} style={this.state.page === 'cart' ? styles.footerTabTextActive:styles.footerTabTextNotActive}>Cart

<Col name={this.state.access === 'branch'? 'merchant':'account'} selectedStyle={{color:'green'}} style={styles.footerTabCol}>
<Icon style={this.state.page === 'account' ? styles.activeTab:styles.notactiveTab} name="md-person"/>
<Text uppercase={false} style={this.state.page === 'account' ? styles.footerTabTextActive:styles.footerTabTextNotActive}>Akun


}

render() {
	return (<Container>
				{this.renderContent(this.state.page)}
		<Footer style={{
			 height: 45,
			 paddingTop: null,
			 paddingBottom: null,
			 backgroundColor:'#e73636',
			 justifyContent:'center'
		 }}>
		 <FooterTab style={{
				backgroundColor: 'white',
				height: 45,
				borderTopWidth: 0.5,
				borderColor: '#f0f0f0',
				justifyContent:'center'
			}}>
		{this.renderTabsActive()}
 	</FooterTab>
		</Footer>
	</Container>);
}

}
export default connect()(FooterTabs);