Skip to content

Instantly share code, notes, and snippets.

@gianpaj
Last active February 24, 2018 12:33
Show Gist options
  • Save gianpaj/dd81d26190d49ee77ff33c0e8f602244 to your computer and use it in GitHub Desktop.
Save gianpaj/dd81d26190d49ee77ff33c0e8f602244 to your computer and use it in GitHub Desktop.
animate button backgroundColor based input field's values - React Native
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>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment