react native selectively highlight input text (mentions)

app.js

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  wrapper: {
    width: '90%',
    height: 24,
    position: 'relative',
    alignSelf: 'center',
  },
  inputWrapper: {
    position: 'absolute',
    top: 0,
    height: 24,
    width: '100%',
    borderWidth: 1,
    borderColor: 'gray',
  },
  input: {
    height: 24,
    fontSize: 18,
    width: '100%',
  },
  text: {
    height: 24,
    fontSize: 18,
    position: 'absolute',
    top: 0,
    color: 'transparent',
  },
  mention: {
    backgroundColor: 'rgba(0, 150, 255, .5)',
  }
});

export default class App extends React.Component {
  state = {
    inputText: '',
    formattedText: '',
  }
  handleChangeText = (inputText) => {
    const words = inputText.split(' ');
    const formattedText = [];
    words.forEach(word => {
      if (!word.startsWith('@')) return formattedText.push(word, ' ');
      const mention = (
        <Text key={word} style={styles.mention}>
          {word}
        </Text>
      );
      formattedText.push(mention, ' ');
    });
    this.setState({ inputText, formattedText });
  }
  render() {
    return (
      <View style={{ marginTop: 48 }}>
        <View style={styles.wrapper}>
          <Text style={styles.text}>
            {this.state.formattedText}
          </Text>
          <View style={styles.inputWrapper}>
            <TextInput
              style={styles.input}
              value={this.state.inputText}
              onChangeText={this.handleChangeText}
            />
          </View>
        </View>
      </View>
    );
  }
}

This works great but I'm seeing some unexpected behavior on my end.

I have "mention" color set to red, and all other text set to green. You'll notice in the GIF that after I move the cursor back to the highlighted portion of the code, then press space and start typing again, each letter from then on is very briefly colored red then flips to green. It's very subtle, and only appears to happen if I move the cursor back to a highlighted word and start typing from there.

I'm digging into it to see if I can figure out what's going on, but figured I'd comment here in case anyone has any ideas.

This is a fresh react native project created via expo init. The entirety of the project is pasted below:

package.json

{
  "name": "reactnativeplayground",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~44.0.2",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default function App() {
  const [testContent, setTestContent] = React.useState('');
  const [testFormattedContent, setTestFormattedContent] = React.useState('');

  const handleChangeText = (inputText) => {
    const retLines = inputText.split("\n");
    const formattedText = [];
    retLines.forEach((retLine) => {
      const words = retLine.split(" ");
      const contentLength = words.length;
      var format = /[ !#@$%^&*()_+\-=\[\]{};':"\\|,.<>\/?\n]/;
      words.forEach((word,index) => {
        if (
          (word.startsWith("@") && !format.test(word.substr(1))) ||
          (word.startsWith("#") && !format.test(word.substr(1)))
        ) {
          const mention = (
            <Text key={index} style={{ color: 'red' }}>
              {word}
            </Text>
          );
          if (index !== contentLength - 1) formattedText.push(mention, " ");
          else formattedText.push(mention);
        } else {
          if (index !== contentLength - 1) return formattedText.push(word, " ");
          else return formattedText.push(word);
        }
      });
    });

    setTestContent(inputText);// still update your raw text, this will probably go to your api
    setTestFormattedContent(formattedText);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={{ flex: 1, margin: 50, borderColor: 'black', borderWidth: 1, color: 'green' }}
        onChangeText={handleChangeText}
      >
        <Text style={{ color: 'green' }}>{testFormattedContent}</Text>
      </TextInput>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    // alignItems: 'center',
    // justifyContent: 'center',
  },
});

<Text key={index} style={{ color: 'red' }}>
{word}

Thank you soooooooo much for this it worked perfectly

@scf4 Not really, I think most build their own stuff with react native. I saw this(https://github.com/harshq/react-native-mentions), but it's not so modular.

We can definitely make one!

Your snippet was very helpful for syntax highlighting.

Here's the finished result

@comphonia hey man, do you have some source code for what you showed in the gif?