I posted this same question on Stackoverflow, but thought i would share here too as this is a super hot bug for me right now. I can't figure it out. It's been like 6 hours I've been working on this bug.

On SO - https://stackoverflow.com/q/49119413/1828637

Question Description

This is possibly just an Android 6.0 bug. I tested the snack below in Android 5.1.1 and Android 7.0 and it didn't happen there.

I am trying to do an autocomplete whenever the user types "@". I successfully do this, however once I backspace a couple times, the value on the native side becomes some value I never had before. I have simplified the case to this code below:

Please try the snack here - https://snack.expo.io/@noitsnack/what-the-heck---autocomplete-then-backspace-bug OR copy and paste the code into a new react-native init project. I tested in RN 0.51 and RN 0.54.

1. Please then type Hi @
2. You will see it autocompletes to Hi @foobar.
3. Then backspace once and it properly is now Hi @fooba.
4. Backspace again, and now it is Hi @foHi (this is the bug, it should be Hi @foob)

This is a controlled input. I have no idea why it's turning into Hi @foHi on second backspace. If I blur then come after step 3 it doesn't come back.

I tried on two other devices, Android 7.0 and Android 5.1.1, and this bug was not there. It only happened on my Android 6.0. I think this is a OS dependent bug. Does anyone have ideas on what is actually going on? That will help me on how to around this on all devices.

Is this really a bug on RN side?

I recorded a screencast of this super odd behavior here in HD: https://gfycat.com/RectangularAltruisticEuropeanfiresalamander

Here is a gif:

The code (copied from the expo snack):

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

class FieldMentionable extends Component<Props, State> {
    state = {
        value: ''
    }

    render() {
        const { value } = this.state;

        return <TextInput onChange={this.handleChange} value={value} multiline />
    }

    handleChange = ({ nativeEvent:{ text }}) => {
        const { value } = this.state;

        if (text.endsWith(' @')) this.setState(() => ({ value:text + 'foobar' }));
        else this.setState(() => ({ value:text }));
    }

    handleRef = el => this.input = el;
}


export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <FieldMentionable />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 100,
        backgroundColor: '#F5FCFF',
    }
});

How can I get started?

I posted a"Snack" demo above. The code can be copy and pasted into a react-native init project too. This bug happens on some Androids, but not all, it seems.

Sincerest gratitude if you can help me solve this. Been at it for 6 hours+ now! And actually my sincerest gratitude for even offering, I got your email asking me if you can help. That is so awesome of you!