1import React from 'react';
2import {
3  PixelRatio,
4  StyleSheet,
5  Text,
6  TouchableHighlight,
7  TouchableHighlightProps,
8  View,
9} from 'react-native';
10
11import Colors from '../constants/Colors';
12
13type Props = TouchableHighlightProps & {
14  title: string;
15};
16
17const ListButton = ({ disabled, onPress, style, title }: Props) => {
18  const buttonStyles = [styles.button, disabled && styles.disabledButton];
19  const labelStyles = [styles.label, disabled && styles.disabledLabel];
20  return (
21    <View style={[buttonStyles]}>
22      <TouchableHighlight style={style} disabled={disabled} onPress={onPress} underlayColor="#ddd">
23        <Text style={labelStyles}>{title}</Text>
24      </TouchableHighlight>
25    </View>
26  );
27};
28
29const styles = StyleSheet.create({
30  button: {
31    paddingVertical: 10,
32    backgroundColor: 'transparent',
33    borderBottomWidth: 1.0 / PixelRatio.get(),
34    borderBottomColor: '#cccccc',
35  },
36  disabledButton: {},
37  label: {
38    color: Colors.tintColor,
39    fontWeight: '700',
40  },
41  disabledLabel: {
42    color: '#999999',
43  },
44});
45
46export default ListButton;
47