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

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