Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tab header does not show in "native-base": "2.3.1"

See original GitHub issue

Tabs work by swiping but the header saying “tab1” and “Tab2” does not show.

<Container>
        <Header hasTabs>
          <Left>
            <Button transparent style={styles.btnHeader} onPress={() => Actions.pop()}>
              <Icon active name="arrow-back" />
            </Button>
          </Left>
          <Body >
              <Title color='white' style={styles.header}>Vehicles</Title>
          </Body>
          <Right>
            <Button transparent style={styles.btnHeader} onPress={this.props.openDrawer} >
              <Icon active name="menu" />
            </Button>
          </Right>
         
        </Header>
        <Tabs initialPage={1}>
           <Tab heading="Tab1">
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab1 />
          </Tab>
        </Tabs>
      
     
      </Container>

“native-base”: “2.3.1”, “prop-types”: “^15.5.10”, “react”: “16.0.0-alpha.12”, “react-native”: “0.48.4”,

Expected behaviour

Show tabs header saying “Tab1” and “Tab2”

Actual behaviour

Does not show Tab header but tabs work by swiping

Is the bug present in both ios and android or in any one of them?

Testing on Android only ##Screenshot screenshot_20171123-144022

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
Ideasrefinedcommented, Nov 24, 2017

@SupriyaKalghatgi initially I thought its a native-base issue. So I raised it here. Closing it here and moving to gitstrap.

Thanks for support.

1reaction
akhil-gacommented, Nov 23, 2017

@Ideasrefined tried your code. Tab headers are visible. Attaching a screenshot.

screenshot_1511432870

Code

import React from 'react'
import { Container, Header, Content, Tab, Tabs, Text, Left, Button, Icon, Body, Right, Title } from 'native-base';

export default class App extends React.Component {
  render() {
    return <Container>
      <Header hasTabs>
        <Left>
          <Button transparent>
            <Icon active name="arrow-back" />
          </Button>
        </Left>
        <Body >
          <Title color='white'>Vehicles</Title>
        </Body>
        <Right>
          <Button transparent >
            <Icon active name="menu" />
          </Button>
        </Right>
      </Header>
      <Tabs>
        <Tab heading="Tab1">
          <Text>Tab one</Text>
        </Tab>
        <Tab heading="Tab2">
          <Text>Tab two</Text>
        </Tab>
        <Tab heading="Tab3">
          <Text>Tab three</Text>
        </Tab>
      </Tabs>
    </Container>
  }
}

Versions

 "native-base": "2.3.3",
 "react": "16.0.0",
 "react-native": "0.50.1",
Read more comments on GitHub >

github_iconTop Results From Across the Web

react native - 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...
Read more >
Getting Started - NativeBase
To have NativeBase components running onto your native apps, all you need to do is, create a fresh React Native project and install...
Read more >
Toast - NativeBase
You can use standalone toast where you don't have access to useToast hook, for example, in a different file, out of a React...
Read more >
Header - NativeBase
Header. With v3 we have removed the Header as it can be easily built using HStack. You can checkout its recipe. here ....
Read more >
react-native-router-flux/CHANGELOG.md - UNPKG
69, - Pop not working correctly in multiple stack in tabs ... 131, - currentScene is not showing the currently mounted screens key ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Cannot Center Button with NativeBase

Next page

When `TextInput` gets the focus, the `<Footer>` can't be topped up for ios