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

Created on 22 Apr 2018 · 9Comments · Source: GeekyAnts/NativeBase

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.

Source

r3wt

All 9 comments

@r3wt Yes you can try to post your code sample on https://snack.expo.io/

isaaclem on 22 Apr 2018

@r3wt Its difficult to trace your issue
Please provide your example on https://snack.expo.io/

SupriyaKalghatgi on 23 Apr 2018

@isaaclem @SupriyaKalghatgi i will create the code sample tonight, when i am working on that side project again. thank you for your patience

r3wt on 23 Apr 2018

@r3wt Any update on this?
Will be closing this today, in case of no activity

SupriyaKalghatgi on 27 Apr 2018

👎1

here's a code example https://snack.expo.io/Skd3YTlpM

r3wt on 27 Apr 2018

hi @SupriyaKalghatgi is there any update? I have provided a code sample.

r3wt on 30 Apr 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:

            <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'

hernanbruno97 on 3 May 2018

👍1

@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>

hernanbruno97 on 4 May 2018

👍1

@hernanbruno97 thank you man. i appreciate it!

r3wt on 4 May 2018

Was this page helpful?

0 / 5 - 0 ratings