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.

react-router-native + nativebase Tabs initialPage sets initial tab, but tab content is not rendered!!!!

See original GitHub issue

react-native, react and native-base version

the latest for each

Expected behaviour

tab is selected and tab content is rendered

Actual behaviour

tab is selected, but tab content is not rendered!

Steps to reproduce (code snippet or screenshot)

The tabs:

<Tabs initialPage={~~(this.props.match.params.tab||0)} >
    ...
</Tabs>

The route:

<Route ="/tabs/:tab?" component={TabsTest} />

Screenshot of emulator/device

unable to provide screenshot

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

i’ll be receiving an ipad from my boss later this week, i’ll see if happens in ios as well.

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

if you know of a place for react native fiddles, please link it and i’ll give a code sample.

Issue Analytics

State:
Created 5 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

hernanbruno97commented, May 4, 2018

@r3wt I found a temporary solution to this problem first set some variable on the state in 0 state = { activePage:0 } after, update this in componentDidMount method `

setTimeout(()=>{

    this.setState({activePage:1})

},0)`

and use it in page property of tabs `

        <Tabs locked page={this.state.activePage}>

            <Tab  heading={'tab1'}>
                ...
            </Tab>
            <Tab heading={'tab2'}>
               ...
            </Tab>
           
        </Tabs>

1reaction

hernanbruno97commented, May 3, 2018

i have the same problem

versions: -native-base: 2.4.3 -react-native: 0.53.3 -Node: 8.9.0 -Yarn: 1.5.1 -npm: 5.6.0

code:

`<Container >

            <Header hasTabs >
                <Body>
                    <Title>Title</Title>
                </Body>
            </Header>

            <Tabs locked initialPage={1}>
                <Tab style={{width:10}} heading={<TabHeading ><Icon name="map" /></TabHeading>}>
                    <Map />
                </Tab>
                <Tab heading={'First Tab'}>
                    <FirstTab />
                </Tab>
                <Tab heading={'Second Tab'}>
                    <SecondTab />
                </Tab>
                <Tab heading={'Third Tab'}>
                    <ThirdTab />
                </Tab>
            </Tabs>

        </Container>`

before click ‘First Tab’ captura de pantalla 2018-05-03 a la s 10 39 55 after click ‘First Tab’