import React from 'react';
import {
  Animated,
  StyleSheet,
} from 'react-native';

import {
  SlidingTabNavigation
} from '@exponent/ex-navigation';

import { capitalize } from 'lodash';

import FeatureFlags from '../../FeatureFlags';

export default class StyledSlidingTabNavigation extends React.Component {

  render() {
    let { keyToTitle, children, ...props } = this.props;

    return (
      <SlidingTabNavigation
        {...props}
        tabBarStyle={[styles.tabBar, props.tabBarStyle]}
        tabStyle={{
          flex: 0,
          paddingBottom: 12,
          paddingLeft: 12,
          paddingTop: 4,
          width: null,
        }}
        barBackgroundColor="#fff"
        position="top"
        getRenderLabel={this._getRenderLabel}
        pressColor="rgba(0,0,0,0.2)">
        {children}
      </SlidingTabNavigation>
    );
  }

  _getRenderLabel = (props) => (scene) => {
    const { route, index } = scene;


    let title;
    if (this.props.keyToTitle) {
      title = this.props.keyToTitle[route.key];
    } else {
      title = capitalize(route.key);
    }

    const selectedColor = '#0F73B6';
    const unselectedColor = '#232B3A';
    let color;

    if (FeatureFlags.DISPLAY_ALL_EXPLORE_TABS) {
      const inputRange = props.navigationState.routes.map((x, i) => i);
      const outputRange = inputRange.map(inputIndex => inputIndex === index ? selectedColor : unselectedColor);
      color = props.position.interpolate({
        inputRange,
        outputRange,
      });
    } else {
      color = selectedColor;
    }

    return (
      <Animated.Text style={{ color, fontSize: 14 }}>
        {title}
      </Animated.Text>
    );
  }
}

const styles = StyleSheet.create({
  tabBar: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(36, 44, 58, 0.06)',
  },
});

@@ -55,16 +55,24 @@
 eSheet,%0A
+  View,%0A
 %7D from '
@@ -503,16 +503,108 @@
 Style%5D%7D%0A
+        renderIndicator=%7B() =%3E %3CView /%3E%7D%0A        indicatorStyle=%7B%7BbackgroundColor: '#fff'%7D%7D%0A
         

Fix weird yellow bar from sliding tab changes