Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom validatable icon rendering #135

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

skuzoluk
Copy link

  • First i had to fix "Image.resizeMode.contain" bug. Because this variable is no longer exposing in RN 0.57
  • The reason to implement this feature is to use any custom element as the left icon depending on the validation state. For example i created a sample renderer function to render react-native-vector-icons/Ionicons:
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='[email protected]'
          keyboardType='email-address'
          clearButtonMode='while-editing'
          customValidationView={getValidationRenderer('ios-mail', Colors.blue10, false)}
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant