razorabhu1995

const scaleValue = showCheckmark ? 1 : 0;
this.scaleCheckmark(scaleValue);

razorabhu1995

const {
    labelText,
    labelTextSize,
    labelColor,
    textColor,
    borderBottomColor,
    inputType,
    customStyle,
    onChangeText,
    showCheckmark

razorabhu1995

<InputField
  labelText="PASSWORD"
  onChangeText={this.handlePasswordChange}
  labelTextSize={14}
  labelColor={colors.white}
  textColor={colors.white}
  borderBottomColor={colors.white}
  inputType="password"
  customStyle={{ marginBottom: 30 }}
  showCheckmark={password === '12345'}

razorabhu1995

<InputField
  labelText="EMAIL ADDRESS"
  onChangeText={this.handleEmailChange}
  labelTextSize={14}
  labelColor={colors.white}
  textColor={colors.white}
  borderBottomColor={colors.white}
  inputType="email"
  customStyle={{ marginBottom: 30 }}
  showCheckmark={email === 'test@gmail.com'}

razorabhu1995

<Animated.View style={[{ transform: [{ scale: iconScale }] }, styles.checkmarkWrapper]}>
  <Icon
    name="check"
    color={colors.white}
    size={20}
  />
</Animated.View>

razorabhu1995

const iconScale = scaleCheckmarkValue.interpolate({
  inputRange: [0, 0.5, 1],
  outputRange: [0.01, 1.6, 1],
});

razorabhu1995

const { secureInput, scaleCheckmarkValue } = this.state;
const keyboardType = inputType == 'email' ? 'email-address' : 'default';

razorabhu1995

scaleCheckmark(value) {
  Animated.timing(
    this.state.scaleCheckmarkValue,
    {
      toValue: value,
      duration: 400,
      easing: Easing.easeOutBack,
    },
  ).start();
}

razorabhu1995

this.state = {
  secureInput: !(props.inputType === "text" || props.inputType === "email"),
  scaleCheckmarkValue: new Animated.Value(0),
};

razorabhu1995

import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Animated,
  Easing
} from "react-native";