react-nativereact-native-elements

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?


Solution

  • 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'
    />