Is there a Cross platform clearButtonMode for Android with React Native

Question

How should one implement the "X" to clear button in react native so that it works with Android as well as iOS. iOS has the text input option of "clearButtonMode" enum('never', 'while-editing', 'unless-editing', 'always').

To make it cross platform, do we need to just add an android conditional rendering of the clear button? Something like:

{Platform.OS === 'android' && <ClearTextButton />}

Seems a bit hacky so I am wondering if there is a cleaner method for this.

Answer 1

For your problem, you just need to create a simple button to handle the clear function of your input field and place it right next to your TextInput component to have the effect of clearButtonMode.

A naive implementation could be something like this:

1. Create these states in your main component constructor :
   • A state for the status of your TextInput (is it touched?, does it have text yet?)
   • A state for the actual value of your TextInput, set your TextInput's value to this state.

For example:

this.state = {
    textInput1Status: 'untouched',
    textInput1Value: '',
};

2. Create callback functions to set your states:
   • Create a callback function to set both your TextInput's value state and status state and assign it to the onChange prop of you TextInput.

For example:

<TextInput
    onChangeText={(text) => this.onTextInput1Change(text)}
    value={this.state.textInput1Value}
/>

...

onTextInput1Change(text) {
    this.setState({
        textInput1Status: 'touched',
        textInput1Value: text
    });
}

3. Create your own button using TouchableOpacity and handle the clear function.

For example:

<TouchableOpacity onPress={this.clearText}>
    <Image
    style={styles.button}
    source={require('./myButton.png')}
    />
</TouchableOpacity>

...

clearText() {
    this.setState({
        textInput1Status: 'untouched',
        textInput1Value: '',
    });
}

4. Handle the rendering of your "X" button:

For example:

renderClearButotn() {
    if (this.state.textInput1Status == 'touched') {
        return (
            <TouchableOpacity onPress={this.clearText}>
                <Image
                style={styles.button}
                source={require('./myButton.png')}
                />
            </TouchableOpacity>
        );
    } else {
        return '';
    }
}

...

render() {
    return (
        <TextInput
            onChangeText={(text) => this.onTextInput1Change(text)}
            value={this.state.textInput1Value}
        />
        {this.renderClearButton()}          
    );
}

In this way your code will be independent from both iOS and Android. I hope this could help you!

Answer 2

There is another simple solution I found from this article. It works perfect for me in Android, and it is expected to give the same view and behavior in iOS also.

I had to modify the styles slightly to match with my UI

closeButtonParent: {
    justifyContent: 'center',
    alignItems: 'center',
    borderTopRightRadius: 5,
    borderBottomRightRadius: 5,
    backgroundColor: "#cdcdcd", 
    width: 30,
},

Code credit goes to https://www.codevscolor.com/react-native-text-input-clear-button/ auther

Answer 3

This solution works ok but it's not the exact same effect than the clearButtonMode in iOS. The clearButtonMode won't dismiss the keyboard when clicked, and this solution for android will dispatch the Keyboard.dismiss event natively and there's no way to catch it, so the user needs to tap again on the input to get the keyboard back.