kiok46/modify_color_of_tabs.md

## modify_color_of_tabs.md

      
    Raw
  

              modify_color_of_tabs.md
            
          
    modify_color_of_tabs

Change the Color of Custom tabs when they change.

handleTabNavigation method that changes the state which leads to re-render the UI and hence the colors.

  handleTabNavigation = (route, idx) => {
      if (this.state.storiesTabOpen && idx === 0 || this.state.searchTabOpen && idx === 1){
          this.setState({ searchTabOpen: !this.state.searchTabOpen,
                          storiesTabOpen: !this.state.storiesTabOpen})
          this.props.navigation.navigate(route.routeName)
      }
  }


Since the text color and background color need not to be the same.
ActiveTab should be: 'rgba(222, 88, 51, 1)' hence text should be 'white'. and vice versa should happen for the InactiveTab.

<View style={{ backgroundColor: Colors.tintColor }}>
    <View style={styles.tabContainer}>

      {this.props.navigation.state.routes.map((route, idx) => (

        <TouchableHighlight
          onPress={() => this.handleTabNavigation(route, idx)}
          style={[styles.tab, { backgroundColor: this.handleTabColors(idx)} ]}
          key={route.routeName}
        >
          <Text style={{ color: this.handleTabColors(idx === 1 ? 0: 1) }}>{route.routeName}</Text>
        </TouchableHighlight>

      ))}

    </View>
</View>


Set state to know which tab is active and which is not.

    constructor(props) {
        super(props)
        this.state = {
            searchTabOpen: true,
            storiesTabOpen: false
        }
    }

    handleTabColors = (idx) => {
       // Looks a non-professional approach, will comeup with a better solution
       // and update or create a new gist, but for now this works. :D
        if (idx === 0){
            if (this.state.searchTabOpen){
                return 'white'
            }
            return Colors.tintColor

        } else {
            if (this.state.storiesTabOpen){
                return 'white'
            }
            return Colors.tintColor
        }
    }


Thanks to this blog
cool!