title: Invariant Violation: invariant violation: outputRange cannot include #ffffff. (#ffffff, #aaa2d7,#aaa2d7)
body: <p>I get this error even I change: inputIndex === i ? 255: 0 to inputIndex === i ? "#ffffff" : "#aaa2d7".</p>
  
  <p>the purpose, is when the first tab is active the title color should be white "#ffffff" and others tabs should be "#aaa2d7"</p>
  
  <pre><code>    const inputRange = props.navigationState.routes.map((x, i) =&gt; i);
      return (
        &lt;View style={{backgroundColor: "#5243af",flexDirection: 'row', height: Metrics.HEIGHT * 0.1, elevation: 0}}&gt; 
          { props.navigationState.routes.map((route, i) =&gt; {
            const color = Animated.color(
              Animated.round(
                Animated.interpolate(props.position, {
                  inputRange,
                  outputRange: inputRange.map(inputIndex =&gt;
                    inputIndex === i ? "#ffffff" : "#aaa2d7"
                  ),
                })
              ),
              0,
              0
            );
            return (
              &lt;TouchableOpacity
                style={{flex: 1, alignItems: 'center', borderLeftColor: "#9a91d2", borderLeftWidth: 1/* , borderBottomWidth: 3, borderBottomColor "red" */}}
                key={i}
                onPress={() =&gt; {
                  //this.changeTabs(route.key)
                  this.setState({ index: i })
                }}&gt;
                {this._getTabBarIcon(route.key)}
                &lt;Animated.Text style={{ color, fontSize: Fonts.moderateScale(15), marginBottom: 10 }}&gt;{route.title.toLocaleUpperCase()}&lt;/Animated.Text&gt;
              &lt;/TouchableOpacity&gt;
            );
          })}
        &lt;/View&gt;
      );
    }
  </code></pre>
  
  <p>thank you</p>