How can i dynamically change icon colors

[Vasault]

Hi guys, i just wanted to know if is possible to stylize the eva icon inside ui kitten input like this.

  const renderIconPass = (prop: any) => (
    <TouchableWithoutFeedback onPress={toggleSecurePass}>
      <Icon fill={isEmailValid ? '#A3B3CF' : '#FF3D71'} name={securePass ? 'eye-off' : 'eye'} {...prop} />
    </TouchableWithoutFeedback>
  ); 

where isEmailValid is an boolean state, whenever i validate my mail i toggle that state so that the icon color changes inside the input.

my main issue with this, is that since the color of the icon is based on the text color of the input, is taking the color of my text, which is a darker grey compared to what i'm looking for

  <Input
    autoCapitalize="none"
    accessoryRight={renderIconEmail}
    status={isEmailValid ? 'basic' : 'danger'}
    placeholderTextColor={isEmailValid ? '#3066FA' : '#FF3D71'}
    value={txtEmail}
    selectionColor={isEmailValid ? '#3066FA' : '#FF3D71'}
    style={[
      styles.loginInput,
      {
        borderColor: isEmailValid ? '#E6ECF3' : '#FF3D71',
      },
    ]}
    keyboardType="default"
    onChangeText={(text) => {
      setTxtEmail(text);
    }}
  />

as you can see in this image, it stays in the same color no matter what.

Package	Version
@eva-design/eva	^2.0.0
@ui-kitten/components	^5.0.0
@ui-kitten/eva-icons	^5.0.0

[artyorsh]

👋 there. Just tried running same code and the answer is yes, you can. And even in 2 variations.

1. Passing a fill property, just like you did. Notice it's passed after we do spreading of the inherited props.

   const CalendarOutlineIcon = (props: IconProps): IconElement<ImageProps> => (
   <Icon {...props} fill='red' name='calendar-outline' />
   );

2. Passing a style prop with a tintColor property. Notice we use style from the inherited props as well.

   const CalendarOutlineIcon = (props: IconProps): IconElement<ImageProps> => (
   <Icon {...props} style={[props.style, { tintColor: 'blue' }]}  name='calendar-outline' />
   );

Advice

It's recommended to use status property instead of using conditional colors. You may pass status='danger' to change the border and the rest colors of the Input. It's also possible to define status colors in case standard Eva colors do not fit.

<Input status={isEmailValid ? 'basic' : 'danger'} />

[Vasault]

thank you, it worked :)