animate button backgroundColor based input field's values - React Native

anim-button-from-input-fields.js

import React from 'react';

import { Animated, View } from 'react-native';
import { FormInput } from 'react-native-elements';
import AnimButton from 'react-native-micro-animated-button';

export class LoginScreen extends React.Component {
  PwdInput;
  loginBtn;
  animatedValue = new Animated.Value(0);
  backgroundColor = this.animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [colors.grey4, colors.primary],
  });

  state = {
    emailAddress: 'test@gmail.com',
    password: '',
    modalVisible: false,
    disabled: true,
  };

  /**
   * trigger the background color animation of the LoginButton
   */
  componentWillUpdate(nextProps, nextState) {
    const {
      emailAddress: emailAddressNext,
      password: passwordNext,
      disabled: disabledNext,
    } = nextState;
    const { emailAddress, password, disabled } = this.state;

    if (
      emailAddressNext !== emailAddress ||
      passwordNext !== password ||
      disabledNext !== disabled
    ) {
      const areFieldEmpty = !emailAddressNext || !passwordNext;

      this.setState({ disabled: areFieldEmpty });
      
      Animated.timing(this.animatedValue, {
        toValue: areFieldEmpty ? 0 : 1,
        duration: 300,
      }).start();
    }
  }

  render() {
    const { emailAddress, password, disabled } = this.state;

    return (
      <View>
        <FormInput
          placeholder="Email"
          keyboardType="email-address"
          value={emailAddress}
          onChangeText={text => this.setState({ emailAddress: text })}
        />
        <FormInput
          secureTextEntry
          placeholder="Password"
          value={password}
          onChangeText={text => this.setState({ password: text })}
        />
        <AnimButton
          ref={r => (this.loginBtn = r)}
          disabled={disabled}
          // eslint-disable-next-line
            style={{
            backgroundColor: this.backgroundColor,
            borderColor: this.backgroundColor,
          }}
          onPress={() => console.warn('the login dispatcher via redux')}
          label="Log in"
          testID="LoginButton"
        />
      </View>
    );
  }
}