aksonov / react-native-tabs

React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)
Apache License 2.0
727 stars 116 forks source link

Android example doesn't work #23

Open KBLNY opened 8 years ago

KBLNY commented 8 years ago

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

latimesmike commented 8 years ago

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

latimesmike commented 8 years ago

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

creativefull commented 8 years ago

up

nagacoder commented 6 years ago

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

Kategori
        <Col name="cart" style={styles.footerTabCol}>
         <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</Text>
        </Col>
        <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</Text>
        </Col>
    </Tabs>
}

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);