Strikethrough Placeholder?

[MauriceArikoglu]

Observed that the placeholder text above InputStandard has a white strikethrough line:

[swushi]

Could you please provide some code for further diagnosis?

[MauriceArikoglu]

Code in question:

<InputStandard
        style={styles.input}
        activeColor={styles.highlightedText.color}
        inactiveColor={styles.brightText.color}
        errorColor={styles.errorText.color}
        fontColor={styles.darkText.color}
        fontFamily={styles.darkText.fontFamily}
        errorFontFamily={styles.errorText.fontFamily}
        placeholder={props.placeholder}
        error={error}
        value={text}
        keyboardType={props.inputType ?? 'default'}
        autoCompleteType={'off'}
        autoCapitalize={props.capitalize ?? 'none'}
        secureTextEntry={props.secure}
        onChangeText={onChangeText}
      />

  styles.input: {
    height: Platform.OS === 'android' ? 65 : 45,
    width: '100%',
    backgroundColor: 'transparent',
  },

Strikethrough is #FFFFFF - although not setting any white anywhere

[MauriceArikoglu]

Color "white" coming from https://github.com/swushi/react-native-input-outline/blob/8c28f40fc2d05cb067a395f61ae6d9f9ba82efbe/src/components/InputStandard.tsx#L185

Confirmed by changing locally

[MauriceArikoglu]

Confirmed its this layout code causing the issue:

https://github.com/swushi/react-native-input-outline/blob/8c28f40fc2d05cb067a395f61ae6d9f9ba82efbe/src/components/InputStandard.tsx#L373-L379

[MauriceArikoglu]

Suggested fix: Instead of using backgroundColor, use backgroundColor: "transparent"

placeholderSpacer: { 
    position: 'absolute',
    top: -1,
    left: paddingHorizontal - 3,
    backgroundColor: "transparent",
    height: 1,  
  }

[swushi]

I'm not going to be able to take a look at it for a little while. Did you test that and verify it works? As of right now, the point of that background color being there is to give the appearance of a gap, matching the background color. If it were transparent would it not show the underlying color?

[MauriceArikoglu]

@swushi I confirmed the transparent backgroundColor fixing the issue. I could not see any "gap" appearance, with or without the backgroundColor solid white / transparent. To me it looks broken with the backgroundColor set and correct with the backgroundColor set to "transparent".

I opened a PR #14 - feel free to merge when you feel it's appropriate. Take your time to validate it is working as intended though, please.

[swushi]

Closed with #14