Making the first TabNavigator.Item display 'renderSelectedIcon'

[rsokz]

On start, how can I have the application display the first TabNavigator.item as its 'renderSelectedIcon' icon? In my case, my first page is Home and I would like the icon to be red which is what I have set for ''renderSelectedIcon'

<TabNavigator>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          title="Home"
          renderIcon={() => <Image style={{width: 27, height: 27}} source={require('./Icons/Home.png')} />}
          renderSelectedIcon={() => <Image style={{width: 27, height: 27, tintColor: "#c6311f"}} source={require('./Icons/Home.png')} />}
          onPress={() => this.setState({ selectedTab: 'home' })}>
          {this._renderContent('#414A8C', 'Home')}
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'nearby'}
          title="Nearby"
          renderIcon={() => <Image style={{width: 27, height: 27}} source={require('./Icons/Compass.png')} />}
          renderSelectedIcon={() => <Image style={{width: 27, height: 27, tintColor: "#c6311f"}} source={require('./Icons/Compass.png')} />}
          onPress={() => this.setState({ selectedTab: 'nearby' })}>
          {this._renderContent('#090', 'Nearby')}
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'calendar'}
          title="Calendar"
          renderIcon={() => <Image style={{width: 27, height: 27}} source={require('./Icons/Calendar.png')} />}
          renderSelectedIcon={() => <Image style={{width: 27, height: 27, tintColor: "#c6311f"}} source={require('./Icons/Calendar.png')} />}
          onPress={() => this.setState({ selectedTab: 'calendar' })}>
          {this._renderContent('#900', 'Calendar')}
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'about'}
          title="About"
          renderIcon={() => <Image style={{width: 27, height: 27}} source={require('./Icons/About.png')} />}
          renderSelectedIcon={() => <Image style={{width: 27, height: 27, tintColor: "#c6311f"}} source={require('./Icons/About.png')} />}
          onPress={() => this.setState({ selectedTab: 'about' })}>
          {this._renderContent('#009', 'About')}
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'donate'}
          title="Donate"
          renderIcon={() => <Image style={{width: 27, height: 27}} source={require('./Icons/Donate.png')} />}
          renderSelectedIcon={() => <Image style={{width: 27, height: 27, tintColor: "#c6311f"}} source={require('./Icons/Donate.png')} />}
          onPress={() => this.setState({ selectedTab: 'donate' })}>
          {this._renderContent('#001', 'Donate')}
        </TabNavigator.Item>
      </TabNavigator>

[zhan2016]

you have to initialize the state(ES6 default): constructor(props){ super(props); this.state = { selectedTab:"home" } }