Hashtag formatter text input react native

Question

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:

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)}
            value={this.descriptionString}
          >
            <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'm using the same states, but am using mobx for state handling. Any help is appreciated!

Answer 1

You can use react-native-twitter-textview

const App = () => {
  const [value, onChangeText] = useState('');
  return (
    <View
      style={StyleSheet.absoluteFill}
    >
      <TextInput
        onChangeText={onChangeText}
        value={value}
        placeholder="Type some #hashtags or @mentions to get started."
        multiline
        numberOfLines={4}
      />
      <TwitterTextView
        style={styles.twitterTextView}
        hashtagStyle={styles.hashtagStyle}
        mentionStyle={styles.mentionStyle}
        linkStyle={styles.linkStyle}
        emailStyle={styles.emailStyle}
      >
        {value}
      </TwitterTextView>
    </View>
  );
}