SettingsInputItem.js

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

import Colors from '../../colors'
import closeIcon from './img/icon-close.png'

const SettingsInputItem = ({ title, onChangeText, ...props }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          {...props}
          numberOfLines={1}
          onChangeText={onChangeText}
        />
        <TouchableHighlight
          accessible={false}
          onPress={() => onChangeText && onChangeText(undefined)}>
          <Image style={styles.closeButton} source={closeIcon} />
        </TouchableHighlight>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    backgroundColor: Colors.GRAY50,
    borderWidth: 1,
    borderColor: Colors.GRAY300,
    marginBottom: 4,
    color: Colors.GRAY900,
    height: 64,
    backgroundColor: 'lightgray'
  },
  title: {
    fontSize: 18,
    color: Colors.GRAY900,
    backgroundColor: 'brown'
  },
  inputContainer: {
    height: 64,
    marginLeft: 16,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'pink',
    flex: 1
  },
  input: {
    paddingHorizontal: 16,
    fontSize: 16,
    flexGrow: 1,
    backgroundColor: 'lightblue',
    maxWidth: '100%'
  },
  closeButton: {
    tintColor: Colors.GRAY600
  }
})

export default SettingsInputItem