Skip to content

Instantly share code, notes, and snippets.

@llaryssa
Created August 21, 2020 16:15
Show Gist options
  • Save llaryssa/826262451070c48d3f586a2bf02307ad to your computer and use it in GitHub Desktop.
Save llaryssa/826262451070c48d3f586a2bf02307ad to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment