CODEWITHSUNDEEP
react-nativereact-native-elements
Adnan Erkocevic
Adnan Erkocevic

Reputation: 111

Don't grey out Disabled Input in React Native Elements

I am trying to change the color of disabled React-native-elements component Input. Default behaviour is to grey out everything but I would like to have solid black color of the text even if it's disabled. Has anybody tips of how to do it?

Upvotes: 2

Views: 8505

Answers (2)

Lenoarod
Lenoarod

Reputation: 3620

I first read the official API and find the disabledInputStyle, then I look at the Input source in react-native-elements.

...
Input.defaultProps = {
  InputComponent: TextInput,
};
...
// here find it defalut use textinput in react-native,and when disable true,use the disalbeInputStyle
render(){
<View style={StyleSheet.flatten([styles.container, containerStyle])}>
        ....
          <InputComponent
            testID="RNE__Input__text-input"
           
 underlineColorAndroid="transparent"
            editable={!disabled}
            {...patchWebProps(attributes)}
            ref={ref => {
              this.input = ref;
            }}
            style={StyleSheet.flatten([
              styles.input,
              inputStyle,
              disabled && styles.disabledInput,
              disabled && disabledInputStyle,
            ])}
          />
...
</View>
}

For the TextInput in react-native, we set the text color used color style so you can try to do use disabledInputStyle, and set the color you want.

 <Input
        disabled={true}
        value={"ddd"}
        disabledInputStyle={{color:'red',opacity:1}} //chanage which color you want
        placeholder='INPUT WITH ERROR MESSAGE'
        errorStyle={{ color: 'red' }}
        errorMessage='ENTER A VALID ERROR HERE'
/>

Upvotes: 1

Bas
Bas

Reputation: 113

Set disabledInputStyle prop to opacity: 1

disabledInputStyle={{opacity: 1}}

Upvotes: 5

Related Questions