Handling onEndEditing on Android React-Native

Question

I have an issue where upon clicking a on a real Android device, the onEndEditing handler is not called on the last focused text field. So essentially to reproduce the issue you would be entering data into a text field, and then click a button while the text field is still focused.

I have the following code example:

export default class Test extends Component<{}> {
state = {
    title: "",
    number1: 0,
    number2: 0,

    number1Partial: '0',
    number2Partial: '0'
};

nameChangeHandler = (newName: string) => {
    this.setState({
        title: newName
    });
}

numericValueChanger = (value: string, field: string) => {
    let reg = /^-?\d+\.?\d*$/;

    if(reg.test(value))
    {

            switch(field)
            {
                case 'number1':
                    this.setState({
                        number1Partial: value,
                        number1: parseInt(value)
                    });
                    break;  
                case 'number2':
                    this.setState({
                        number2Partial: value,
                        number2: parseInt(value)
                    });
            }


    }
    else {
        alert("Please enter a whole number");

        switch(field)
        {
            case 'number1':
                this.setState({
                    number1Partial: this.state.number1 + ""
                });
                break;
            case 'number2':
                this.setState({
                    number2Partial: this.state.number2 + ""
                });
                break;
        }
    }
};

valueTypingHandler = (value: string, field: string) => {
    switch(field)
    {
        case 'number1':
            this.setState({
                number1: value
            });
            break;
        case 'number2':
            this.setState({
                number2: value
            });
            break;
    }
};

submitHandler = () => {
    this.props.navigation.state.params.created({
        title: this.state.title,
        number1: this.state.number1,
        number2: this.state.number2
    });
    this.props.navigation.goBack();
};

render() {
    return (
        <View>
            <Text>Title</Text>
            <TextInput
                value={this.state.title}
                onChangeText={this.nameChangeHandler} 
            />
            <Text>Number 1</Text>
            <TextInput
                keyboardType='numeric'
                value={this.state.number1}
                onChange={(e: any) => this.valueTypingHandler(e.nativeEvent.text, 'number1')}
                onEndEditing={(e: any) => this.numericValueChanger(e.nativeEvent.text, 'number1')}
            />
            <Text>Number 2</Text>
            <TextInput
                keyboardType='numeric'
                value={this.state.number2}
                onChange={(e: any) => this.valueTypingHandler(e.nativeEvent.text, 'number2')}
                onEndEditing={(e: any) => this.numericValueChanger(e.nativeEvent.text, 'number2')}
            />
            <Button
                title="Submit"
                onPress={this.submitHandler}
            />
        </View>
    );
}

} }

I unfortuantely have had to do some strange things with storing state but the 'partial' variables essentially keep track of what has been entered so far so that the text field can continue showing what the user has been entering, without actually updating the state of the variable I care about a I require it to go through a regex first. I am fairly sure there would be a better way to do this so I am definitely open to suggestions there.

A couple of options to capture the text of the last focused text field I can think of include:

• Add a 'ref' to each field, store what field was being edited last and then attempt to apply the value to the state based on that last edited field
• Add onChangeText handler to each field and remove the onEndEditing function entirely. Would need to run the regex within that function

Just wanted to see if there was some other solution I was missing entirely, or if there was some recommended way of handling this. Whilst searching for a solution, I wasn't really able to find a recommendation for handling the problem, just a few people facing similar problems with onBlur not being called. Apparently this is an Android convention though

Thanks in advance!