Nativebase: you closed #1815 without fixing it.

Created on 7 May 2018 · 6Comments · Source: GeekyAnts/NativeBase

Hi! Thanks for trying out NativeBase!
Due to the overwhelming requests and issues/questions we ask you to add the following details with your issue.

Please check the existing open/closed issues for a possible duplicate before creating a new issue :)

Also DO fill out the below form to give us a better idea about your environment and help us debug it quicker. Issues without the required details will mostly be unattended to.

react-native, react and native-base version

Expected behaviour

Actual behaviour

Steps to reproduce (code snippet or screenshot)

Screenshot of emulator/device

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

Any other additional info which would help us debug the issue quicker.

awaiting response

Source

r3wt

Most helpful comment

@r3wt can you try something like this

export default class App extends React.Component {

  componentDidMount = () => {
    this._tabs.goToPage(2);
  }

  render() {
    return <Container>
      <Tabs ref={(c) => this._tabs = c}>
        <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>
  }
}

based on issue-comment https://github.com/GeekyAnts/NativeBase/issues/1010#issuecomment-355668551

akhil-geekyants on 7 Jun 2018

👍3

All 6 comments

please reopen #1815 . it has not been fixed. hernan brunos workaround, while appreciated, is a poor substitute for the correct behavior

r3wt on 7 May 2018

@r3wt #1815 was closed due to improper language

SupriyaKalghatgi on 7 May 2018

improper language? the only improper language in that thread was posted 2 week ago and the message was edited to remove the improper language. you just closed that issue out of spite.

r3wt on 7 May 2018

@r3wt can you try something like this

export default class App extends React.Component {

  componentDidMount = () => {
    this._tabs.goToPage(2);
  }

  render() {
    return <Container>
      <Tabs ref={(c) => this._tabs = c}>
        <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>
  }
}

based on issue-comment https://github.com/GeekyAnts/NativeBase/issues/1010#issuecomment-355668551

akhil-geekyants on 7 Jun 2018

👍3

This issue will be closed in a day in case of no response

SupriyaKalghatgi on 13 Jun 2018

@akhil-geekyants
this causes the tab header to match the page index fed to goToPage method but does not actually change the tab unless you use setTimeout which make it similar to @hernanbruno97 solution. For now, it looks like both solutions are viable and both will produce the same results with the same side effects (i.e. you will see the tab change when viewing the component each time).

@r3wt I know using roundabout ways along with setTimeout to achieve base functionality is dirty, but at this point, I doubt this will be fixed any time soon.