0

I'm using react-native-paper TextInput to show email icon on the left side of text input and that icon should be green (#22C55E) but it's still showing the default color.

<TextInput
          placeholder={t('Email')}
          style={styles.textInput}
          mode="outlined"
          outlineColor={Colors.transparent}
          activeOutlineColor={Colors.hostessGreen}
          theme={{ roundness: 16 }}
          left={
            <TextInput.Icon
              icon={'email-outline'}
              color="#22C55E"
              style={styles.leftIcon as StyleProp<ViewStyle>}
              size={responsiveFontSize(3)}
            />
          }
        />

enter image description here

Armin Dervić
  • 165
  • 2
  • 11

1 Answers1

11

You have to add iconColor='#22C55E' add in place of color="#22C55E" props in TextInput.Icon.you will be able to change color easily.

<TextInput
      placeholder={t('Email')}
      style={styles.textInput}
      mode="outlined"
      outlineColor={Colors.transparent}
      activeOutlineColor={Colors.hostessGreen}
      theme={{ roundness: 16 }}
      left={
        <TextInput.Icon
          icon={'email-outline'}
          iconColor="#22C55E"
          style={styles.leftIcon as StyleProp<ViewStyle>}
          size={responsiveFontSize(3)}
        />
      }
    />
  • Thank you very much !!! I don't know why it's not written directly in the React Native Paper documentation though ☹ – Julien Pepe Apr 10 '23 at 19:26