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',
];