FaridSafi / react-native-gifted-form

📝 « One React-Native form component to rule them all »
MIT License
1.44k stars 214 forks source link

Custom validatable icon rendering #135

Open skuzoluk opened 5 years ago

skuzoluk commented 5 years ago
const getValidationRenderer = (icon, defaultColor, changeIconOnValidation) => {
      return (showValidation, isValid) => {
        let color = defaultColor;
        let iconName = icon;
        let size = 22;
        if (showValidation) {
          color = isValid ? Colors.green10 : Colors.red10;
          if (changeIconOnValidation) {
            iconName = isValid ? 'md-checkmark' : 'md-close';
          }
        }
        return (
          <View style={{ width: 32, paddingLeft: 10, alignItems: 'center', justifyContent: 'center' }}>
            <Icon name={iconName} size={size} color={color} />
          </View>
        );
      };
    };

..
..
..

<GiftedForm.TextInputWidget
          name='emailAddress' // mandatory
          title='Email address'
          placeholder='example@nomads.ly'
          keyboardType='email-address'
          clearButtonMode='while-editing'
          customValidationView={getValidationRenderer('ios-mail', Colors.blue10, false)}
/>