style input with close button. RN 0.46

App.js

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

export default class App extends Component {
  render() {
    return (
      <View>
        <View style={styles.wrapper}>
          <TextInput
            underlineColorAndroid={'transparent'}
            style={styles.input}
          />
          <TouchableHighlight
            onPress={() => {}}
            style={styles.close}
          >
            <Text
              style={styles.text}
            >X</Text>
          </TouchableHighlight>
        </View>
        <Text>Hello World</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    borderWidth: 1,
    borderRadius: 20,
    borderColor: 'gray',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    flex: 1,
  },
  close: {
    borderWidth: 1,
    borderRadius: 15,
    borderColor: 'red',
    backgroundColor: 'red',
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 3,
  },
  text: {
    color: 'white',
  }
})