TextInput color update only once in React Native

Viewed 42

I'm trying to update the color of TextInput in react native but when I select a color from my color swatch the TextInput color updates only once and it doesn't update anymore when I again select a new color from my color swatch. But on the contrary when I update the backgroundColor for the View it always updates. I have added my code below.

formConfig.color is the state object that provides the TextInput color.

<View style={[
  styles.editor,
  {backgroundColor: formConfig.backgroundColor},
]}>
<TextInput
   style={[
     styles.createUserContent,
     {
        backgroundColor: 'transparent',
        color: formConfig.color,
     },
   ]}
   placeholder={"What's your name?"}
   multiline
   textAlign={'left'}
/>
</View>

This Touchable Opacity maps through an array paintTextColors and displays the colors, on press calls the _handleFormConfig method where I'm passing the key and color value.

{paintTextColors &&
   paintTextColors.map(colorHex => {
return (
<TouchableOpacity
  activeOpacity={0.5}
  onPress={() =>
    this._handleFormConfig('color', colorHex)
  }
  style={[
    styles.paintTextColorItem,
    {backgroundColor: colorHex}
  ]}
/>
);
}}

This is the code that updates the color to the state object. I set new color when user clicks on a different color from the swatch.

_handleFormConfig = (key, value) => {
  this.setState(prevState => {
     return {
       ...prevState,
       formConfig: {
        ...prevState.formConfig,
        [key]: value,
      },
    };
  });
};

Component state:

constructor() {
  this.state = {
     formConfig: {
       backgroundColor: '#ffffff',
       color: '#000000',
     },
  };
}

Custom colors array:

export const paintTextColors = [
  '#f44336',
  '#e91e63',
  '#9c27b0',
  '#673ab7',
];
0 Answers
Related