React-Native changing icon color alone

Question

I’m implementing one of those "little eye" buttons that allows the user to view his password to check if it’s right, the button is already working as expected, the problem is that the button icon for some reason is being displayed in blue and the file I am loading is white. I already tried to load another icon, and pass the property tintColor but the color stays blue.

Here’s my current code:

import { TextField } from 'react-native-ui-lib'

const getPasswordIconSource = visibility =>
      visibility
        ? require('@assets/images/visibility_off_white.png')
        : require('@assets/images/visibility_white.png')

console.log(properties.placeholderTextColor)

return (
  <TextField
    autoCapitalize="none"
    autoComplete="password"
    autoCorrect={false}
    blurOnSubmit
    floatOnFocus
    floatingPlaceholder
    onBlur={handleBlur}
    onChangeText={onChange}
    onFocus={handleFocus}
    ref={handleReference}
    returnKeyType="done"
    rightButtonProps={
      showPasswordIcon
        ? {
            iconSource: getPasswordIconSource(showPassword),
            onPress: () => setShowPassword(!showPassword),
            tintColor: properties.placeholderTextColor,
            style: { tintColor: properties.placeholderTextColor },
          }
        : null
    }
    secureTextEntry={!showPassword}
    style={[styles.input, properties.style]}
    textContentType="password"
    {...properties}
    {...inputProperties}
  />
    )
  }
) 

How my icon is being displayed :

How my icon should be displayed:

output:

console.log(properties.placeholderTextColor): #ffffff

Does anyone know how to make the icon appear with the actual color or how to change the color of the icon ?

Note: The icon is in . png format

Answer 1

I found nothing in the documentation (https://z448401921.github.io/react-native-ui-lib/uilib-docs/public/docs/TextField/),

But for the examples posted there on their github (https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/InputsScreen.js), the example that has this case uses the prop iconColor:

<TextField
            text70
            containerStyle={{marginBottom: INPUT_SPACING, width: 210}}
            floatingPlaceholder
            placeholder="Multiline & right button"
            multiline
            rightButtonProps={{iconSource: richText, onPress: this.onPressInfo, iconColor: Colors.red30}}
          />

If you change the tintColor and style for iconColor should solve, then it would look like this:

...
rightButtonProps={
      showPasswordIcon
        ? {
            iconSource: getPasswordIconSource(showPassword),
            onPress: () => setShowPassword(!showPassword),
            iconColor: properties.placeholderTextColor,
          }
        : null
    }
...