CODEWITHSUNDEEP
react-nativenative-base
ckim16
ckim16

Reputation: 1749

Content does not show for <Tabs> in nativebase

I'm using "native-base": "^2.1.3" and "react-native": "0.44.0" and the content for my tabs does not show and I'm not sure how to fix this.

import HomeTab from '../components/homeTab';

render() {
    return (
      <Drawer
        ref={(ref) => { this._drawer = ref; }}
        content={<Sidebar navigator={this._navigator}/>}
        onClose={() => this.closeDrawer()}
        >
        <Container>        
          <Header style={styles.header} hasTabs>
            <Tabs tabBarUnderlineStyle={styles.underLine}>
              <Tab
                activeTabStyle={styles.header}
                activeTextStyle={styles.text}
                tabStyle={styles.header}
                textStyle={styles.text}
                heading="Home"
                >
                <HomeTab />
              </Tab>
              <Tab
                activeTabStyle={styles.header}
                activeTextStyle={styles.text}
                tabStyle={styles.header}
                textStyle={styles.text}
                heading="Something else"
                >
                <Button><Text>Hello?</Text></Button>
              </Tab>
            </Tabs>
          </Header>
        </Container>
      </Drawer>
    );
  }
}

I just want to see something showing under the tab bar but nothing really appears on both Home tab and something else tab. And only thing that HomeTab contains is

render() {
    return (
      <Container>
        <Content>
          <Text>This is Home Tab</Text>
        </Content>
      </Container>
    );
  }

Has anyone had a same issue that I have and know how to fix this?

Thank you all for your time.

EDITED--------------------------------------------------------------

My package.json looks like..

"dependencies": {
    "axios": "^0.16.1",
    "native-base": "^2.1.4",
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.2",
    "react-native-router-flux": "^3.39.1",
    "react-redux": "^5.0.5",
    "redux": "^3.6.0",
    "redux-form": "^6.7.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "1.9.2",
    "jest": "20.0.3",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "jest": {
    "preset": "react-native"
  }

and there is nothing special in my simulator other than saying

2017-05-29 17:22:07.068987-0700 YOUR_APP[54929:28003814] [] nw_connection_get_connected_socket_block_invoke 2947 Connection has no connected handler.

Upvotes: 0

Views: 1034

Answers (2)

Supriya Kalghatgi
Supriya Kalghatgi

Reputation: 1155

You should move the <Tabs> outside <Header>

Check the example from NativeBase-KitchenSink

Upvotes: 1

Arunkumar
Arunkumar

Reputation: 1741

Try the below code for use native base tab view

render() {
    return (
      <Drawer
        ref={(ref) => { this._drawer = ref; }}
        content={<Sidebar navigator={this._navigator}/>}
        onClose={() => this.closeDrawer()}
        >
        <Container>        
          <Header style={styles.header} hasTabs>
            <Tabs>
              <Content tabLabel='Home' style={{  padding: 10 }}>
                  <Text>This is Home Tab</Text>
              </Content>
              <Content tabLabel='Work' style={{  width: width*.42,padding: 10 }}>
                  <Text>This is Work Tab</Text>
              </Content>
          </Tabs>
          </Header>
        </Container>
      </Drawer>
    );
  }
}

Above code is not working then update the your native base npm

Upvotes: 0

Related Questions