I want to dynamically change the color of words in a textInput element where a hashtag comes up. Similar to a lot of apps. Here is what i have so far:
@observable descriptionString: any = '';
@observable formattedText: any = '';
handleCheckTextChange = (inputText:any) => {
const words = inputText.split(' ');
console.log(words);
const formattedText:any = [];
words.forEach((word:any, index:any) => {
const isLastWord = index === words.length - 1;
if (!word.startsWith('@')) {
return isLastWord ? formattedText.push(word) : formattedText.push(word, ' ');
}
const mention = (
<Text key={word + index} style={{color: 'red'}}>
{word}
</Text>
);
isLastWord ? formattedText.push(mention) : formattedText.push(mention, ' ');
});
this.formattedText = formattedText;
}
The text input:
<TextInput
maxLength={descriptionMaxLength}
multiline={true}
placeholder='Type description here'
style={styles.descriptionInput}
returnKeyType='next'
blurOnSubmit={true}
onChangeText={(text) => this.handleCheckTextChange(text)}
>
<Text>{this.formattedText}</Text>
</TextInput>
I got this from another stack overflow question, but it doesn't seem to work with my code. Getting a mobx error saying "Dynamic observable objects cannot be frozen." I am using mobx for state handling and the error is a mobx error so i am think that this may be an issue with setting and changing that formattedText observable. Any help is appreciated!
question from:
https://stackoverflow.com/questions/65866530/change-text-input-color-for-hashtags-react-native-mobx 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…