Content does not show for in nativebase

Question

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.

NativeBase [2.1.4](https://github.com/GeekyAnts/NativeBase/releases/tag/v2.1.4) says RN >= 0.44.0; and your package.json says `NB: ^2.1.3` and `RN: 0.44.0`. I suggest you to check the version of NativeBase from `node_modules` — Supriya Kalghatgi, May 26 '17 at 07:42
I updated my NB to `"^2.1.4"` and RN to `"^0.44.2"` but still does not work. Any other debug I can do to make this work? — ckim16, May 26 '17 at 16:39
Can you share the output on simulator, along with `package.json` — Supriya Kalghatgi, May 29 '17 at 12:51
@SupriyaKalghatgi I posted my package.json and whatever I see in my simulator console. — ckim16, May 30 '17 at 00:24

score 1 · Accepted Answer · answered May 30 '17 at 08:18

1

You should move the <Tabs> outside <Header>

Check the example from NativeBase-KitchenSink

answered May 30 '17 at 08:18

Supriya Kalghatgi

1,155
9
10

score 0 · Answer 2 · answered May 26 '17 at 06:02

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

Content does not show for in nativebase

2 Answers2