Animating border color in React Native - react-native

Question

I am trying to animate border color in React Native, but animation doesn't work. Border color doesn't have ORIGINAL_COLOR = '#a0a0a0' neither SUCCESS_COLOR = '#008FEB', it is black. How can I make default color ORIGINAL_COLOR = '#a0a0a0' if keyboard is hidden and SUCCESS_COLOR = '#008FEB' when keyboard shows up?
const styles = StyleSheet.create({
inputContainer: {
borderBottomWidth: 1,
},
});
<Input
containerStyle={styles.inputContainer}
underlineColorAndroid="transparent"
/>;
Input.jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TextInput, Text, View, Animated, Keyboard } from 'react-native';
import styles from './styles';
const SUCCESS_COLOR = '#008FEB';
const ORIGINAL_COLOR = '#a0a0a0';
export default class Input extends Component {
constructor(props) {
super(props);
this.color = new Animated.Value(ORIGINAL_COLOR);
}
componentWillMount () {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
console.log(SUCCESS_COLOR);
Animated.timing(this.color, {
duration: event.duration,
toValue: SUCCESS_COLOR,
}).start();
};
keyboardWillHide = (event) => {
console.log(ORIGINAL_COLOR);
Animated.timing(this.color, {
duration: event.duration,
toValue: ORIGINAL_COLOR,
}).start();
};
render() {
const {
value,
} = this.props;
return (
<Animated.View style={[styles.containerStyle, { borderBottomColor: this.color }]}>
<TextInput
ref="input"
{...this.props}
value={value}
/>
</Animated.View>
);
}
}

Answer 1

Here you go: https://snack.expo.io/#zvona/interpolation-of-color
The key is to use interpolate to change the number value into rgb value:
let borderBottomColor = this.color.interpolate({
inputRange: [0, 1],
outputRange: [ORIGINAL_COLOR, SUCCESS_COLOR]
});