ptomasroos / react-native-tab-navigator

A tab bar that switches between scenes, written in JS for cross-platform support
MIT License
2.4k stars 415 forks source link

How should the initialTab be set #44

Closed BigPun86 closed 8 years ago

BigPun86 commented 8 years ago

Hey there.

In my Tab Component i set the initialTab in my getInitialState as follows:

getStateFromStore: function () {
    return {
        selectedTab: 'tab1'
    }
},

I use two Tabs with the TabNavigator, the problem i have now, is that when i set it initial to tab1 it jumps "sometimes" from tab2 to tab1. I tried setting nothing because i thought it might be handles in the react-native-tab-navigator component. Actually i hope someone can show me their solution i just coudn´t figure out how to set the initial selectedTab so there is no jumping around

My TabNavigators:

      <TabNavigator
            tabBarStyle={{padding: 10, backgroundColor: `white`, height: tabBarHeight, top:0, borderBottomWidth: 0.5, borderBottomColor: `grey`}}
            sceneStyle={{ backgroundColor: 'red', paddingBottom: tabBarHeight }}>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tab1'}
                title={"TAB1"}
                titleStyle={{fontSize: 16, fontWeight: 'bold'}}
                onPress={() => this.setState({ selectedTab: 'tab1' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <Tab1Screen
                        {...this.props}/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tab2'}
                title={"TAB2"}
                titleStyle={{fontSize: 16, fontWeight: 'bold'}}
                onPress={() => this.setState({ selectedTab: 'tab2' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <Tab2Screen
                        {...this.props}/>
                </View>
            </TabNavigator.Item>
        </TabNavigator>
ide commented 8 years ago

I think your problem is that this.state.selectedTab might be null or an invalid value at some point. Try initializing your component with this.state = { selectedTab: 'tab1' }.

BigPun86 commented 8 years ago

Okay, i will try it. But isn´t it just a different syntax when using class React.Component instead of var React.createClass:

constructor(){
    super();
    this.state = {
        selectedTab: 'tab1'
    }
}

VS

getInitialState(){
    return {
        selectedTab: 'tab1'
    }
}

Shoudn´t this give me the same result?

ide commented 8 years ago

getInitialState should be fine too. I just don't know if getStateFromStore is causing issues for you.

BigPun86 commented 8 years ago

Oh man! I am an idiot :D i forgot to change that :D I´ll try it later, thanks...

BigPun86 commented 8 years ago

Okay thanks! The issue was caused by my Store....