AutoCompleteBox with clear data function

AutoCompleteBox.js

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

const styles = StyleSheet.create({
  AutoCompleteBox: {
    flexDirection: 'row',
    marginHorizontal: 20,
    padding: 10,
    alignSelf: 'stretch',
    backgroundColor: '#FFF',
    borderColor: '#BBB',
    borderWidth: 2,
    borderRadius: 3,
    elevation: 3
  },
  AutoCompleteInput: {
    flexGrow: 1
  },
  AutoCompleteClose: {
    padding: 5,
    color: '#999',
    fontWeight: '900',
    elevation: 5,
    fontSize: 18
  }
});
class AutoCompleteBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: ''
    };
  }
  clearInput() {
    this.setState({ query: '' });
  }
  render() {
    return (
      <View style={styles.AutoCompleteBox}>
        <TextInput
          {...this.props}
          value={this.state.query}
          onChangeText={query => this.setState({ query })}
          underlineColorAndroid="#FFF"
          style={styles.AutoCompleteInput}
        />
        <TouchableOpacity onPress={() => this.clearInput()}>
          <Text style={styles.AutoCompleteClose}>X</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default AutoCompleteBox;