node.js - Ändra textinmatningsfärg för hashtags react native mobx


Jag vill dynamiskt ändra färgen på ord i ett textInput-element när en hashtag dyker upp. Liknande många appar. Här är vad jag har hittills:

@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;
  }

Textinmatningen:

<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>

Jag fick detta från en annan Stack Overflow-fråga, men det verkar inte fungera med min kod. Får ett mobx-fel som säger "Dynamiska observerbara objekt kan inte fryses." Jag använder mobx för tillståndshantering och felet är ett mobx-fel, så jag tror att detta kan vara ett problem med att sätta och ändra det observerbara formattedText. All hjälp uppskattas!